<template>
<el-dialog
  class="creator"
  title="移动任务"
  width="70%"
  :visible="showEdit"
  @close="close"
>
  <div class="creator__info creator__info--senior">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <template v-for="item in baseInfos">
          <div class="detail-item" :key="item.prop">
            <span class="detail-item__label">{{item.label}} :&nbsp;&nbsp;</span>
            <span class="detail-item__value">{{item.key ? $utils.keyMatcher(formData[item.prop], $keys.inventory.count[item.key]).name : formData[item.prop]}}</span>
          </div>
        </template>
      </el-collapse-item>
      <el-collapse-item title="移动信息" name="2">
        <template v-for="item in mvInfos">
          <div class="detail-item" :key="item.prop">
            <span class="detail-item__label">{{item.label}} :&nbsp;&nbsp;</span>
            <span class="detail-item__value">{{item.key ? $utils.keyMatcher(formData[item.prop], $keys.inventory.count[item.key]).name : formData[item.prop]}}</span>
          </div>
        </template>
        <el-form
          inline
          label-position="top"
          :model="formData"
          ref="form"
          :rules="rules"
          :disabled="formData.status === '99'"
        >
          <el-form-item label="移动数" prop="toQtyMvUom">
            <el-input v-model="formData.toQtyMvUom" @input.native="toQtyMvUomChange"></el-input>
          </el-form-item>
          <el-form-item label="包装单位" prop="uomDesc">
            <PublicQuery
              single
              title="包装单位"
              cfgKey="invWmsUom"
              :baseUrl="baseUrl"
              :valueField.sync="formData.uom"
              :textField.sync="formData.uomDesc"
              :before="uomDescBefore"
            ></PublicQuery>
          </el-form-item>
          <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="toId">
            <el-input v-model="formData.toId"></el-input>
          </el-form-item>
          <el-form-item label="移动操作人" prop="mvOp">
            <PublicQuery
              single
              title="移动操作人"
              cfgKey="invWmsOperator"
              :baseUrl="baseUrl"
              :valueField.sync="formData.mvOp"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="移动时间" prop="mvTime">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="formData.mvTime"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
  <div slot="footer" v-if="showOperateBtn">
    <el-button v-if="formData.status === '00'" v-auth="50300050308" type="primary" @click="execute">执行移动</el-button>
    <el-button v-if="formData.status === '99'" v-auth="50300050309" type="primary" @click="cancelMove">取消移动</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
  props: ['showEdit', 'detailData', 'showOperateBtn'],
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { ...val }
      }
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      // 输入框
      baseInfos: [
        { label: '任务ID', prop: 'mvId' },
        { label: '行号', prop: 'lineNo' },
        { label: '货主', prop: 'ebcuNameCn' },
        { label: '商品编码', prop: 'skuCode' },
        { label: '商品名称', prop: 'skuName' },
        { label: '包装规格', prop: 'packDesc' },
        { label: '批次号', prop: 'lotNum' },
      ],
      // 移动信息
      mvInfos: [
        { label: '源库位', prop: 'fmLoc' },
        { label: '源跟踪号', prop: 'fmId' },
        { label: '计划目标库位', prop: 'planToLoc' },
        { label: '计划目标跟踪号', prop: 'planToId' },
        { label: '移动重量', prop: 'toMvWeight' },
        { label: '移动数EA', prop: 'toQtyMvEa' },
      ],
      activeNames: ['1', '2', '3'],
      formData: {}, // 提交对象
      rules: {
        toQtyMvUom: [{ required: true, message: '必填', trigger: 'change' }],
        uomDesc: [{ required: true, message: '必填', trigger: 'change' }],
        toLoc: [{ required: true, message: '必填', trigger: 'change' }],
      }, // 校验规则
      baseUrl: '/inv_web/invweb', // 弹框基础url
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('close')
    },
    // 唤醒包装弹窗前
    uomDescBefore () {
      return {
        queryParams: {
          packCode: this.formData.packCode
        }
      }
    },
    // 移动数变化
    toQtyMvUomChange () {
      this.formData.toQtyMvEa = this.formData.toQtyMvUom
    },
    // 执行移动
    execute () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const url = this.$API.inventory.mvOrder.performMoveForModal
          const param = {
            mvTaskEntity: JSON.stringify(this.formData)
          }
          this.$https.post(url, param)
            .then(() => {
              this.close()
              this.$emit('createDone')
            })
        }
      })
    },
    // 取消移动
    cancelMove () {
      const url = this.$API.inventory.mvOrder.bacthCancelPerformByTask
      const param = {
        mvIdAndlineNos: `('${this.formData.mvId}','${this.formData.lineNo}')`
      }
      this.$https.post(url, param)
        .then(data => {
          if (data === '') {
            this.$message.error('获取失败')
          } else {
            this.close()
            this.$emit('createDone')
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .detail-item {
    display: inline-table;
    width: 25%;
    font-size: 14px;
    padding: 7px;
  }
</style>
