<template>
  <div class="creator">
    <div class="creator__body">
      <el-form
        class="creator__info creator__info--base"
        inline
        label-position="top"
        :model="formData"
        ref="form"
        :rules="rules"
        :disabled="mode === 'detail'"
      >
        <el-collapse v-model="activeNames">
          <el-collapse-item title="关键信息" name="1">
            <el-form-item label="移动单号">
              <el-input v-model="formData.mvNo" disabled></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formData.status" disabled>
                <template v-for="item in $keys.inventory.adjustment.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="ownerCode">
              <PublicQuery
                :disabled="mode !== 'create'"
                title="货主"
                single
                cfgKey="invWmsCustomerSku"
                :baseUrl="baseUrl"
                :valueField.sync="formData.ownerCode"
                :textField.sync="formData.ownerName"
              ></PublicQuery>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>

        <el-collapse v-model="activeNames">
          <el-collapse-item title="基本信息" name="2">
            <el-form-item label="审核状态">
              <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="审核时间">
              <el-date-picker
                type="datetime"
                disabled
                v-model="formData.auditTime"
                value-format="yyyy-MM-dd HH:mm:00"
                format="yyyy-MM-dd HH:mm"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="审核人">
              <el-input v-model="formData.auditOpCn" disabled></el-input>
            </el-form-item>
            <el-form-item label="审核意见">
              <el-input v-model="formData.auditComment"></el-input>
            </el-form-item>
            <el-form-item label="移动原因">
              <el-select v-model="formData.reasonCode">
                <template v-for="item in $keys.inventory.mvOrder.reasonCode">
                  <el-option :key="item.id" :value="item.key" :label="item.name"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="原因描述">
              <el-input v-model="formData.reason"></el-input>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>
      </el-form>
      <div class="creator__info creator__info--senior" v-if="mode === 'detail'">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="移动任务" name="3">
            <TaskList
              :needRefresh="refreshChildren"
              :mode="mode"
              :formData="formData"
              @refreshForm="refreshForm"
            ></TaskList>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="creator__info creator__info--senior">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="移动明细" name="4">
            <div v-show="showDetailList">
              <DetailList :needRefresh="refreshChildren" :mode="mode" :formData="formData"></DetailList>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="creator__info creator__info--operation" v-if="mode === 'detail'">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="操作信息" name="5">
            <div class="operation-info">
              <el-col :span="6">创建人登录名: {{operationInfo.creatorLoginName}} ({{operationInfo.creatorUserNameCn}})</el-col>
              <el-col :span="6">创建时间: {{formData.createTime}}</el-col>
              <el-col :span="6">修改人登录名: {{operationInfo.modifierLoginName}} ({{operationInfo.modifierUserNameCn}})</el-col>
              <el-col :span="6">修改时间: {{formData.modifyTime}}</el-col>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="creator__foot">
      <template v-if="mode !== 'detail'">
        <el-button v-auth="50300030201" 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="50300050311" type="primary" @click="e => operate(e, 'auditMvOrder')">审核</el-button>
          <el-button v-auth="50300050317" type="primary" @click="e => operate(e, 'cancelMvOrder')">取消订单</el-button>
        </template>
        <el-button v-if="(formData.status === '00' || formData.status === '20' || formData.status === '30') && (formData.auditStatus !== '00')" v-auth="50300050312" type="primary" @click="e => operate(e, 'performMove')">执行移动</el-button>
        <el-button v-if="formData.status === '00' && formData.auditStatus === '99'" v-auth="50300050314" type="primary" @click="e => operate(e, 'cancelAudit')">取消审核</el-button>
        <el-button v-if="formData.status === '20' || formData.status === '30' || formData.status === '40'" v-auth="50300050315" type="primary" @click="e => operate(e, 'cancelMove')">取消移动</el-button>
        <el-button v-if="formData.status === '40'" v-auth="50300050316" type="primary" @click="e => operate(e, 'closeMvOrder')">关闭订单</el-button>
        <!--打印区域-->
        <el-dropdown v-auth="50300050318" 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="50300050319" command="18010070115">打印移动单</el-dropdown-item>
            <el-dropdown-item v-auth="50300050322" command="18010070116">Print Moving List</el-dropdown-item>
            <el-dropdown-item v-auth="50300050320" command="18010070117">打印移动上架单</el-dropdown-item>
            <el-dropdown-item v-auth="50300050323" command="18010070118">Print Moving Up List</el-dropdown-item>
            <el-dropdown-item v-auth="50300050321" command="18010070119">打印移动下架单</el-dropdown-item>
            <el-dropdown-item v-auth="50300050324" command="18010070120">Print Moving Down 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 mixins from './mixins'
import routerMixins from '../../routerMixins'
import DetailList from './detailList/DetailList'
import TaskList from './taskList/TaskList'

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

  data () {
    return {
      mode: 'create', // 模式, 默认为新增模式
      detailData: {}, // 主页面传来的详情对象
      formData: {},
      activeNames: ['1', '2', '3', '4', '5'],
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      // 表单验证
      rules: {
        // formData写在 computed 就不能识别校验, 导致校验始终不通过
        ownerCode: [{ required: true, message: '货主必填', trigger: 'change' }],
      },
      showDetailList: false, // 显示移动明细
      mvNo: '', // 移动明细单号
      operationInfo: {}, // 操作信息对象
      preInfo: {}, // 子组件参数
      refreshChildren: true,
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('close')
    },
    // 保存按钮
    confirm () {
      this.$refs.form.validate(valid => {
        const url = this.$API.inventory.mvOrder.create
        const param = { mvHeaderModel: JSON.stringify(this.formData) }
        this.$https.post(url, param)
          .then(data => {
            this.needRefresh = true
            this.mvNo = data.data.mvNo
            this.formData = { ...data.data }
            this.showDetailList = true
          })
      })
    },
    getUserName () {
      const url = `${this.$API.getUserName}?creator=${this.formData.creator}&modifier=${this.formData.modifier}`
      this.$https.get(url)
        .then(data => {
          this.operationInfo = data.data
        })
    },
    // 设置子组件参数
    setPreInfo () {
      this.refreshChildren = !this.refreshChildren
    },

    // 操作后刷新表单
    refreshForm () {
      this.getDetail()
      this.needRefresh = true // 可通知列表更新
    },
    // 操作
    operateConfirm (type) {
      const url = this.$API.inventory.mvOrder[type]
      const param = { mvNos: this.formData.mvNo }
      this.$https.post(url, param)
        .then(() => {
          this.refreshForm()
        })
    },
    // 操作后重新获取详情
    getDetail () {
      const url = this.$API.inventory.mvOrder.detail
      const param = { mvNo: this.formData.mvNo }
      this.$https.post(url, param)
        .then(data => {
          this.formData = { ...data.data }
          this.setPreInfo() // 设置任务列表参数获取任务列表
          this.getUserName()
        })
    },
    // 打印
    toPrint (command, vmNode) {
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&adNo=${this.formData.adNo}`
      }
      this.$print(param)
    },
  },
}
</script>

<style lang="scss" scoped>
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .creator {
    overflow-y: auto;
    height: 100%;
    &__info {
      margin-bottom: 20px;
    }
    &__info--base {
      display: flex;
      justify-content: space-between;
      .el-form-item {
        width: 46%;
      }
      > .el-collapse {
        width: 50%;
        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
  .creator__body {
    height: calc(100% - 50px); // 减去 bottom 的高度
    border-bottom: 1px solid #ddd;
    overflow-x: hidden;
  }
  .creator__foot {
    position: fixed;
    bottom: 20px;
    .btn__item {
      margin-left: 10px;
    }
  }
  .operation-info {
    text-align: center;
  }
</style>
