<template>
<div class="creator">
  <div class="creator__body">
    <el-collapse v-model="activeNames">
      <el-form
        class="creator__info creator__info--base"
        inline
        :model="detailData"
      >
        <el-collapse-item title="基本信息" name="1">
          <el-form-item><span style="font-weight: bold">冻结ID:&nbsp;&nbsp;&nbsp;{{detailData.holdId}}</span></el-form-item>
          <el-form-item label="冻结状态: ">
            <span>{{$utils.keyMatcher(detailData.status, $keys.inventoryQuery.blockLog.status).name}}</span>
          </el-form-item>
          <el-form-item label="冻结方式: ">
            <span>{{$utils.keyMatcher(detailData.holdType, $keys.inventoryQuery.blockLog.holdType).name}}</span>
          </el-form-item>
          <el-form-item label="货主编码: "><span>{{detailData.ownerCode}}</span></el-form-item>
          <el-form-item label="货主名称: "><span>{{detailData.ebcuNameCn}}</span></el-form-item>
          <el-form-item label="商品编码: "><span>{{detailData.skuCode}}</span></el-form-item>
          <el-form-item label="商品名称: "><span>{{detailData.skuName}}</span></el-form-item>
          <el-form-item label="行号: "><span>{{detailData.lineNo}}</span></el-form-item>
          <el-form-item label="库位: "><span>{{detailData.locCode}}</span></el-form-item>
          <el-form-item label="批次号: "><span>{{detailData.lotNum}}</span></el-form-item>
          <el-form-item label="跟踪号: "><span>{{detailData.traceId}}</span></el-form-item>
          <el-form-item label="冻结原因: ">
            <span>{{$utils.keyMatcher(detailData.reasonCode, $keys.inventoryQuery.blockLog.reasonCode).name}}</span>
          </el-form-item>
          <el-form-item label="冻结描述: "><span>{{detailData.reason}}</span></el-form-item>
          <el-form-item label="是否可调整: ">
            <span>{{$utils.keyMatcher(detailData.isAllowAd, $keys.inventoryQuery.blockLog.isAllowAd).name}}</span>
          </el-form-item>
          <el-form-item label="是否可移动: ">
            <span>{{$utils.keyMatcher(detailData.isAllowMv, $keys.inventoryQuery.blockLog.isAllowMv).name}}</span>
          </el-form-item>
          <el-form-item label="是否可转移: ">
            <span>{{$utils.keyMatcher(detailData.isAllowTf, $keys.inventoryQuery.blockLog.isAllowTf).name}}</span>
          </el-form-item>
          <el-form-item label="是否可取消收货: ">
            <span>{{$utils.keyMatcher(detailData.isAllowCancleRec, $keys.inventoryQuery.blockLog.isAllowCancleRec).name}}</span>
          </el-form-item>
          <el-form-item label="操作人: "><span>{{detailData.op}}</span></el-form-item>
          <el-form-item label="操作时间: "><span>{{detailData.opTime}}</span></el-form-item>
        </el-collapse-item>
        <el-collapse-item title="操作信息" name="2">
          <div class="operation-info">
            <el-col :span="6">创建人登录名: {{operationInfo.creatorLoginName}} ({{operationInfo.creatorUserNameCn}})</el-col>
            <el-col :span="6">创建时间: {{detailData.createTime}}</el-col>
            <el-col :span="6">修改人登录名: {{operationInfo.modifierLoginName}} ({{operationInfo.modifierUserNameCn}})</el-col>
            <el-col :span="6">修改时间: {{detailData.modifyTime}}</el-col>
          </div>
        </el-collapse-item>
      </el-form>
    </el-collapse>
  </div>
  <div class="creator__foot">
    <el-button v-auth="50300030201" type="primary" @click="viewOther('last')">查看上一条</el-button>
    <el-button v-auth="50300030201" type="primary" @click="viewOther('next')">查看下一条</el-button>
  </div>
</div>
</template>

<script>
export default {
  created () {
    this.dataIndex = this.$route.params.index
    this.dataList = this.$route.params.list
    this.detailData = this.dataList[this.dataIndex] || {}
    this.getUserName()
  },
  mounted () {
  },

  data () {
    return {
      dataIndex: 0, // 数据下标
      dataList: [], // 数据源列表
      detailData: {}, // 详情对象
      activeNames: ['1', '2', '3', '4'],
      operationInfo: {}, // 操作人员信息
    }
  },
  methods: {
    getUserName () {
      const url = `${this.$API.getUserName}?creator=${this.detailData.creator}&modifier=${this.detailData.modifier}`
      this.$https.get(url)
        .then(data => {
          this.operationInfo = data.data
        })
    },
    // 查看上一条/下一条
    viewOther (type) {
      switch (type) {
        case 'last':
          // 查看上一条
          if (this.dataIndex === 0) {
            this.$message.warning('已经是本页第一条数据')
          } else {
            --this.dataIndex
          }
          break
        case 'next':
          if (this.dataIndex === this.dataList.length - 1) {
            this.$message.warning('已经是本页最后一条数据')
          } else {
            ++this.dataIndex
          }
          break
      }
      this.detailData = this.dataList[this.dataIndex]
      this.getUserName()
    },
  },
}
</script>

<style lang="scss" scoped>
.el-collapse-item {
  margin-bottom: 20px;
}
.creator {
  overflow-y: auto;
  height: 100%;
  &__info {
    .el-form-item {
      width: 23%;
    }
  }
  .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>
