<template>
  <div>
    <el-dialog title="质检登记" v-if="goodsFormVisible" :visible.sync="goodsFormVisible" :before-close="close" width="66%">
      <el-form inline ref="goodsForm"  :model="formData" :rules="rules">
        <div>
          <h1>基本信息</h1>
          <div>
            <el-form-item label="商品编码：" prop="skuCode" class="form-item">
              <span>{{formData.skuCode}}</span>
            </el-form-item>
            <el-form-item label="商品名称：" prop="skuName" class="form-item">
              <span>{{formData.skuName}}</span>
            </el-form-item>
            <el-form-item label="包装规格：" prop="packDesc" class="form-item">
              <span>{{formData.packDesc}}</span>
            </el-form-item>
            <el-form-item label="包装单位：" prop="uomDesc" class="form-item">
              <span>{{formData.uomDesc}}</span>
            </el-form-item>
            <el-form-item label="库位：" prop="locCode" class="form-item">
              <span>{{formData.locCode}}</span>
            </el-form-item>
            <el-form-item label="跟踪号：" prop="traceId" class="form-item">
              <span>{{formData.traceId}}</span>
            </el-form-item>
            <el-form-item label="批次号：" prop="lotNum" class="form-item">
              <span>{{formData.lotNum}}</span>
            </el-form-item>
            <el-form-item label="质检时间：" prop="qcTime" class="form-item">
              <span>{{formData.qcTime}}</span>
            </el-form-item>
            <el-form-item label="质检规则：" prop="qcRuleName" class="form-item">
              <span>{{formData.qcRuleName}}</span>
            </el-form-item>
            <el-form-item label="质检项：" prop="itemGroupName" class="form-item">
              <span>{{formData.itemGroupName}}</span>
            </el-form-item>
            <el-form-item label="合格品批次号：" prop="quaLotNum" class="form-item">
              <span>{{formData.quaLotNum}}</span>
            </el-form-item>
            <el-form-item label="不合格品批次号：" prop="unquaLotNum" class="form-item">
              <span>{{formData.unquaLotNum}}</span>
            </el-form-item>
            <el-form-item label="合格品上架ID：" prop="quaPaId" class="form-item">
              <span>{{formData.quaPaId}}</span>
            </el-form-item>
            <el-form-item label="不合格品上架ID：" prop="unquaPaId" class="form-item">
              <span>{{formData.unquaPaId}}</span>
            </el-form-item>
            <el-form-item label="合格数EA：" prop="qtyQuaEa" class="form-item">
              <span>{{formData.qtyQuaEa}}</span>
            </el-form-item>
            <el-form-item label="不合格数EA" prop="qtyUnquaEa" class="form-item">
              <span>{{formData.qtyUnquaEa}}</span>
            </el-form-item>
            <el-form-item label="可质检数：" prop="qtyAvailQcUom" class="form-item">
              <span>{{formData.qtyAvailQcUom}}</span>
            </el-form-item>
            <el-form-item label="可质检数EA：" prop="qtyAvailQcEa" class="form-item">
              <span>{{formData.qtyAvailQcEa}}</span>
            </el-form-item>
            <el-form-item label="可质检重量：" prop="availQcWeight" class="form-item">
              <span>{{formData.availQcWeight}}</span>
            </el-form-item>
            <el-form-item label="商品重量" prop="skuWeight" class="form-item">
              <span>{{formData.skuWeight}}</span>
            </el-form-item>
            <el-form-item label="计划质检数" prop="skuQtyPlanQcUom" class="form-item">
              <span>{{formData.skuQtyPlanQcUom}}</span>
            </el-form-item>
            <el-form-item label="计划质检数EA" prop="skuQtyPlanQcEa" class="form-item">
              <span>{{formData.skuQtyPlanQcEa}}</span>
            </el-form-item>
            <el-form-item label="是否序列号管理" prop="isSerial" class="form-item">
              <el-checkbox v-model="formData.isSerial"></el-checkbox>
            </el-form-item>
            <el-form-item label="合格品库位：" prop="quaLoc" class="form-item">
               <PublicQuery
                title="合格品库位"
                single
                :rowData.sync="quaLocData"
                cfgKey="inbWmsLoc"
                baseUrl="/inb_web/inbweb"
                :valueField.sync="formData.quaLoc"
                :textField.sync="formData.quaLoc"
              ></PublicQuery>
            </el-form-item>
            <el-form-item label="合格品跟踪号：" prop="quaTraceId" class="form-item">
              <el-input v-model="formData.quaTraceId"></el-input>
            </el-form-item>
            <el-form-item label="质检合格数EA：" prop="qtyQcQuaEa" class="form-item">
              <el-input v-model="formData.qtyQcQuaEa" @input="ChangeWeight"></el-input>
            </el-form-item>
            <el-form-item label="质检合格重量：" prop="qcQuaWeight" class="form-item">
             <el-input v-model="formData.qcQuaWeight" ></el-input>
            </el-form-item>
            <el-form-item label="不合格品库位：" prop="unquaLoc" class="form-item">
              <PublicQuery
                title="不合格品库位："
                single
                :rowData.sync="unquaLocData"
                cfgKey="inbWmsLoc"
                baseUrl="/inb_web/inbweb"
                :valueField.sync="formData.unquaLoc"
                :textField.sync="formData.unquaLoc"
              ></PublicQuery>
            </el-form-item>
            <el-form-item label="不合格品跟踪号：" prop="unquaTraceId" class="form-item">
              <el-input v-model="formData.unquaTraceId"></el-input>
            </el-form-item>
            <el-form-item label="质检不合格数EA：" prop="qtyQcUnquaEa" class="form-item">
              <el-input v-model="formData.qtyQcUnquaEa" @input="ChangeUnWeight"></el-input>
            </el-form-item>
            <el-form-item label="质检不合格重量：" prop="qcUnquaWeight" class="form-item">
              <el-input v-model="formData.qcUnquaWeight" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remark" class="form-item">
              <el-input v-model="formData.remark"></el-input>
            </el-form-item>
          </div>
        </div>
        <div>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="批次属性" name="2">
              <LotAttrs :formData="formData" :queryParams="lotAttrsParams"></LotAttrs>
            </el-collapse-item>
          </el-collapse>
        </div>

      </el-form>

      <div class="mrg-t" v-if="isLine!=='line'">
        <el-button v-auth="50100020205" type="primary" @click="handleConfirm">保存</el-button>
        <!-- <el-button v-auth="50100020206" type="primary" @click="handleConfirmAdd">保存(下一条)</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  data () {
    var checkQty = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('质检合格数EA必填'))
      } else if (parseInt(value) + this.formData.qtyQcUnquaEa > this.formData.qtyAvailQcEa) {
        return callback(new Error('质检合格数EA和质检不合格数EA之和不能大于可质检数EA'))
      } else {
        callback()
      }
    }
    var checkWeight = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('质检合格重量必填'))
      } else if (parseInt(value) + this.formData.qcUnquaWeight > this.formData.availQcWeight) {
        return callback(new Error('质检合格重量和质检不合格质检合格重量之和不能大于可质检重量'))
      } else {
        callback()
      }
    }
    return {
      activeNames: ['1', '2'],
      formData: {},
      quaLocData: {},
      unquaLocData: {},
      lotAttrsParams: {},
      rules: {
        quaLoc: [
          { required: true, message: '合格品库位必填', trigger: 'change' }
        ],
        quaTraceId: [
          { required: true, message: '合格品跟踪号必填', trigger: 'change' }
        ],
        qtyQcQuaEa: [
          { required: true, validator: checkQty, trigger: 'blur' }
        ],
        qcQuaWeight: [
          { required: true, validator: checkWeight, trigger: 'change' }
        ],
        unquaLoc: [
          { required: true, message: '不合格品库位必填', trigger: 'change' }
        ],
        unquaTraceId: [
          { required: true, message: '不合格品跟踪号必填', trigger: 'change' }
        ],
        qtyQcUnquaEa: [
          { required: true, message: '质检不合格数EA必填', trigger: 'change' }
        ],

      },
      radio: ''
    }
  },
  props: {
    goodsFormVisible: Boolean,
    code: String,
    currentRow: {
      type: Object,
      default: () => ({})
    },
    rowIndex: '',
    listData: Array,
    isLine: String
  },
  methods: {

    // 合格重量变化
    ChangeWeight () {
      if (this.formData.qtyQcQuaEa === '') return false
      this.formData.qcQuaWeight = (this.formData.qtyQcQuaEa * this.formData.skuWeight).toFixed(2)
    },
    // 不合格重量变化
    ChangeUnWeight () {
      if (this.formData.qtyQcUnquaEa === '') return false
      this.formData.qcUnquaWeight = (this.formData.qtyQcUnquaEa * this.formData.skuWeight).toFixed(2)
    },

    close () {
      this.$emit('close')
    },

    // 确认
    handleConfirm () {
      let data = Object.assign({ isChecked: 'false' }, this.formData)
      this.$emit('editOK', data, this.rowIndex)
      this.$refs.goodsForm.resetFields()
    },
  },

  watch: {
    quaLocData: {
      handler (item) {
        this.formData.quaLoc = item.locCode
      },
      deep: true
    },
    unquaLocData: {
      handler (item) {
        this.formData.unquaLoc = item.locCode
      },
      deep: true
    },
    currentRow: {
      handler (item) {
        this.formData = { ...item }
        this.lotAttrsParams = {
          skuCode: item.skuCode,
          ownerCode: item.ownerCode
        }
      },
      deep: true
    }
  }
}
</script>
<style scoped>
  .form-item{
      min-width: 260px
    }
    .mrg-t{
      margin-top: 20px
    }
</style>
