<template>
<div class="creator">
  <div class="creator__body">
    <el-collapse v-model="activeNames">
      <el-form
        inline
        label-position="top"
        :model="formData"
        :rules="rules"
        :disabled="mode === 'detail'"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-collapse-item title="关键信息" name="1">
              <el-form-item label="转移单号" prop="tfNo">
                <el-input v-model="formData.tfNo" disabled></el-input>
              </el-form-item>
              <el-form-item label="货主" prop="fmOwner">
                <PublicQuery
                  title="货主"
                  single
                  cfgKey="invWmsCustomer"
                  :baseUrl="baseUrl"
                  :valueField.sync="formData.fmOwner"
                  :textField.sync="formData.ebcuNameCn"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status" disabled>
                  <template v-for="item in $keys.inventory.tfOrder.status">
                    <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item label="原因" prop="reasonCode">
                <el-select v-model="formData.reasonCode">
                  <template v-for="item in $keys.inventory.tfOrder.reasonCode">
                    <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item label="原因描述" prop="reason">
                <el-input v-model="formData.reason"></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-col>
          <el-col :span="12">
            <el-collapse-item title="基本信息" name="2">
              <el-form-item label="审核状态" prop="auditStatus">
                <el-select v-model="formData.auditStatus" disabled>
                  <template v-for="item in $keys.common.auditStatus">
                    <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item label="审核时间" prop="auditTime">
                <el-input v-model="formData.auditTime" disabled></el-input>
              </el-form-item>
              <el-form-item label="审核人" prop="auditOp">
                <el-input v-model="formData.auditOp" disabled></el-input>
              </el-form-item>
              <el-form-item label="审核意见" prop="auditComment">
                <el-input v-model="formData.auditComment"></el-input>
              </el-form-item>
              <el-form-item label="转移操作人" prop="tfOp">
                <el-input v-model="formData.tfOp" disabled></el-input>
              </el-form-item>
              <el-form-item label="转移时间" prop="tfTime">
                <el-input v-model="formData.tfTime" disabled></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-collapse-item title="转移源信息" name="3">
              <el-form-item label="商品" prop="fmSku">
                <PublicQuery
                  title="商品"
                  single
                  cfgKey="invWmsSku"
                  :baseUrl="baseUrl"
                  :disabled="(detailData.status !== '00') && mode !== 'create'"
                  :valueField.sync="formData.fmSku"
                  :textField.sync="formData.fmSkuName"
                  :before="beforeSelectSku"
                  @change="fmSkuChange"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="批次号" prop="fmLot">
                <el-input v-model="formData.fmLot"></el-input>
              </el-form-item>
              <el-form-item label="跟踪号" prop="fmId">
                <el-input v-model="formData.fmId"></el-input>
              </el-form-item>
              <!--共用查询框-->
              <template v-for="item in fmPublicQueries">
                <el-form-item
                  :key="item.valueField"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <!--如下textField写法可支持在textField为空时的传值, 子组件不会报错, 父组件也不会绑定同一个值 (formData.undefined)-->
                  <PublicQuery
                    :title="item.label"
                    :baseUrl="baseUrl"
                    :cfgKey="item.cfgKey"
                    :valueField.sync="formData[item.valueField]"
                    :textField.sync="item.textField === undefined ? false : formData[item.textField]"
                    :single="item.single"
                  ></PublicQuery>
                </el-form-item>
              </template>
            </el-collapse-item>
          </el-col>
          <el-col :span="12">
            <el-collapse-item title="转移目标信息" name="4">
              <el-form-item label="目标货主" prop="toOwner">
                <PublicQuery
                  title="目标货主"
                  single
                  cfgKey="invWmsCustomer"
                  :baseUrl="baseUrl"
                  :valueField.sync="formData.toOwner"
                  :textField.sync="formData.toOwnerName"
                ></PublicQuery>
              </el-form-item>
              <el-form-item label="目标商品" prop="toSku">
                <PublicQuery
                  title="目标商品"
                  single
                  cfgKey="invWmsSku"
                  :baseUrl="baseUrl"
                  :disabled="(detailData.status !== '00') && mode !== 'create'"
                  :valueField.sync="formData.toSku"
                  :textField.sync="formData.toSkuName"
                  :before="beforeSelectToSku"
                  @change="toSkuChange"
                ></PublicQuery>
              </el-form-item>
              <el-form-item prop="isToLotAttToNull">
                <el-checkbox v-model="formData.isToLotAttToNull" true-value="Y" false-value="N">目标批次属性是否被置空</el-checkbox>
              </el-form-item>
            </el-collapse-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-collapse-item title="源批次属性" name="5">
              <LotAttrs
                class="lot-attr"
                prefix="fm"
                :formData="formData"
                :queryParams="fmLotAttrsParams"
              ></LotAttrs>
            </el-collapse-item>
          </el-col>
          <el-col :span="12">
            <el-collapse-item title="目标批次属性" name="6">
              <LotAttrs
                class="lot-attr"
                prefix="to"
                :formData="formData"
                :queryParams="toLotAttrsParams"
              ></LotAttrs>
            </el-collapse-item>
          </el-col>
        </el-row>
      </el-form>

      <el-collapse-item title="转移任务列表" name="7">
        <template v-if="showTaskList">
          <TaskList
            :needRefresh="refreshChildren"
            :mode="mode"
            :formData="formData"
            @createTfDetail="createTfDetail"
            @operateDone="refreshForm"
          ></TaskList>
        </template>
      </el-collapse-item>
      <el-collapse-item title="操作信息" name="8" v-if="mode === 'detail'">
        <div class="operation-info">
          <el-col :span="6">创建人登录名: {{formData.createLoginName}} ({{formData.createUserNameCn}})</el-col>
          <el-col :span="6">创建时间: {{formData.createTime}}</el-col>
          <el-col :span="6">修改人登录名: {{formData.modifyLoginName}} ({{formData.modifyUserNameCn}})</el-col>
          <el-col :span="6">修改时间: {{formData.modifyTime}}</el-col>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>

  <div class="creator__foot">
    <template v-if="mode !== 'detail'">
      <el-button v-auth="50300010201" type="primary" @click="confirm">保存</el-button>
    </template>
    <template v-if="mode === 'detail'">
      <template v-if="formData.status === '00' && formData.auditStatus === '00'">
        <el-button v-auth="50300070311" type="primary" @click="e => operate(e, 'auditTf')">审核</el-button>
        <el-button v-auth="50300070317" type="primary" @click="e => operate(e, 'cancelTfH')">取消订单</el-button>
      </template>
      <el-button v-if="formData.status === '00' && formData.auditStatus === '99'" v-auth="50300070314" type="primary" @click="e => operate(e, 'cancelAuditTf')">取消审核</el-button>
      <el-button v-if="formData.status !== '20' || (formData.status === '00' && formData.auditStatus !== '00')" v-auth="50300070312" type="primary" @click="e => operate(e, 'executeTf')">执行转移</el-button>
      <template v-if="formData.status === '10' || formData.status === '20'">
        <el-button v-auth="50300070315" type="primary" @click="e => operate(e, 'cancelExecuteTf')">取消转移</el-button>
        <el-button v-auth="50300070316" type="primary" @click="e => operate(e, 'closeTf')">关闭订单</el-button>
      </template>
      <el-dropdown class="btn__item" @command="toPrint">
        <el-button type="primary">
          打印<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-auth="50300070115" command="18010070127">打印转移单</el-dropdown-item>
          <el-dropdown-item v-auth="50300070119" command="18010070128">Print Transfer List</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="primary" class="btn__item" @click="$router.back()">关闭</el-button>
    </template>
  </div>
</div>
</template>

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

export default {
  mixins: [ routerMixins ],
  components: { TaskList },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { ...val }
        if (this.mode !== 'create') {
          // 编辑模式可直接显示明细
          this.setPreInfo()
          this.showTaskList = true
          this.setLotAttrsParams(val)
        }
      }
    },
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    this.detailData = this.$route.params.detailData || {}
  },
  mounted () {
  },

  data () {
    return {
      formData: {}, // 表单对象
      fmLotAttrsParams: {}, // 源批次属性查询条件
      toLotAttrsParams: {}, // 目标批次属性查询条件
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      mode: 'create', // 模式
      detailData: {},
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
      // 表单验证
      rules: {
        fmOwner: [{ required: true, message: '必填', trigger: 'change' }],
        reasonCode: [{ required: true, message: '必选', trigger: 'change' }],
      },
      // 源信息共用查询框
      fmPublicQueries: [
        { label: '库区', valueField: 'zoneCode', textField: 'zoneName', cfgKey: 'invWmsZone', rowData: {} },
        { label: '库位从', valueField: 'fmLocFm', textField: 'fmLocFm', cfgKey: 'invWmsLoc', rowData: {}, single: true },
        { label: '库位到', valueField: 'fmLocTo', textField: 'fmLocTo', cfgKey: 'invWmsLoc', rowData: {}, single: true },
        { label: '区域', valueField: 'areaCode', textField: 'areaName', cfgKey: 'invWmsArea', rowData: {} },
      ],
      showTaskList: false, // 显示盘点明细
      fmLotConfigs: [],
      toLotConfigs: [],
      refreshChildren: false, // 刷新子组件数据标识
    }
  },
  methods: {
    // 选源商品前传参
    beforeSelectSku () {
      return {
        queryParams: {
          multiOwnerCodeParam: this.formData.fmOwner
        }
      }
    },
    // 选目标商品前传参
    beforeSelectToSku () {
      return {
        queryParams: {
          multiOwnerCodeParam: this.formData.toOwner
        }
      }
    },
    // 源商品选择后
    fmSkuChange (skuObj) {
      this.fmLotAttrsParams = {
        skuCode: skuObj.skuCode,
        ownerCode: skuObj.ownerCode
      }
    },
    // 目标商品选择后
    toSkuChange (skuObj) {
      this.toLotAttrsParams = {
        skuCode: skuObj.skuCode,
        ownerCode: skuObj.ownerCode
      }
    },
    // 保存
    confirm () {
      const url = this.$API.inventory.tfOrder.create
      const param = { wmTfEntityBean: JSON.stringify(this.formData) }
      this.$https.post(url, param)
        .then(data => {
          this.needRefresh = true
          this.formData = { ...data.data }
          this.tfNo = data.data.tfNo // 查询任务列表要用
          this.setPreInfo()
          this.showTaskList = true
        })
    },
    // 设置子组件参数
    setPreInfo () {
      this.refreshChildren = !this.refreshChildren
    },
    // 设置批次属性参数获取批次属性
    setLotAttrsParams () {
      this.fmLotAttrsParams = {
        ownerCode: this.formData.fmOwner,
        skuCode: this.formData.fmSku,
        lotNum: this.formData.fmLot
      }
      this.toLotAttrsParams = {
        ownerCode: this.formData.toOwner,
        skuCode: this.formData.toSku,
        lotNum: this.formData.toLot
      }
    },
    // 生成转移明细
    createTfDetail () {
      const url = this.$API.inventory.tfOrder.createTfDetail
      const param = { wmTfEntityBean: JSON.stringify(this.formData) }
      this.$https.post(url, param)
        .then(() => {
          this.refreshForm()
        })
    },
    // 操作后刷新表单
    refreshForm () {
      this.getDetail()
      this.needRefresh = true // 可通知列表更新
    },
    // 操作
    operateConfirm (type) {
      const url = this.$API.inventory.tfOrder[type]
      const param = { wmTfOrderQueryItemBean: JSON.stringify([this.formData]) }
      this.$https.post(url, param)
        .then(() => {
          this.refreshForm()
        })
    },
    // 操作后重新获取详情
    getDetail () {
      const url = this.$API.inventory.tfOrder.detail
      const param = { tfNo: this.formData.tfNo }
      this.$https.post(url, param)
        .then(data => {
          this.$message.closeAll()
          this.formData = { ...data.data }
          this.setLotAttrsParams() // 设置批次属性参数获取批次属性
          this.setPreInfo() // 设置任务列表参数获取任务列表
        })
    },

    // 打印
    toPrint (command, vmNode) {
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&tfNo=${this.formData.tfNo}`
      }
      this.$print(param)
    },
  },
}
</script>

<style lang="scss" scoped>
  .creator {
    overflow-y: auto;
    height: 100%;
  }
  .creator__body {
    height: calc(100% - 50px); // 减去 bottom 的高度
    border-bottom: 1px solid #ddd;
    overflow-x: hidden;
  }
  .el-collapse-item {
    margin-bottom: 20px;
    .el-form-item {
      width: 46%;
    }
    .lot-attr {
      /deep/
      .el-form-item {
        width: 46%;
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
          width: 100%
        }
      }
    }
  }
  .creator__foot {
    position: fixed;
    bottom: 20px;
    .btn__item {
      margin-left: 10px;
    }
  }
  .operation-info {
    text-align: center;
  }
</style>
