<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.tranId}}</span></el-form-item>
          <el-form-item label="交易类型: ">
            <span>{{$utils.keyMatcher(detailData.tranType, $keys.inventoryQuery.transaction.tranType).name}}</span>
          </el-form-item>
          <el-form-item label="单据号: "><span>{{detailData.orderNo}}</span></el-form-item>
          <el-form-item label="单据行号: "><span>{{detailData.lineNo}}</span></el-form-item>
          <el-form-item label="操作人: "><span>{{detailData.tranOp}}</span></el-form-item>
          <el-form-item label="交易时间: "><span>{{detailData.tranTime}}</span></el-form-item>
        </el-collapse-item>
        <el-collapse-item title="源信息" name="2">
          <div class="base-info">
            <el-form-item label="源货主: "><span>{{detailData.fmOwnerName}}</span></el-form-item>
            <el-form-item label="源商品: "><span>{{detailData.fmSkuName}}</span></el-form-item>
            <el-form-item label="源批次: "><span>{{detailData.fmLot}}</span></el-form-item>
            <el-form-item label="源库位: "><span>{{detailData.fmLoc}}</span></el-form-item>
            <el-form-item label="源跟踪号: "><span>{{detailData.fmId}}</span></el-form-item>
            <el-form-item label="包装规格: "><span>{{detailData.fmFormat}}</span></el-form-item>
            <el-form-item label="包装单位: "><span>{{detailData.fmUomDesc}}</span></el-form-item>
            <el-form-item label="数量: "><span>{{detailData.fmQtyUomOp}}</span></el-form-item>
            <el-form-item label="数量EA: "><span>{{detailData.fmQtyEaOp}}</span></el-form-item>
            <el-form-item label="重量: "><span>{{detailData.fmWeightOp}}</span></el-form-item>
            <el-form-item label="源操作前库存数: "><span>{{detailData.fmQtyEaBefore}}</span></el-form-item>
            <el-form-item label="源操作前重量: "><span>{{detailData.fmWeightBefore}}</span></el-form-item>
            <el-form-item label="源操作后库存数: "><span>{{detailData.fmQtyEaAfter}}</span></el-form-item>
            <el-form-item label="源操作后重量: "><span>{{detailData.fmWeightAfter}}</span></el-form-item>
          </div>
          <div class="lot-info">
            <el-form-item label="生产日期: "><span>{{detailData.lotAtt01}}</span></el-form-item>
            <el-form-item label="失效日期: "><span>{{detailData.lotAtt02}}</span></el-form-item>
            <el-form-item label="入库日期: "><span>{{detailData.lotAtt03}}</span></el-form-item>
            <el-form-item label="品质: "><span>{{detailData.lotAtt04}}</span></el-form-item>
            <el-form-item label="批次属性05: "><span>{{detailData.lotAtt05}}</span></el-form-item>
            <el-form-item label="批次属性06: "><span>{{detailData.lotAtt06}}</span></el-form-item>
            <el-form-item label="批次属性07: "><span>{{detailData.lotAtt07}}</span></el-form-item>
            <el-form-item label="批次属性08: "><span>{{detailData.lotAtt08}}</span></el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item title="目标信息" name="3">
          <div class="base-info">
            <el-form-item label="目标货主: "><span>{{detailData.toOwnerName}}</span></el-form-item>
            <el-form-item label="目标商品: "><span>{{detailData.toSkuName}}</span></el-form-item>
            <el-form-item label="目标批次: "><span>{{detailData.toLot}}</span></el-form-item>
            <el-form-item label="目标库位: "><span>{{detailData.toLoc}}</span></el-form-item>
            <el-form-item label="目标跟踪号: "><span>{{detailData.toId}}</span></el-form-item>
            <el-form-item label="包装规格: "><span>{{detailData.toFormat}}</span></el-form-item>
            <el-form-item label="包装单位: "><span>{{detailData.toUomDesc}}</span></el-form-item>
            <el-form-item label="数量: "><span>{{detailData.toQtyUomOp}}</span></el-form-item>
            <el-form-item label="数量EA: "><span>{{detailData.toQtyEaOp}}</span></el-form-item>
            <el-form-item label="重量: "><span>{{detailData.toWeightOp}}</span></el-form-item>
            <el-form-item label="目标操作前库存数: "><span>{{detailData.toQtyEaBefore}}</span></el-form-item>
            <el-form-item label="目标操作前重量: "><span>{{detailData.toWeightBefore}}</span></el-form-item>
            <el-form-item label="目标操作后库存数: "><span>{{detailData.toQtyEaAfter}}</span></el-form-item>
            <el-form-item label="目标操作后重量: "><span>{{detailData.toWeightAfter}}</span></el-form-item>
          </div>
          <div class="lot-info">
            <el-form-item label="生产日期: "><span>{{detailData.tlotAtt01}}</span></el-form-item>
            <el-form-item label="失效日期: "><span>{{detailData.tlotAtt02}}</span></el-form-item>
            <el-form-item label="入库日期: "><span>{{detailData.tlotAtt03}}</span></el-form-item>
            <el-form-item label="品质: "><span>{{detailData.tlotAtt04}}</span></el-form-item>
            <el-form-item label="批次属性05: "><span>{{detailData.tlotAtt05}}</span></el-form-item>
            <el-form-item label="批次属性06: "><span>{{detailData.tlotAtt06}}</span></el-form-item>
            <el-form-item label="批次属性07: "><span>{{detailData.tlotAtt07}}</span></el-form-item>
            <el-form-item label="批次属性08: "><span>{{detailData.tlotAtt08}}</span></el-form-item>
          </div>
        </el-collapse-item>
        <el-collapse-item title="操作信息" name="4">
          <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%;
    }
    .base-info {
      border-bottom: 1px solid #ddd;
    }
  }
  .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>
