<template>
<div class="creator">
  <div class="creator__body">
    <el-form
      class="creator__info"
      inline
      label-position="top"
      :model="detailData"
      ref="form"
      :rules="rules"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <div>
            <template v-for="item in inputs">
              <el-form-item :key="item.prop" :label="item.label">
                <el-input v-model="detailData[item.prop]" disabled></el-input>
              </el-form-item>
            </template>
            <el-form-item label="冻结是否可移动">
              <el-checkbox v-model="detailData.isAllowMv" true-label="Y" false-label="N" disabled></el-checkbox>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="源库位">
              <el-input v-model="detailData.fmLoc" disabled></el-input>
            </el-form-item>
            <el-form-item label="源跟踪号">
              <el-input v-model="detailData.fmTraceId" disabled></el-input>
            </el-form-item>
            <el-form-item label="移动数" prop="toQtyUom">
              <el-input v-model="detailData.toQtyUom" @input.native="e => toQtyUomChange()"></el-input>
            </el-form-item>
            <el-form-item label="移动数EA">
              <el-input v-model="detailData.toQty" disabled></el-input>
            </el-form-item>
            <el-form-item label="目标库位" prop="toLoc">
              <PublicQuery
                title="目标库位"
                single
                cfgKey="invWmsLoc"
                :baseUrl="baseUrl"
                :valueField.sync="detailData.toLoc"
              ></PublicQuery>
            </el-form-item>
            <el-form-item label="目标跟踪号" prop="toTraceId">
              <el-input v-model="detailData.toTraceId"></el-input>
            </el-form-item>
            <el-form-item label="包装单位" prop="toUomDesc">
              <PublicQuery
                title="包装单位"
                single
                cfgKey="invWmsUom"
                :baseUrl="baseUrl"
                :valueField.sync="detailData.toUomDesc"
                :textField.sync="detailData.toUomDesc"
                :before="toUomDescBefore"
              ></PublicQuery>
            </el-form-item>
            <el-form-item label="移动重量" prop="mvWeight">
              <el-input v-model="detailData.mvWeight"></el-input>
            </el-form-item>
          </div>
        </el-collapse-item>

        <el-collapse-item title="批次属性" name="2">
          <LotAttrs
            disabled
            :formData="detailData"
            :queryParams="lotAttrsParams"
          ></LotAttrs>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
  <div class="creator__foot">
    <el-button v-auth="50300040105" type="primary" @click="confirm">执行移动</el-button>
  </div>
</div>
</template>

<script>
import routerMixins from '../../routerMixins'

export default {
  mixins: [ routerMixins ],
  created () {
    this.detailData = this.$route.params.detailData || {}
    this.lotAttrsParams = {
      ownerCode: this.detailData.ownerCode,
      skuCode: this.detailData.skuCode,
      lotNum: this.detailData.lotNum
    }
  },
  mounted () {
  },

  data () {
    return {
      lotAttrsParams: {}, // 批次属性查询对象
      detailData: {}, // 表单对象
      activeNames: ['1', '2', '3', '4'],
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      inputs: [
        { label: '货主', prop: 'ownerCode' },
        { label: '商品编码', prop: 'skuCode' },
        { label: '商品名称', prop: 'skuName' },
        { label: '批次号', prop: 'lotNum' },
        { label: '包装规格', prop: 'packCode' },
        { label: '包装单位', prop: 'toUomDesc' },
        { label: '库存数', prop: 'fmQty' },
        { label: '库存可用数', prop: 'availablenum' },
        { label: '冻结数', prop: 'qtyHold' },
        { label: '分配数', prop: 'qtyAlloc' },
        { label: '拣货数', prop: 'qtyPk' },
        { label: '上架待出数', prop: 'qtyPaOut' },
        { label: '补货待出数', prop: 'qtyRpOut' },
        { label: '库存重量(吨)', prop: 'weight' },
      ],
      lotConfigs: [], // 批次属性列表, 通过sku查询
      // 表单验证
      rules: {
        // formData写在 computed 就不能识别校验, 导致校验始终不通过
        toQtyUom: [{ required: true, message: '必填', trigger: 'change' }],
        toLoc: [{ required: true, message: '必选', trigger: 'change' }],
        toTraceId: [{ required: true, message: '必填', trigger: 'change' }],
        toUomDesc: [{ required: true, message: '必选', trigger: 'change' }],
        mvWeight: [{ required: true, message: '必填', trigger: 'change' }],
      },
    }
  },
  methods: {
    // 保存按钮
    confirm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.$API.inventory.movement.executeMove
          const param = { wmMvQueryEntityBean: JSON.stringify(this.detailData) }
          this.$https.post(url, param)
            .then(data => {
              this.needRefresh = true
              this.$router.back()
            })
        }
      })
    },
    // 移动数变化
    toQtyUomChange () {
      this.detailData.toQty = (+this.detailData.toQtyUom).toFixed(2)
    },
    // 选择包装单位前传参
    toUomDescBefore () {
      return {
        queryParams: {
          packCode: this.detailData.packCode,
        }
      }
    },
    // 获取批次属性
    getLotConfig (skuObj) {
      const url = this.$API.getLotConfig
      this.$https.post(url, skuObj)
        .then(data => {
          // 过滤并做相关处理
          this.lotConfigs = data.filter(item => {
            item.lotAtt = this.camelCase(item.lotAtt) // 设置att字段格式
            if (item.fieldType === 'ComboBox') {
              this.setSelectOptions(item) // 获取下拉选项
            }
            return item.fieldType
          })
        })
    },
    // 获取并设置下拉选项
    setSelectOptions (obj) {
      const url = `${this.$API.getCodeMaster}?cfgKey=${obj.key}`
      this.$https.get(url)
        .then(data => {
          this.$set(obj, 'options', data || []) // 可能存在空值的情况
        })
    },
    // 转驼峰
    camelCase (string) {
      return string.toLowerCase().replace(/_([a-z])/g, (all, letter) => {
        return letter.toUpperCase()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-collapse-item {
  margin-bottom: 20px;
}
.creator {
  overflow-y: auto;
  height: 100%;
  &__info {
    margin-bottom: 20px;
  }
}
.creator__body {
  height: calc(100% - 50px); // 减去 bottom 的高度
  border-bottom: 1px solid #ddd;
  overflow-x: hidden;
}
.creator__foot {
  position: fixed;
  bottom: 20px;
}
.operation-info {
  text-align: center;
}
</style>
