<template>
<el-dialog
  class="creator"
  title="质检登记"
  width="70%"
  :visible="showDetail"
  @close="close"
>
  <div class="creator__info creator__info--senior">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <template v-for="item in detailFields">
          <div class="detail-item" :key="item.prop">
            <span class="detail-item__label">{{item.label}} :&nbsp;&nbsp;</span>
            <span class="detail-item__value">{{item.key ? $utils.keyMatcher(detailData[item.prop], $keys.stockIn.count[item.key]).name : detailData[item.prop]}}</span>
          </div>
        </template>
      </el-collapse-item>
      <el-collapse-item title="批次属性" name="2">
        <LotAttrs
          type="text"
          :formData="detailData"
          :queryParams="lotAttrsParams"
        ></LotAttrs>
      </el-collapse-item>
    </el-collapse>
  </div>
</el-dialog>
</template>

<script>
export default {
  props: ['showDetail', 'detailData'],
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.lotAttrsParams = {
          ownerCode: val.ownerCode,
          skuCode: val.skuCode,
        }
      }
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      lotAttrsParams: {}, // 批次属性查询条件
      // 输入框
      detailFields: [
        { label: '质检单号', prop: 'qcNo' },
        { label: '质检单行号', prop: 'qcLineNo' },
        { label: '单据单号', prop: 'orderNo' },
        { label: '状态', prop: 'status' },
        { label: '商品编码', prop: 'skuCode' },
        { label: '商品名称', prop: 'skuName' },
        { label: '包装规格', prop: 'packDesc' },
        { label: '单位', prop: 'uomDesc' },
        { label: '库位', prop: 'locCode' },
        { label: '跟踪号', prop: 'traceId' },
        { label: '批次号', prop: 'lotNum' },
        { label: '质检时间', prop: 'qcTime' },
        { label: '质检规则', prop: 'qcRuleName' },
        { label: '质检项', prop: 'itemGroupName' },
        { label: '合格品批次号', prop: 'quaLotNum' },
        { label: '不合格品批次号', prop: 'unquaLotNum' },
        { label: '合格品上架ID', prop: 'quaPaId' },
        { label: '不合格品上架ID', prop: 'unquaPaId' },
        { label: '合格数EA', prop: 'qtyQuaEa' },
        { label: '不合格数EA', prop: 'qtyUnquaEa' },
        { label: '可质检数', prop: 'qtyAvailQcUom' },
        { label: '可质检数EA', prop: 'qtyAvailQcEa' },
        { label: '可质检重量', prop: 'availQcWeight' },
        { label: '商品重量', prop: 'skuWeight' },
        { label: '计划质检数', prop: 'skuQtyPlanQcUom' },
        { label: '计划质检数EA', prop: 'skuQtyPlanQcEa' },
        { label: '备注', prop: 'remark' },
        { label: '合格品库位', prop: 'quaLoc' },
        { label: '合格品跟踪号', prop: 'quaTraceId' },
        { label: '质检合格数EA', prop: 'qtyQcQuaEa' },
        { label: '质检合格重量', prop: 'qcQuaWeight' },
        { label: '不合格品库位', prop: 'unquaLoc' },
        { label: '不合格品跟踪号', prop: 'unquaTraceId' },
        { label: '质检不合格数EA', prop: 'qtyQcUnquaEa' },
        { label: '质检不合格重量', prop: 'qcUnquaWeight' },
      ],
      activeNames: ['1', '2'],
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .detail-item {
    display: inline-table;
    width: 25%;
    font-size: 14px;
    padding: 7px;
  }
</style>
