<template>
  <div>
    <el-table v-loading="loading" :data="codeArray" style="width: 100%;" max-height="350" height="350"
              :row-style="rowStyle"
              border
              ref="multipleTable"
    >
      <!--      <el-table-column-->
      <!--        type="selection"-->
      <!--        width="55">-->
      <!--      </el-table-column>-->
      <el-table-column label="序号" type="index" width="55"></el-table-column>
      <el-table-column
        label="追溯码"
        prop="code"
        width="240"
        show-overflow-tooltip
      ></el-table-column>
      <!--      <el-table-column-->
      <!--        label="产品通用名"-->
      <!--        prop="productName"-->
      <!--        width="160"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--        label="规格型号"-->
      <!--        prop="ggxh"-->
      <!--        width="160"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <el-table-column
        label="批次号"
        prop="batchNo"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <!--      <el-table-column-->
      <!--        label="价格"-->
      <!--        prop="price"-->
      <!--        width="120"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <!--<el-table-column-->
      <!--  label="扫码数量"-->
      <!--  prop="scanCount"-->
      <!--  width="80"-->
      <!--  show-overflow-tooltip-->
      <!--&gt;</el-table-column>-->
      <!--      <el-table-column-->
      <!--        label="实际数量"-->
      <!--        prop="reCount"-->
      <!--        width="80"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->
      <el-table-column
        label="生产日期"
        prop="productDate"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="失效日期"
        prop="expireDate"
        width="120"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        label="序列号"
        prop="serialNo"
        width="120"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        label="拆零标识"
        prop="fifoSplit"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag :type="getFifoSplitType(scope.row.fifoSplit)">
            {{ fifoSplitMap[scope.row.fifoSplit] }}
          </el-tag>
        </template>
      </el-table-column>

      <!--      <el-table-column-->
      <!--        label="供应商"-->
      <!--        prop="supName"-->
      <!--        width="180"-->
      <!--        show-overflow-tooltip-->
      <!--      ></el-table-column>-->

      <!--      <el-table-column label="操作" width="140" fixed="right">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button-->
      <!--            type="text"-->
      <!--            size="small"-->
      <!--            @click.native.stop="deleteCode(scope.$index, scope.row)"-->
      <!--          >减一-->
      <!--          </el-button-->
      <!--          >-->
      <!--          &lt;!&ndash;          <el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;            type="text"&ndash;&gt;-->
      <!--          &lt;!&ndash;            size="small"&ndash;&gt;-->
      <!--          &lt;!&ndash;            :disabled="scope.row.relId!=null"&ndash;&gt;-->
      <!--          &lt;!&ndash;            @click.native.stop="bindRl(scope.row)"&ndash;&gt;-->
      <!--          &lt;!&ndash;          >绑定产品&ndash;&gt;-->
      <!--          &lt;!&ndash;          </el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;          >&ndash;&gt;-->
      <!--          &lt;!&ndash;          <el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;            type="text"&ndash;&gt;-->
      <!--          &lt;!&ndash;            size="small"&ndash;&gt;-->
      <!--          &lt;!&ndash;            :disabled="scope.row.supId!=null"&ndash;&gt;-->
      <!--          &lt;!&ndash;            @click.native.stop="handleUnitClick(scope.row)"&ndash;&gt;-->
      <!--          &lt;!&ndash;          >绑定供应商&ndash;&gt;-->
      <!--          &lt;!&ndash;          </el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;          >&ndash;&gt;-->
      <!--          <el-button-->
      <!--            type="text"-->
      <!--            size="small"-->
      <!--            @click.native.stop="editCode(scope.row)"-->
      <!--          >编辑-->
      <!--          </el-button-->
      <!--          >-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <pagination
      v-show="codeTotal>0"
      :total="codeTotal"
      :limit.sync="codeQuery.limit"
      :page.sync="codeQuery.page"
      @pagination="getCodeList"
    ></pagination>
    <!--    <el-row v-if="viewType==7">-->
    <!--      <el-col span="10">-->
    <!--        <div style="float: left">-->
    <!--          <td>-->
    <!--            <div style="background-color: #FC4A45;width: 10px;height: 10px"></div>-->
    <!--          </td>-->
    <!--          <td><span>红色:多余条码</span></td>-->
    <!--          <td>-->
    <!--            <div style="background-color: #F4BD25;width: 10px;height: 10px;margin-left: 15px"></div>-->
    <!--          </td>-->
    <!--          <td>-->
    <!--            <span>黄色:包含多余条码</span>-->
    <!--          </td>-->

    <!--        </div>-->
    <!--      </el-col>-->


    <!--    </el-row>-->

  </div>
</template>

<script>
import { deleteCodesTempById, errorCodeList, updateCodeBindSup } from '@/api/inout/order'
import { getCodeDetail } from '@/api/collect/collectOrder'

import { parseTime } from '@/utils/coTools'
import { getCheckDetailCodes } from '@/api/inout/orderDetailCode'
import { getCodeEndList } from '@/api/collect/IoCollectCodeSelect'

export default {
  name: 'PanelDestroyCodeDetail',
  props: {
    prescribeData: {
      type: Object,
      required: true
    },
    refreshPanel: {
      type: Function,
      required: true
    },
    // selectRlTitle: {
    //   type: Object,
    //   required: true,
    // },
    // selectUnitTitle: {
    //   type: Object,
    //   required: true,
    // },
    // editTitle: {
    //   type: Object,
    //   required: true,
    // },
    viewType: {
      type: Object,
      required: true
    }

  },
  data() {
    return {
      loading: false,
      query: {
        code: '',
        corpOrderId: ''
      },
      codeDetail: null,
      codeArray: [],
      total: 0,
      curRow: null,
      selectRlVisible: false,
      dialogTableVisible: false,
      editCodeVisible: false,
      editOriginCodeVisible: false,
      fromCorp: null,
      codeQuery: {
        code: '',
        billNo: '',
        page: 1,
        limit: 20,
        selectType: 1,
        relId: ''
      },
      codeTotal:0,
      fifoSplitMap:{
        1 : "自动拆零",
        2 : "自动整取",
        3 : "手动整取",
        4 : "手动拆零"
      }
    }
  },
  methods: {
    getCodeList() {
      this.loading = true
      //
      // getCodeDetail({ id:this.prescribeData.id }) //查找该单号下的所有条码
      //     .then((response) => {
      //       this.codeArray = response.data || [];
      //       this.loading = false;
      //     })
      //     .catch(() => {
      //       this.loading = false;
      //       this.list = [];
      //     });
      this.codeQuery.billNo = this.prescribeData.orderIdFk
      this.codeQuery.relId = this.prescribeData.relId
      getCodeEndList(this.codeQuery).then(res => {
        if (res.code == 20000) {
          this.codeArray = res.data.list || []
          this.codeTotal= res.data.total || 0
          this.loading = false
        } else {
          this.loading = false
          this.codeTotal = 0
          this.codeArray = []
        }
      })

    },

    deleteCode(index, row) {
      this.$confirm('是否确定移除一个条码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let tQuery = {
          id: row.id
        }
        deleteCodesTempById(tQuery)
          .then((response) => {
            if (response.code === 20000) {
              this.refreshPanel()
            } else {
              this.$message.error(response.message)
            }
            this.loading = false
          })
      }).catch(() => {
      })
    },

    bindRl(val) {
      this.curRow = val
      this.fromCorp = this.idQuery.fromCorp
      this.selectRlVisible = true
    },

    handleUnitClick(row) {
      this.curRow = row
      this.dialogTableVisible = true
    },

    editCode(row) {
      this.editTitle = '编辑条码'
      this.codeDetail = row
      this.editCodeVisible = true
    },

    rowStyle({ row, rowIndex }) {
      // let rowBackground = {};
      // if (!this.$isNotBlank(row.supId) || !this.$isNotBlank(row.relId)) {
      //   rowBackground.color = '#f60303';
      // }
      // if (row.checkStatus == 2) {
      //   rowBackground.color = '#F7BB29';
      // } else if (row.checkStatus == 1) {
      //   rowBackground.color = '#FC4A45';
      // }
      // return rowBackground;
    },

    selectBindRl(row) {
      let query = {
        id: this.curRow.id,
        relId: row.id,
        mySupId: row.unitFk
      }
      updateCodeBindSup(query).then((response) => {
        if (response.code == 20000) {
          this.$message.success('绑定成功')
          this.orderFormData.id = this.curRow.orderId
          this.closeBindDialog()
          this.getCodeList()
        } else {
          if (response.code == 503) {
            this.curRow = response.data
            this.orderFormData.id = this.curRow.orderId
            this.getCodeList()
            this.selectUnitTitle = response.message
            this.handleUnitClick(response.data)
          } else {
            this.$message.error(response.message)
          }
        }
      }).catch(() => {

      })
    },

    selectSupUnit(row) {
      let query = {
        id: this.curRow.id,
        supId: row.erpId
      }
      updateCodeBindSup(query).then((response) => {
        if (response.code == 20000) {
          this.$message.success('绑定成功')
          this.idQuery.id = this.curRow.orderId
          this.getCodeList()
          this.refreshPanel()
        } else {
          this.$message.error(response.message)
        }
      }).catch(() => {
      })
    },

    closeBindDialog() {
      this.selectRlVisible = false
      this.dialogTableVisible = false
      this.refreshPanel()
    },

    closeCodeDialog() {
      this.editCodeVisible = false
      this.editOriginCodeVisible = false
      this.refreshPanel()
    },

    repeatAddCode(editData) {
      let tQuery = editData
      tQuery.orderId = this.orderFormData.id
      tQuery.actDate = parseTime(this.orderFormData.actDate, '{y}-{m}-{d} {h}:{i}:{s}')
      tQuery.action = this.orderFormData.action
      this.closeCodeDialog()

    },
    getFifoSplitType(fifoSplit){
      if (fifoSplit == 1 || fifoSplit == 4){
        return ""
      }
      if (fifoSplit == 2 || fifoSplit == 3){
        return "success"
      }
    }
  },
  created() {
    if (this.prescribeData.id != null) {
      this.getCodeList()
    }
  },

  components: {}
}
</script>

<style scoped>

</style>
