<template>
    <div>
      <div class="process" v-if="flag === 1">
        <el-dialog :visible.sync="isProcess" :before-close="handleProcessclose" width="80%">
          <el-collapse v-model="activeNames">
          <el-collapse-item name="1" title="加工任务明细">
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">加工任务ID :{{currentData.kitTaskId}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">状态：{{currentData.status}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">加工单号 :{{currentData.kitNo}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">加工类型 :{{currentData.kitType}}</div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">父件行号 :{{currentData.parentLineNo}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">子件行号 :{{currentData.subLineNo}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">货主 :{{currentData.ownerName}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">子件编码 :{{currentData.subSkuCode}}</div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">货主：{{currentData.ownerCode}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">商品编码：{{currentData.skuCode}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">商品名称：{{currentData.skuName}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">库位：{{currentData.locCode}}</div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">子件名称 :{{currentData.subSkuName}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">包装规格 :{{currentData.packDesc}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">包装单位 :{{currentData.uomDesc}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">批次号 :{{currentData.lotNum}}</div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">库位 :{{currentData.locCode}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">跟踪号 :{{currentData.traceId}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">数量 :{{currentData.qtyUom}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">数量EA :{{currentData.qtyEa}}</div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple">目标库位 :{{currentData.toLoc}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">目标跟踪号 :{{currentData.toId}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">拣货人 :{{currentData.pickOpName}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">拣货时间 :{{currentData.pickTime}}</div></el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
       </el-dialog>
      </div>
      <div class="process-form" v-if="flag === 2">
        <el-dialog title="加工任务明细" :visible.sync="isProcess" :before-close="handleProcessclose">
          <el-form
            inline
            label-position="top"
            :model="currentData"
            ref="currentData"
            :rules="rules">
            <div>
              <el-form-item
                label="加工任务ID"
                prop="kitTaskId">
                 <el-input v-model="currentData.kitTaskId" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="状态"
                prop="status">
                <el-input v-model="$utils.keyMatcher(currentData.status, $keys.stockOut.status).name" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="货主"
                prop="ownerName">
                 <el-input v-model="currentData.ownerName" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="子件"
                prop="subSkuName">
                  <PublicQuery
                  title="商品批次库位查询"
                  single
                  cfgKey="kitWmsInvLotLocNotHold"
                  baseUrl="/kit_web/kitweb"
                  :textField.sync="currentData.subSkuName"
                  @change="getGoodsDate"
                ></PublicQuery>
              </el-form-item>
              <el-form-item
                label="包装规格"
                prop="packDesc">
                <PublicQuery
                title="包装规格"
                single
                cfgKey="kitWmsPackage"
                baseUrl="/kit_web/kitweb"
                :valueField.sync="currentData.packDesc"
                :textField.sync="currentData.packDesc"
              ></PublicQuery>
              </el-form-item>
               <el-form-item
                label="批次号"
                prop="lotNum">
                 <el-input v-model="currentData.lotNum"></el-input>
              </el-form-item>
              <el-form-item
                label="包装单位"
                prop="uomDesc">
                <PublicQuery
                title="包装单位"
                single
                cfgKey="kitWmsUom"
                baseUrl="/kit_web/kitweb"
                :valueField.sync="currentData.uomDesc"
                :textField.sync="currentData.uomDesc"
              ></PublicQuery>
              </el-form-item>
              <el-form-item
                label="数量"
                prop="qtyUom">
                 <el-input v-model="currentData.qtyUom" type="number" @input="changeNum"></el-input>
              </el-form-item>
              <el-form-item
                label="数量EA"
                prop="qtyEa">
                 <el-input v-model="currentData.qtyEa" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="库位"
                prop="locCode">
                 <el-input v-model="currentData.locCode" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="跟踪号"
                prop="traceId">
                 <el-input v-model="currentData.traceId"></el-input>
              </el-form-item>
              <el-form-item
                label="目标库位"
                prop="toLoc">
                 <PublicQuery
                title="库位"
                single
                cfgKey="kitWmsLoc"
                baseUrl="/kit_web/kitweb"
                @change="getTargetLocation"
                :valueField.sync="currentData.toLoc"
                :textField.sync="currentData.toLoc"
s              ></PublicQuery>
              </el-form-item>
              <el-form-item
                label="目标跟踪号"
                prop="toId">
                <el-input v-model="currentData.toId"></el-input>
              </el-form-item>
              <el-form-item
                label="拣货人"
                prop="pickOpName">
                <el-input v-model="currentData.pickOpName" disabled></el-input>
              </el-form-item>
              <el-form-item
                label="拣货时间"
                prop="pickTime">
                <el-input v-model="currentData.pickTime" disabled></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="more-query-btn">
            <el-button v-auth="50300030101" type="primary" @click="handleConfirm('currentData')">拣货确认</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      activeNames: ['1'],
      rules: {
        uomDesc: [{ required: true, message: '请输入包装单位', trigger: 'blur' }],
        qtyUom: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        toLoc: [{ required: true, message: '请输入目标库位', trigger: 'blur' }],
        toId: [{ required: true, message: '请输入目标跟踪号', trigger: 'blur' }]
      }
    }
  },
  props: {
    flag: Number,
    isProcess: Boolean,
    currentData: {
      type: Object,
      default: () => ({})
    },
  },
  mounted () {

  },
  methods: {
    changeNum () {
      this.currentData.qtyEa = parseFloat(this.currentData.qtyUom).toFixed(5)
    },
    handleProcessclose () {
      this.$emit('handleProcessclose')
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('handleDistribution', this.currentData)
          this.$emit('handleProcessclose')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getGoodsDate (row) {
      this.currentData.uomDesc = row.uomDesc
      this.currentData.packDesc = row.packDesc
      this.currentData.lotNum = row.lotNum
      this.currentData.traceId = row.traceId
      this.currentData.qtyUom = row.qty
      this.currentData.qtyEa = row.qtyAvailable
    },
    beforeSelectSku () {

    },
    beforeSelectToLoc () {

    },
    getTargetLocation (row) {
      this.currentData.toLoc = row.locCode
    }
  }
}
</script>
<style>
.bg-purple {
  font-size: 14px;
  padding: 6px 0;
}
</style>
