<template>
  <div>
    <el-dialog title="商品明细" v-if="goodsFormVisible" :visible.sync="goodsFormVisible" :before-close="close" width="66%">
      <el-form inline ref="goodsForm" label-position="top" :model="formData" :rules="rules">
        <div>
          <el-form-item label="商品编码" prop="skuCode">
            <PublicQuery title="商品"  single :rowData.sync="skuData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsSkuCode" :valueField.sync="formData.skuCode" :textField.sync="formData.skuName" :before="beforeSelectSku">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="商品名称" prop="skuName">
            <el-input v-model="formData.skuName" disabled></el-input>
          </el-form-item>
          <el-form-item label="物流单号" prop="logisticNo">
            <el-input v-model="formData.logisticNo"></el-input>
          </el-form-item>
          <el-form-item label="预收数" prop="qtyAsnUom">
            <el-input v-model.number="formData.qtyAsnUom" @input="uomChange"></el-input>
          </el-form-item>
          <el-form-item label="预收数EA" prop="qtyAsnEa">
            <el-input v-model="formData.qtyAsnEa" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="skuWeight">
            <el-input v-model.number="formData.skuWeight" disabled></el-input>
          </el-form-item>
          <el-form-item label="预收重量" prop="asnWeight">
            <el-input v-model.number="formData.asnWeight" @input="weightChange"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input v-model="formData.price"></el-input>
          </el-form-item>
          <el-form-item label="工单号" prop="workNo">
            <el-input v-model="formData.workNo"></el-input>
          </el-form-item>
          <el-form-item label="计划跟踪号" prop="traceId">
            <el-input v-model="formData.traceId"></el-input>
          </el-form-item>
          <el-form-item label="上架库位指定规则" prop="reserveCode">
            <el-select v-model="formData.reserveCode">
              <el-option label="人工指定库位" value="MAN"></el-option>
              <el-option label="收货时计算库位" value="RCV"></el-option>
              <el-option label="上架时计算库位" value="PA"></el-option>
              <el-option label="收货前计算库位-一步收货" value="B_RCV_ONE"></el-option>
              <el-option label="收货前计算库位-两步收货" value="B_RCV_TWO"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="齐套管理类型" prop="kittingType">
            <el-select v-model="formData.kittingType">
              <el-option label="商品齐套" value="MK"></el-option>
              <el-option label="序列号齐套" value="SK"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="包装规格" prop="packCode">
            <PublicQuery disabled title="包装规格" single :rowData.sync="businessData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsSku" :valueField.sync="formData.packCode" :textField.sync="formData.packDesc">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="包装单位" prop="uomDesc">
            <PublicQuery title="包装单位" single :rowData.sync="businessData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsUom" :valueField.sync="formData.uomDesc" :textField.sync="formData.uomDesc">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="上架规则" prop="paRuleName">
            <PublicQuery title="上架规则" single :rowData.sync="paruleData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsPaRule" :valueField.sync="formData.paRuleName">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="计划收货库位" prop="planToLoc">
            <PublicQuery title="计划收货库位" single :rowData.sync="plantolocData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsLoc" :valueField.sync="formData.planToLoc">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="父件编码" prop="parentSkuCode">
            <PublicQuery title="父件编码" single :rowData.sync="parentData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsBomSkuCode" :valueField.sync="formData.parentSkuCode">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="是否齐套管理">
            <el-checkbox v-model="formData.isKitting" true-label="Y" false-label="N"></el-checkbox>
          </el-form-item>
        </div>

        <div>
          <el-collapse v-model="activeNames" >
            <el-collapse-item title="批次属性" name="1">
              <LotAttrs
                :formData="formData"
                :queryParams="lotAttrsParams"
              ></LotAttrs>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div >
          <el-collapse v-model="activeNames">
            <el-collapse-item title="质检信息" name="2">
              <el-form-item label="是否质检管理" prop="isQc">
                <el-radio v-model="formData.isQc"></el-radio>
              </el-form-item>
              <el-form-item label="质检状态" prop="qcStatus">
                <el-select v-model="formData.qcStatus" disabled>
                  <el-option label="创建" value="00"></el-option>
                  <el-option label="部分质检" value="10"></el-option>
                  <el-option label="完全质检" value="20"></el-option>
                  <el-option label="关闭订单" value="99"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="质检阶段" prop="qcPhase">
                <el-select v-model="formData.qcPhase" disabled>
                  <el-option label="收货前" value="RCV"></el-option>
                  <el-option label="收货后上架前" value="PA"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="质检规则" prop="qcRule">
                <PublicQuery disabled title="质检规则" single :rowData.sync="businessData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsQcRule" :valueField.sync="formData.qcRule">
                </PublicQuery>
              </el-form-item>
              <el-form-item label="质检项" prop="itemGroupCode">
                <PublicQuery disabled title="质检项" single :rowData.sync="businessData" baseUrl="/inb_web/inbweb" cfgKey="inbWmsQcItem" :valueField.sync="formData.itemGroupCode">
                </PublicQuery>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>

      </el-form>

      <div class="mrg-t">
        <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>
var checkNumber = (rule, value, callback) => {
  const reg = /^(([1-9][0-9]*)|(([0]\.\d{1,9}|[1-9][0-9]*\.\d{1,9})))$/
  if (value === '') {
    callback(new Error('必填,不能为空！'))
  } else if (!reg.test(value)) {
    callback(new Error('输入正整数或小数'))
  } else {
    callback()
  }
}

export default {

  data () {
    return {
      activeNames: ['1', '2'],
      formData: {
        qtyAsnUom: '',
        qtyAsnEa: '',
        asnWeight: ''
      },
      lotAttrsParams: {},
      businessData: {},
      skuData: {},
      paruleData: {}, // 上架规则
      plantolocData: {}, // 计划收货库位
      parentData: {}, // 父件编码
      date: '',
      rules: {
        skuCode: [
          { required: true, message: '商品编码必填', trigger: 'change' }
        ],
        uomDesc: [
          { required: true, message: '包装单位必填', trigger: 'change' }
        ],
        asnWeight: [
          { required: true, validator: checkNumber, trigger: 'change' }
        ],
        qtyAsnUom: [
          { required: true, validator: checkNumber, trigger: 'change' }
        ],
        reserveCode: [
          { required: true, message: '上架库位指定规则必填', trigger: 'change' }
        ],

      }
    }
  },
  props: {
    goodsFormVisible: Boolean,
    code: String,
    currentRow: {
      type: Object,
      default: () => ({})
    },
    rowIndex: '',
    editBool: Boolean,
  },
  methods: {
    close () {
      this.$emit('close')
    },

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

    // 确认并添加
    handleConfirmAdd () {
      let data = Object.assign({ isChecked: 'false' }, this.formData)
      if (this.editBool) {
        this.$emit('editOK', data, this.rowIndex)
        this.$refs.goodsForm.resetFields()
      } else {
        this.$refs.goodsForm.validate((valid) => {
          if (valid) {
            this.$emit('handleConfirmAdd', data)
            this.$refs.goodsForm.resetFields()
          }
        })
      }
    },

    // 预收数变化
    uomChange () {
      this.formData.qtyAsnEa = this.formData.qtyAsnUom
    },

    // 预收重量变化
    weightChange (val) {
      // console.log(val)
      if (!this.formData.skuWeight || !this.formData.asnWeight) {

      } else {
        let newVal = (val / this.formData.skuWeight).toFixed(6)
        this.$set(this.formData, 'qtyAsnEa', newVal)
        this.$set(this.formData, 'qtyAsnUom', newVal)
      }
    },

    // 选商品前校验
    beforeSelectSku () {
      return {
        queryParams: {
          ownerCodeParam: this.code
        }
      }
    },
  },

  watch: {
    skuData: {
      handler (item) {
        this.formData = { ...this.formData, ...item }
        this.formData.uom = item.rcvUom
        this.formData.uomDesc = item.rcvUomDesc
        this.formData.skuWeight = item.grossWeight
        this.lotAttrsParams = {
          skuCode: item.skuCode,
          ownerCode: item.ownerCode
        }
      },
      deep: true
    },
    currentRow: {
      handler (item) {
        this.formData = { ...item }
        this.lotAttrsParams = {
          ownerCode: item.ownerCode,
          skuCode: item.skuCode,
        }
      },
      deep: true
    },
    'formData.qtyAsnUom': {
      handler (val) {
        console.log(val)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
  .mrg-t{
    margin-top: 20px
  }
</style>
