<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">
          <!--共用查询框-->
          <template v-for="item in publicQueries">
            <el-form-item
              :key="item.valueField"
              :label="item.label"
              :prop="item.valueField"
            >
              <PublicQuery
                single
                :disabled="item.disabled"
                :title="item.label"
                :baseUrl="baseUrl"
                :cfgKey="item.cfgKey"
                :valueField.sync="formData[item.valueField]"
                :textField.sync="item.textField === undefined ? false : formData[item.textField]"
                :before="item.before && item.before"
                @change="skuObj => {item.onChange && item.onChange(skuObj)}"
              ></PublicQuery>
            </el-form-item>
          </template>

          <!--输入框-->
          <template v-for="item in inputs">
            <el-form-item
              v-if="item.showType.includes(mainFormData.businessType)"
              :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="toTime">-->
            <!--<el-date-picker-->
              <!--type="datetime"-->
              <!--v-model="formData.toTime"-->
              <!--value-format="yyyy-MM-dd HH:mm:00"-->
              <!--format="yyyy-MM-dd HH:mm"-->
            <!--&gt;</el-date-picker>-->
          <!--</el-form-item>-->
        </div>
      </el-form>
    </div>
    <div class="creator__foot" v-if="mode !== 'detail'">
      <el-button v-auth="50300030206" type="primary" @click="save">保存</el-button>
      <el-button v-auth="50300030207" type="primary" @click="saveAndCreate">保存并新增</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['showCreator', 'mode', 'detailData', 'selectedIndex', 'mainFormData', 'selectedType'],
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = {
          ...val
        }
      }
    },
  },
  computed: {
    computedIndex () {
      return this.selectedIndex !== undefined ? this.selectedIndex : this.index
    },
    // 表单验证规则
    rules () {
      switch (this.mainFormData.businessType) {
        case '881002':
          // 翻包
          return this.baseRules
        case '881003-1':
          // 司磅
          return this.generateRules(['afterWeight'])
        case '881003-2':
          return this.generateRules(['checkNo'])
      }
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      // 共用查询框
      publicQueries: [
        { label: '商品', valueField: 'skuCode', textField: 'skuName', cfgKey: 'invWmsInvLotLoc', rowData: {}, before: this.skuBefore, onChange: this.skuChange },
        { label: '批次号', valueField: 'lotNum', cfgKey: 'invWmsLotNum', rowData: {}, disabled: true },
        { label: '包装规格', valueField: 'packCode', cfgKey: 'invWmsPackage', rowData: {}, disabled: true },
        { label: '包装单位', valueField: 'uom', cfgKey: 'invWmsUom', rowData: {}, disabled: true },
        { label: '源库位', valueField: 'fmLoc', cfgKey: 'invWmsLoc', rowData: {}, disabled: true },
        { label: '目标库位', valueField: 'toLoc', cfgKey: 'invWmsLoc', rowData: {} },
      ],
      // 输入框
      inputs: [
        { label: '数量', prop: 'qty', disabled: true, showType: ['881003-1'] },
        // { label: '操作后数量', prop: 'afterQty', showType: ['881003-1'] },
        { label: '源重量', prop: 'weight', disabled: true, showType: ['881003-1'] },
        { label: '操作后重量', prop: 'afterWeight', showType: ['881003-1'] },
        { label: '商检号', prop: 'checkNo', showType: ['881003-2'] },
      ],
      // 表单对象
      formData: {},
      activeNames: ['1'],
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      // 表单验证
      baseRules: {
        // formData写在 computed 就不能识别校验, 导致校验始终不通过
        skuCode: [{ required: true, message: '必填', trigger: 'change' }],
        toLoc: [{ required: true, message: '必填', trigger: 'change' }],
      },
      showAdDetailList: false, // 显示调整明细
      trigger: false, // 触发隐藏弹窗的时机
      wholeSkuObj: {}, // 库存获取商品对象
      index: undefined, // 选中的行index
    }
  },
  methods: {
    // 生成校验规则
    generateRules (fields) {
      const obj = { ...this.baseRules }
      for (const field of fields) {
        obj[field] = [{ required: true, message: '必填', trigger: 'change' }]
      }
      return obj
    },
    // 重置, 若只使用form的resetField, 当表单为prop传过来详情时会重置为详情数据而不是置空
    reset () {
      this.$refs.form.resetFields() // 单纯是为了清空校验
      this.formData = {
      }
    },
    // 保存
    save () {
      this.saveAndCreate('needClose')
    },
    // 关闭
    close () {
      this.$emit('close')
    },
    // 保存并新增
    saveAndCreate (needClose) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('createDone', { ...this.formData }, this.computedIndex)
          if (needClose === 'needClose') {
            this.close()
          } else {
            this.index = undefined // 防止继续新增改掉之前的数据
            this.reset()
          }
        }
      })
    },
    // 监听商品选择器对象变化
    skuChange (val) {
      this.formData.skuName = val.skuName // 商品名
      this.formData.lotNum = val.lotNum // 批次号
      this.formData.fmLoc = val.locCode // 源库位
      // 包装规格
      this.formData.packCode = val.packCode
      // this.formData.packDesc = val.packDesc
      // 包装单位
      // this.formData.cdprDesc = val.rcvUomDesc
      this.formData.uom = val.printUom
      this.formData.qty = val.qtyAvailable // 数量
      this.formData.afterQty = val.qtyAvailable // 操作后数量
      this.formData.weight = val.weight // 源重量
      this.formData.afterWeight = val.weight // 操作后重量
      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 // 批次属性
      this.formData.lotAtt08 = val.lotAtt08 // 批次属性
      this.formData.lotAtt09 = val.lotAtt09 // 批次属性
      this.formData.lotAtt10 = val.lotAtt10 // 批次属性
      this.formData.lotAtt11 = val.lotAtt11 // 批次属性
      this.formData.lotAtt12 = val.lotAtt12 // 批次属性
      this.formData.lotAtt13 = val.lotAtt13 // 批次属性
      this.formData.lotAtt14 = val.lotAtt14 // 批次属性
      this.formData.lotAtt15 = val.lotAtt15 // 批次属性
      this.formData.lotAtt16 = val.lotAtt16 // 批次属性
    },
    /**
     * 调用共用查询框前操作
     * */
    // 商品
    skuBefore () {
      return {
        queryParams: {
          ownerCodeParam: this.mainFormData.ownerCode,
          isInsideBusiness: true, // 查询库内业务商品的特殊字段
        },
        // 写死不可手动改的参数
        disabledQueryParams: { ...this.selectedType.info },
      }
    },
  },
}
</script>

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