<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.adNo" 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' || confirmed"
              title="货主"
              single
              cfgKey="invWmsCustomer"
              :baseUrl="baseUrl"
              :valueField.sync="formData.ownerCode"
              :textField.sync="formData.ownerName"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="盘点单号">
            <el-input v-model="formData.countNo" disabled></el-input>
          </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="审核人">
            <PublicQuery
              disabled
              single
              title="审核人"
              cfgKey="invWmsOperator"
              :baseUrl="baseUrl"
              :valueField.sync="formData.auditOp"
              :textField.sync="formData.auditName"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="审核意见">
            <el-input v-model="formData.auditComment"></el-input>
          </el-form-item>
          <el-form-item label="调整操作人">
            <PublicQuery
              single
              title="调整操作人"
              cfgKey="invWmsOperator"
              :baseUrl="baseUrl"
              :valueField.sync="formData.adOp"
              :textField.sync="formData.adOpName"
            ></PublicQuery>
          </el-form-item>
          <el-form-item label="调整时间">
            <el-date-picker
              type="datetime"
              v-model="formData.adTime"
              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-select v-model="formData.reasonCode">
              <template v-for="item in $keys.inventory.adjustment.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">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="调整明细" name="3">
          <template v-if="showDetailList">
            <DetailList
              :mode="mode"
              :needRefresh="refreshChildren"
              :formData="formData"
              @refreshForm="refreshForm"
            ></DetailList>
          </template>
        </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="4">
          <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 === 'create' || (mode === 'edit' && detailData.status === '00')">
      <el-button v-auth="50300030201" type="primary" @click="confirm">保存</el-button>
    </template>
    <template v-if="mode === 'detail'">
      <el-button v-if="formData.status === '00' && formData.auditStatus === '00'" v-auth="50300030307" type="primary" @click="e => operate(e, 'auditAd')">审核</el-button>
      <el-button v-if="(formData.status === '00' && formData.auditStatus !== '00') || formData.status === '10'" v-auth="50300030308" type="primary" @click="e => operate(e, 'executeAd')">执行调整</el-button>
      <!--更多-->
      <el-dropdown v-if="formData.status !== '90' && formData.status !== '99'" v-auth="50300030309" class="btn__item">
        <el-button type="primary">
          更多<i class="el-icon-arrow-down el-icon&#45--t"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="formData.status === '00' && formData.auditStatus === '99'" v-auth="50300030310" command="cancelAuditAd" needconfirm @click.native="operate">取消审核</el-dropdown-item>
          <el-dropdown-item v-if="formData.status === '10' || formData.status === '20'" v-auth="50300030311" command="cancelExecuteAd" needconfirm @click.native="operate">取消调整</el-dropdown-item>
          <el-dropdown-item v-if="formData.status === '20'" v-auth="50300030312" command="closeAd" needconfirm @click.native="operate">关闭订单</el-dropdown-item>
          <el-dropdown-item v-if="formData.status === '00' && formData.auditStatus !== '99'" v-auth="50300030313" command="cancelAd" needconfirm @click.native="operate">取消订单</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--打印-->
      <el-dropdown v-if="formData.status !== '90' && formData.status !== '99'" v-auth="50300030314" class="btn__item" @command="toPrint">
        <el-button type="primary">
          打印<i class="el-icon-arrow-down el-icon&#45--t"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-auth="50300030315" command="18010070113">打印调整确认单</el-dropdown-item>
          <el-dropdown-item v-auth="50300030317" command="18010070114">Print Adjustment 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'
const userInfo = JSON.parse(window.localStorage.getItem('userInfo'))

export default {
  mixins: [ routerMixins ],
  components: { DetailList },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        if (this.mode !== 'create') {
          // 编辑模式可直接显示明细
          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', // 模式, 默认为新增模式
      confirmed: false, // 提交的标识
      detailData: {}, // 主页面传来的详情对象
      formData: {
        adOp: userInfo.username, // 默认为登录用户
        adOpName: userInfo.userNameCn,
        adTime: new Date(), // 调整时间默认为当前时间
      },
      activeNames: ['1', '2', '3', '4'],
      baseUrl: '/inv_web/invweb', // 多条件基础URL
      // 表单验证
      rules: {
        // formData写在 computed 就不能识别校验, 导致校验始终不通过
        ownerCode: [{ required: true, message: '货主必填', trigger: 'change' }],
      },
      showDetailList: false, // 显示调整明细
      operationInfo: {}, // 操作信息对象
      refreshChildren: false, // 刷新子组件标识
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('close')
    },
    // 保存按钮
    confirm () {
      this.$refs.form.validate(valid => {
        const url = this.$API.inventory.adjustment.create
        const param = { saveEntity: JSON.stringify(this.formData) }
        this.$https.post(url, param)
          .then(data => {
            this.confirmed = true
            this.needRefresh = true
            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
        })
    },
    // 打印
    toPrint (command, vmNode) {
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&adNo=${this.formData.adNo}`
      }
      this.$print(param)
    },
    // 设置子组件参数
    setPreInfo () {
      this.refreshChildren = !this.refreshChildren
    },

    // 操作后刷新表单
    refreshForm () {
      this.getDetail()
      this.needRefresh = true // 可通知列表更新
    },
    // 操作
    operateConfirm (type) {
      const url = this.$API.inventory.adjustment[type]
      const param = { adNos: this.formData.adNo }
      this.$https.post(url, param)
        .then(() => {
          this.refreshForm()
        })
    },
    // 操作后重新获取详情
    getDetail () {
      const url = this.$API.inventory.adjustment.detail
      const param = { adNo: this.formData.adNo }
      this.$https.post(url, param)
        .then(data => {
          this.formData = { ...data.data }
          this.setPreInfo() // 设置明细列表参数获取明细列表
          this.getUserName()
        })
    },
  },
}
</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-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;
}
.operation-info {
  text-align: center;
}
.btn__item {
  margin-left: 10px;
}
</style>
