<template>
<el-dialog
  class="creator"
  title="移动明细"
  width="70%"
  :visible="showCreator"
  @close="close"
>
  <div class="creator__body">
    <el-form
      inline
      ref="form"
      label-position="top"
      :model="formData"
      :rules="rules"
      :disabled="mode === 'detail'"
    >
      <div class="creator__info creator__info--base">
        <!--共用查询框-->
        <el-form-item label="商品编码" prop="skuCode">
          <PublicQuery
            single
            title="商品批次库存"
            :baseUrl="baseUrl"
            cfgKey="invWmsInvLotLoc"
            :valueField.sync="formData.skuCode"
            :textField.sync="formData.skuCode"
            :rowData.sync="skuRowData"
            :before="skuBefore"
          ></PublicQuery>
        </el-form-item>

        <!--输入框-->
        <template v-for="item in inputs">
          <el-form-item
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
          >
            <el-input
              v-model="formData[item.prop]"
              disabled
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item label="冻结可移动" prop="isHoldMove">
          <el-checkbox disabled></el-checkbox>
        </el-form-item>
      </div>
      <!--第二块表单-->
      <div class="creator__info creator__info--senior">
        <template v-for="item in seniorInputs">
          <el-form-item
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
          >
            <el-input
              v-model="formData[item.prop]"
              :disabled="item.disabled"
              @input.native="val => { item.onInput && item.onInput() }"
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item label="目标库位" prop="toLoc">
          <PublicQuery
            single
            title="目标库位"
            cfgKey="invWmsLoc"
            :baseUrl="baseUrl"
            :valueField.sync="formData.toLoc"
            :textField.sync="formData.toLoc"
          ></PublicQuery>
        </el-form-item>
        <el-form-item label="包装单位" prop="uom">
          <PublicQuery
            single
            title="包装单位"
            cfgKey="invWmsUom"
            :baseUrl="baseUrl"
            :valueField.sync="formData.uom"
            :textField.sync="formData.uomDesc"
            :before="cdprBefore"
          ></PublicQuery>
        </el-form-item>
      </div>
      <!--第三块表单-->
      <div class="creator__info creator__info--senior" v-if="formData.skuCode">
        <LotAttrs
          disabled
          :formData="formData"
          :queryParams="lotAttrsParams"
        ></LotAttrs>
      </div>
    </el-form>
  </div>
  <div class="creator__foot" v-if="mode === 'create' || (mode === 'edit' && detailData.status === '00')">
    <el-button v-auth="50300050204" type="primary" @click="save">保存</el-button>
    <el-button v-auth="50300050205" type="primary" @click="saveAndCreate">保存并新增</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
  props: ['showCreator', 'ownerCode', 'mvNo', 'mode', 'detailData'],
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = {
          ownerCode: this.ownerCode,
          mvNo: this.mvNo,
          isHoldMove: '0',
          ...val }
        this.lotAttrsParams = {
          skuCode: val.skuCode,
          ownerCode: val.ownerCode,
        }
      }
    },
    // 监听商品选择器对象变化
    skuRowData (val) {
      // 批次属性查询
      this.lotAttrsParams = {
        skuCode: val.skuCode,
        ownerCode: val.ownerCode,
      }
      // 基础信息
      this.formData.skuName = val.skuName // 商品名
      this.formData.packCode = val.packCode // 包装规格
      // this.formData.packDesc = val.packDesc
      this.formData.qty = val.qty // 库存数
      this.formData.qtyAvailable = val.qtyAvailable // 库存可用数
      this.formData.qtyHold = val.qtyHold // 冻结数
      this.formData.mvWeight = val.weight // 库存重量
      this.formData.lotNum = val.lotNum // 批次号
      // 进阶信息
      this.formData.fmLoc = val.locCode // 源库位
      this.formData.fmId = val.traceId // 源跟踪号
      this.formData.qtyPlanMvUom = val.qtyAvailable // 计划移动数
      this.formData.qtyPlanMvEa = val.qtyAvailable.toFixed(2) // 计划移动数EA
      this.formData.uomDesc = val.cdprDesc // 包装单位 文字
      this.formData.uom = val.printUom // 包装单位 逻辑值
      // 批次信息
      this.formData.lotAtt01 = val.lotAtt01
      this.formData.lotAtt02 = val.lotAtt02
      this.formData.lotAtt03 = val.lotAtt03
      this.formData.lotAtt04 = val.lotAtt04
      this.formData.lotAtt05 = val.lotAtt05
      this.formData.lotAtt06 = val.lotAtt06
      this.formData.lotAtt07 = val.lotAtt07
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      // 时间框
      datePickers: [
        { label: '生产日期', prop: 'lotAtt01' },
        { label: '失效日期', prop: 'lotAtt02' },
        { label: '入库日期', prop: 'lotAtt03' },
      ],
      // 基础数据输入框
      inputs: [
        { label: '商品名称', prop: 'skuName' },
        { label: '货主', prop: 'ownerCode' },
        { label: '包装规格', prop: 'packCode' },
        { label: '库存数', prop: 'qty' },
        { label: '库存可用数', prop: 'qtyAvailable' },
        { label: '冻结数', prop: 'qtyHold' },
        { label: '库存重量', prop: 'mvWeight' },
        { label: '批次号', prop: 'lotNum' },
      ],
      seniorInputs: [
        { label: '原库位', prop: 'fmLoc', disabled: true },
        { label: '源跟踪号', prop: 'fmId', disabled: true },
        { label: '已移动数', prop: 'qtyMvUom', disabled: true },
        { label: '已移动数EA', prop: 'qtyMvEa', disabled: true },
        { label: '目标跟踪号', prop: 'toId' },
        { label: '已移动重量', prop: 'alreadyMvWeight', disabled: true },
        { label: '计划移动数', prop: 'qtyPlanMvUom', onInput: this.qtyPlanMvUomChange },
        { label: '计划移动数EA', prop: 'qtyPlanMvEa', disabled: true },
        { label: '计划移动重量', prop: 'planMvWeight' },
      ],
      lotAttrsParams: {}, // 批次属性查询
      // 表单对象
      formData: {},
      skuRowData: {}, // 商品选择数据
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      // 表单验证
      rules: {
        // formData写在 computed 就不能识别校验, 导致校验始终不通过
        skuCode: [{ required: true, message: '必填', trigger: 'change' }],
        toLoc: [{ required: true, message: '必填', trigger: 'change' }],
        uom: [{ required: true, message: '必填', trigger: 'change' }],
        qtyPlanMvUom: [
          { required: true, message: '必填', trigger: 'change' },
          { validator: this.validateZero, trigger: 'change' }
        ],
        planMvWeight: [
          { required: true, message: '必填', trigger: 'change' },
          { validator: this.validateZero, trigger: 'change' }
        ]
      },
      showDetailList: false, // 显示明细
    }
  },
  methods: {
    // 重置, 若只使用form的resetField, 当表单为prop传过来详情时会重置为详情数据而不是置空
    reset () {
      this.$refs.form.resetFields() // 单纯是为了清空校验
      this.formData = {
        ownerCode: this.ownerCode,
        mvNo: this.mvNo,
        isSerial: 'N',
      }
    },
    // 保存
    save () {
      this.saveAndCreate('needClose')
    },
    // 关闭
    close () {
      this.reset()
      this.$emit('close')
    },
    // 保存并新增
    saveAndCreate (needClose) {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.$API.inventory.mvOrder.saveMvDetailEntity
          const param = { saveMvDetailEntity: JSON.stringify(this.formData) }
          this.$https.post(url, param)
            .then(data => {
              // this.$message.success('操作成功')
              this.$emit('createDone') // 通知父组件新增完毕, 刷新列表
              needClose === 'needClose' && this.close() // 保存按钮需要关闭弹窗
            })
        }
      })
    },
    // 计划移动数关联操作
    qtyPlanMvUomChange () {
      const value = +this.formData.qtyPlanMvUom
      if (value > (this.formData.qty || 0)) {
        this.$message.error('计划移动数不能大于库存数')
        this.$set(this.formData, 'qtyPlanMvUom', '0')
      }
      this.formData.qtyPlanMvEa = (+this.formData.qtyPlanMvUom).toFixed(2)
    },
    // 校验移动数
    validateZero (rule, value, callback) {
      if (+value === 0) {
        callback(new Error('值不能为0'))
      } else {
        callback()
      }
    },
    /**
     * 调用共用查询框前操作
     * */
    // 商品
    skuBefore () {
      return {
        queryParams: {
          ownerCodeParam: this.ownerCode
        }
      }
    },
    // 包装单位
    cdprBefore () {
      return {
        queryParams: {
          packCode: this.formData.packCode,
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .creator__foot {
    margin-top: 20px;
  }
</style>
