<template>
  <div>
    <el-dialog v-if="dialogTableVisible" title="分配明细" :visible.sync="dialogTableVisible" :before-close="dialogClose" width="80%">
      <div v-if="showStatus === 1">
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">分配ID：{{form.allocId}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">状态：{{form.status}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">订单波次单号：{{form.packOpName}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">预配ID：{{form.preallocId}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">出库单号：{{currentData.soNo}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">出库单行号：{{currentData.lineNo}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">拣货波次单号：{{currentData.pkWvNo}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">越库类型：{{currentData.cdType}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">货主：{{form.ownerCode}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">商品编码：{{form.skuCode}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">商品名称：{{form.skuName}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">库位：{{form.locCode}}</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.lotNum}}</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.toId}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">包装规格：{{form.packDesc}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">单位：{{form.uomDesc}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">分配数：{{form.qtyUom}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">分配数EA：{{form.qtyEa}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">重量：{{form.weight}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">复核状态：{{form.checkStatus}}</div></el-col>
                </el-row>
                <hr/>
                <el-row :gutter="20">
                  <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-col :span="6"><div class="grid-content bg-purple">复核人登录名：{{currentData.checkOpName}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">复核时间：{{currentData.checkTime}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">打包人登录名：{{currentData.packOpName}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">打包时间：{{currentData.packTime}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">发货人登录名：{{currentData.shipOpName}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">发货时间：{{currentData.shipTime}}</div></el-col>
                </el-row>
            </el-collapse-item>
           </el-collapse>
      </div>
      <div v-else>
          <el-form ref="form" :model="form" inline :rules="rules" label-position="top">
            <el-form-item label="货主" prop="ownerName">
              <el-input v-model="form.ownerName" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品" prop="skuName">
              <PublicQuery
                title="商品批次库位库存"
                baseUrl="/oub_web/oubweb"
                single
                cfgKey="oubWmsInvLotLocNotHoldWithLot"
                :valueField.sync="form.skuCode"
                :textField.sync="form.skuName"
                :before="beforeSelectSku"
                @change="getGoodsDate">
              </PublicQuery>
            </el-form-item>
            <el-form-item label="批次号" prop="lotNum">
              <el-input v-model="form.lotNum" disabled></el-input>
            </el-form-item>
            <el-form-item label="库位" prop="locCode">
              <el-input v-model="form.locCode" disabled></el-input>
            </el-form-item>
            <el-form-item label="跟踪号" prop="traceId">
              <el-input v-model="form.traceId" disabled></el-input>
            </el-form-item>
            <el-form-item label="包装规格" prop="packDesc">
              <el-input v-model="form.packDesc" disabled></el-input>
            </el-form-item>
            <el-form-item label="包装单位" prop="uomDesc">
              <PublicQuery title="包装单位" single  baseUrl="/oub_web/oubweb" cfgKey="oubWmsUom"  :textField.sync="form.uomDesc">
              </PublicQuery>
            </el-form-item>
            <el-form-item label="数量" prop="qtyUom">
              <el-input v-model="form.qtyUom" type="number" @input="changeNum"></el-input>
            </el-form-item>
            <el-form-item label="数量EA" prop="qtyEa">
              <el-input v-model="form.qtyEa" disabled></el-input>
            </el-form-item>
            <el-form-item label="重量" prop="weight">
              <el-input v-model="form.weight" disabled ></el-input>
            </el-form-item>
            <el-form-item
              label="目标库位"
              prop="toLoc">
              <PublicQuery
                title="目标库位"
                single
                cfgKey="oubWmsLoc"
                baseUrl="/oub_web/oubweb"
                :valueField.sync="form.toLoc"
                @change="getTargetLocation"
              ></PublicQuery>
            </el-form-item>
            <el-form-item label="目标跟踪号" prop="toId">
              <el-input v-model="form.toId"></el-input>
            </el-form-item>
            <el-form-item label="序列号库存" prop="serialNo">
              <el-input v-model="form.serialNo" :disabled="isDisable == true"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button type="primary" @click="doAffirm('form')">确认</el-button>
          </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      qtyEa: '',
      isDisable: false,
      form: {
        toId: '*'
      },
      activeNames: ['1'],
      rules: {
        skuCode: [{ required: true, message: '请输入商品', trigger: 'change' }],
        uomDesc: [{ required: true, message: '请输入包装单位', trigger: 'blur' }],
        qtyUom: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        toLoc: [{ required: true, message: '请输入目标库位', trigger: 'blur' }],
        // toId: [{ required: true, message: '请输入目标跟踪号', trigger: 'blur' }]
      },
      currentData: {}
    }
  },
  props: {
    dialogTableVisible: Boolean,
    showStatus: Number,
    variable: Number,
  },
  mounted () {

  },
  methods: {
    doEditDetail (msg) {
      this.form = msg
      this.isDisable = true
    },
    distributionInformation (msg) {
      this.form = msg
    },
    emitEvent (msg) {
      this.currentData = msg
    },
    getTargetLocation (row) {
      this.form.toLoc = row.locCode
    },
    getGoodsDate (row) {
      this.isDisable = true
      this.form.qtyEa = row.qtyAvailable
      this.form.qtyUom = row.qtyAvailable
      this.form.ownerCode = row.ownerCode
      this.form.skuName = row.skuName
      this.form.skuCode = row.skuCode
      this.form.qtyUom = row.qtyAvailable
      this.form.weight = row.invAvgWeight
      this.form.lotNum = row.lotNum
      this.form.locCode = row.locCode
      this.form.traceId = row.traceId
      this.form.packDesc = row.packDesc
      this.form.uomDesc = row.uomDesc
      this.form.printUom = row.printUom
      this.form.lotNum = row.lotNum
      this.form.packCode = row.packCode
      this.form.uomQty = row.uomQty
      this.form.formatCode = row.formatCode
    },
    doAffirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('doDistribution', this.form)
        } else {
          return false
        }
      })
    },
    dialogClose (form) {
      this.$emit('dialogClose')
    },
    changeNum () {
      this.form.qtyEa = parseFloat(this.form.qtyUom).toFixed(2)
    },
    // 选商品前校验
    beforeSelectSku () {
      return {
        queryParams: {
          ownerCodeParam: this.form.ownerCode,
          skuCodeParam: this.form.skuCodes
        }
      }
    },
  },
  watch: {

  }
}
</script>

<style scoped>
  .el-col-6 {
    margin: 10px 0;
  }
  .el-form-item {
    padding-right: 20px;
  }
  .btn-box {
    text-align: right;
  }
</style>
