<template>
<div class="creator">
  <div class="creator__body">
    <el-form
      class="creator__info"
      inline
      label-position="top"
      :model="detailData"
      ref="form"
      :rules="rules"
      :disabled="mode === 'detail'"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <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-select v-model="detailData.status" disabled>
              <template v-for="item in $keys.inventory.mvTask.status">
                <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="移动信息" name="2">
          <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.fmId" disabled></el-input>
          </el-form-item>
          <el-form-item label="计划目标库位">
            <el-input v-model="detailData.planToLoc" disabled></el-input>
          </el-form-item>
          <el-form-item label="计划目标跟踪号">
            <el-input v-model="detailData.planToId" disabled></el-input>
          </el-form-item>
          <el-form-item label="移动数" prop="toQtyMvUom">
            <el-input v-model="detailData.toQtyMvUom" @input.native="e => toQtyUomChange()"></el-input>
          </el-form-item>
          <el-form-item label="包装单位" prop="uom">
            <PublicQuery
              title="包装单位"
              single
              cfgKey="invWmsUom"
              :baseUrl="baseUrl"
              :valueField.sync="detailData.uom"
              :textField.sync="detailData.uomDesc"
              :before="toUomDescBefore"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="移动数EA">
            <el-input v-model="detailData.toQtyMvEa" disabled></el-input>
          </el-form-item>
          <el-form-item label="移动重量" prop="toMvWeight">
            <el-input v-model="detailData.toMvWeight"></el-input>
          </el-form-item>
          <el-form-item label="目标库位" prop="toLoc">
            <PublicQuery
              title="目标库位"
              single
              cfgKey="invWmsLoc"
              :baseUrl="baseUrl"
              :valueField.sync="detailData.toLoc"
              :textField.sync="detailData.toLoc"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="目标跟踪号" prop="toId">
            <el-input v-model="detailData.toId"></el-input>
          </el-form-item>
          <el-form-item label="移动操作人" prop="mvOp">
            <PublicQuery
              title="移动操作人"
              single
              cfgKey="invWmsOperator"
              :baseUrl="baseUrl"
              :valueField.sync="detailData.mvOp"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="移动时间">
            <el-date-picker
              type="datetime"
              v-model="detailData.mvTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="批次属性" name="3">
          <LotAttrs
            disabled
            :formData="detailData"
            :queryParams="lotAttrsParams"
          ></LotAttrs>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
  <div class="creator__foot" v-if="mode !== 'detail'">
    <el-button v-if="detailData.status === '00'" v-auth="50300060109" type="primary" @click="confirm">执行移动</el-button>
    <el-button v-else v-auth="50300060110" type="primary" @click="cancel">取消移动</el-button>
  </div>
</div>
</template>

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

export default {
  mixins: [ routerMixins ],
  created () {
    this.detailData = this.$route.params.detailData || {}
    this.mode = this.$route.params.mode || 'detail'
    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: '任务ID', prop: 'mvId' },
        { label: '行号', prop: 'lineNo' },
        { label: '移动单号', prop: 'mvNo' },
        { label: '原任务行号', prop: 'oldLineNo' },
        { label: '货主', prop: 'ebcuNameCn' },
        { label: '商品编码', prop: 'skuCode' },
        { label: '商品名称', prop: 'skuName' },
        { label: '移动单行号', prop: 'mvLineNo' },
        { label: '包装规格', prop: 'packDesc' },
        { label: '批次号', prop: 'lotNum' },
      ],
      lotConfigs: [], // 批次属性列表, 通过sku查询
      // 表单验证
      rules: {
        toQtyMvUom: [{ required: true, message: '必填', trigger: 'change' }],
        uomDesc: [{ required: true, message: '必选', trigger: 'change' }],
        toMvWeight: [{ required: true, message: '必填', trigger: 'change' }],
        toLoc: [{ required: true, message: '必选', trigger: 'change' }],
      },
    }
  },
  methods: {
    // 执行移动按钮
    confirm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const url = this.$API.inventory.mvTask.invTaskMovement
          const param = { wmTaskMvEntityQueryItemBean: JSON.stringify([this.detailData]) }
          this.$https.post(url, param)
            .then(data => {
              this.needRefresh = true
              this.$router.back()
            })
        }
      })
    },
    // 移动数变化
    toQtyUomChange () {
      this.detailData.toQtyMvEa = (+this.detailData.toQtyMvUom).toFixed(2)
    },
    // 选择包装单位前传参
    toUomDescBefore () {
      return {
        queryParams: {
          packCode: this.detailData.packCode,
        }
      }
    }
  },
}
</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>
