<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" :disabled="!showBool">
        <div>
          <el-form-item label="商品编码" prop="skuCode">
            <PublicQuery title="商品编码" single :rowData.sync="skuData" baseUrl="/oub_web/oubweb" cfgKey="oubWmsSkuCode" :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="qtySoUom">
            <el-input v-model="formData.qtySoUom" @input="uomChange"></el-input>
          </el-form-item>
          <el-form-item label="订货数EA" prop="qtySoEa">
            <el-input v-model="formData.qtySoEa" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="skuWeight">
            <el-input v-model="formData.skuWeight" disabled></el-input>
          </el-form-item>
          <el-form-item label="订货重量" prop="soWeight">
            <el-input v-model="formData.soWeight" @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="traceId">
            <el-input v-model="formData.traceId"></el-input>
          </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="packDesc">
            <PublicQuery disabled title="包装规格" single baseUrl="/oub_web/oubweb" 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="uomData" baseUrl="/oub_web/oubweb" cfgKey="oubWmsUom" :valueField.sync="formData.uom" :textField.sync="formData.uomDesc">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="分配规则" prop="allocRule">
            <PublicQuery title="分配规则" single :rowData.sync="allocRuleData" baseUrl="/oub_web/oubweb" cfgKey="oubWmsAllocRule" :valueField.sync="formData.allocRule" :textField.sync="formData.allocRule">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="库存周转规则" prop="rotationRule">
            <PublicQuery title="库存周转规则" single :rowData.sync="rotationRuleData" baseUrl="/oub_web/oubweb" cfgKey="oubWmsRotationRule" :valueField.sync="formData.rotationRule" :textField.sync="formData.rotationRule">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="预配规则" prop="preallocRule">
            <PublicQuery title="预配规则" single :rowData.sync="preallocRuleData" baseUrl="/oub_web/oubweb" cfgKey="oubWmsPreallocRule" :valueField.sync="formData.preallocRule" :textField.sync="formData.preallocRule">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="区域" prop="areaCode">
            <PublicQuery title="区域" single baseUrl="/oub_web/oubweb" cfgKey="oubWmsArea" :valueField.sync="formData.areaCode" :textField.sync="formData.areaName">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="拣货区" prop="zoneName">
            <PublicQuery title="拣货区" single baseUrl="/oub_web/oubweb" cfgKey="oubWmsZone" :valueField.sync="formData.zoneCode" :textField.sync="formData.zoneName">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="拣货位" prop="locCode">
            <PublicQuery title="拣货位" single baseUrl="/oub_web/oubweb" cfgKey="oubWmsLoc" :valueField.sync="formData.locCode">
            </PublicQuery>
          </el-form-item>
          <el-form-item label="父件编码" prop="parentSkuCode">
            <PublicQuery title="父件编码" single :rowData.sync="parentData" baseUrl="/oub_web/oubweb" cfgKey="oubWmsBomSkuCode" :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>
              <div v-if="!showBool">
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">生产日期：{{formData.lotAtt01}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">失效日期：{{formData.lotAtt02}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">入库日期：{{formData.lotAtt03}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">品质：{{$utils.keyMatcher(formData.lotAtt04, $keys.common.lotAtt04).name}}</div></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content bg-purple">品牌：{{formData.lotAtt05}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">等级：{{formData.lotAtt06}}</div></el-col>
                  <el-col :span="6"><div class="grid-content bg-purple">榨季：{{formData.lotAtt07}}</div></el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form>
      <div class="more-query-btn" v-if="showBool">
        <el-button v-auth="50200020310" type="primary" @click="handleConfirm">确认</el-button>
        <el-button v-auth="50200020206" type="primary" @click="handleConfirmAdd">确认并添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import keys from '@/config/keys'
export default {
  data () {
    return {
      activeNames: ['1'],
      formData: {},
      lotAttrsParams: {},
      skuData: {}, // 商品编码
      uomData: {}, // 包装单位
      allocRuleData: {}, // 分配规则
      rotationRuleData: {}, // 库存周转
      preallocRuleData: {}, // 预配规则
      parentData: {}, // 父件编码
      date: '',
      rules: {
        skuCode: [
          { required: true, message: '商品编码必填', trigger: 'change' }
        ],
        uomDesc: [
          { required: true, message: '包装单位必填', trigger: 'change' }
        ],
        qtySoUom: [
          { required: true, message: '订货数必填', trigger: 'change' }
        ],
        soWeight: [
          { required: true, message: '订货重量必填', trigger: 'change' }
        ],
        allocRule: [
          { required: true, message: '分配规则必填', trigger: 'change' }
        ],
        rotationRule: [
          { required: true, message: '库存周转必填', trigger: 'change' }
        ],

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

    // 确认
    handleConfirm () {
      let data = Object.assign({ isChecked: 'false' }, this.formData)
      if (this.editBool) {
        console.log(this.rowIndex)
        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 () {
      if (this.formData.qtySoUom !== '') {
        this.formData.qtySoEa = this.formData.qtySoUom
      }
    },

    // 预收重量变化
    weightChange () {
      if (!this.formData.skuWeight || !this.formData.soWeight) {

      } else {
        let newVal = (parseFloat(this.formData.soWeight) / parseFloat(this.formData.skuWeight)).toFixed(6)
        this.formData.qtySoEa = newVal
        this.formData.qtySoUom = newVal
      }
    },

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

  watch: {
    skuData: {
      handler (item) {
        this.formData = { ...this.formData, ...item }
        this.formData.allocRuleName = item.allocRule // 分配规则
        this.formData.rotationRuleName = item.rotationRule // 库存周转规则
        this.formData.preallocRuleName = item.preallocRuleName // 预配规则
        this.formData.uomDesc = item.uomDesc // 件 rcvUomDesc
        this.formData.uom = item.printUom // EA rcvUom
        this.formData.zoneCode = item.paZone // 拣货区
        this.formData.skuWeight = item.grossWeight // 0.05
        this.lotAttrsParams = {
          skuCode: item.skuCode,
          ownerCode: item.ownerCode
        }
      },
      deep: true
    },
    // 包装单位
    uomData: {
      handler (item) {
        this.formData.uomDesc = item.uomDesc
        this.formData.uom = item.cdprUnitLevel
      }
    },
    // 分配规则
    allocRuleData: {
      handler (item) {
        this.formData.allocRuleCode = item.ruleCode
        this.formData.allocRuleName = item.ruleName
      }
    },
    // 库存
    rotationRuleData: {
      handler (item) {
        this.formData.rotationRuleName = item.ruleName
        this.formData.rotationRule = item.ruleName
      }
    },
    // 预配
    preallocRuleData: {
      handler (item) {
        this.formData.preallocRuleName = item.ruleName
        this.formData.preallocRule = item.ruleCode
      }
    },
    parentData: {
      handler (item) {
        console.log(item)
      }
    },
    currentRow: {
      handler (item) {
        this.formData = { ...item }
      },
      deep: true
    }
  }
}
</script>
