<template>
<el-dialog
  class="creator"
  title="商品信息"
  width="70%"
  :visible="showDetail"
  @close="close"
>
<el-form
      inline
      ref="form"
      label-position="top"
      :model="formData"
      disabled
    >
       <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-form>

</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 {
      formData: {},
      lotAttrsParams: {}, // 批次属性查询条件
      // 输入框
      detailFields: [
        { label: '行号', prop: 'lineNo' },
        { label: '状态', prop: 'status' },
        { label: '入库单号', prop: 'asnNo' },
        { label: '入库单行号', prop: 'asnLineNo' },
        { label: '商品编码', prop: 'skuCode' },
        { label: '商品名称', prop: 'skuName' },
        { label: '包装规格', prop: 'packDesc' },
        { label: '单位', prop: 'uomDesc' },
        { label: '预收数', prop: 'qtyPlanUom' },
        { label: '预收数EA', prop: 'qtyPlanEa' },
        { label: '可收数', prop: 'currentQtyRcvUom' },
        { label: '可收数EA', prop: 'currentQtyRcvEa' },
        { label: '预收重量', prop: 'planWeight' },
        { label: '已收重量', prop: 'rcvWeight' },
        { label: '单价', prop: 'price' },
        { label: '商品重量', prop: 'skuWeight' },
        { label: '收货库位', prop: 'toLoc' },
        { label: '收货跟踪号', prop: 'toId' },
        { label: '码盘跟踪号', prop: 'planId' },
        { label: '收货时间', prop: 'rcvTime' },
        { label: '上架规则', prop: 'paRuleName' },
        { label: '上架库位指定规则', prop: 'reserveCode' },
        { label: '计划上架库位', prop: 'planPaLoc' },
        { label: '上架任务ID', prop: 'paId' },
        { label: '批次号', prop: 'lotNum' },
        { label: '凭证号', prop: 'voucherNo' },
        { label: '质检状态', prop: 'qcStatus' },
        { label: '质检收货明细号', prop: 'qcRcvId' },
        { label: '物流单号', prop: 'logisticNo' },
        { label: '物流单行号', prop: 'logisticLineNo' },
        { label: '采购单号', prop: 'poNo' },
        { label: '采购单行号', prop: 'poLineNo' },
        { label: '越库收货明细号', prop: 'cdRcvId' },
        { label: '越库类型', prop: 'cdType' },
        { label: '出库单号', prop: 'soNo' },
        { label: '出库单行号', prop: 'soLineNo' },
        { label: '是否齐套管理', prop: 'isKitting' },
        { label: '齐套管理类型', prop: 'kittingType' },
        { label: 'EDI是否已发送', prop: 'isEdiSend' },
        { label: 'EDI发送时间', prop: 'ediSendTime' },
        { label: '父件编码', prop: 'parentSkuCode' },
        { label: '工单号', prop: 'workNo' },
        { label: '承运商', prop: 'carrierName' },
        { label: '车牌号', prop: 'vehicleNo' },
        { label: '驾驶员', prop: 'driver' },
        { label: '身份证号', prop: 'identificationNo' },
      ],
      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>
