<template>
  <div class="page">
    <el-form label-width="130px">
      <div class="page-title">
        <div class="page-title-div">
          <el-page-header @back="$router.go(-1)" content="报损报溢详情">
          </el-page-header>
        </div>
      </div>
      <!-- tab切换 -->
      <!--      <div class="switch">
        <div class="switch_left">
          <ul>
            <li :class="{ active: num == 1 }">详情</li>
          </ul>
        </div>
      </div> -->

      <div class="content-detail">
        <div class="custSteps">
          <StatusStep :activeCode="infoData.status" />
        </div>
        <div class="basic-details">
          <HeaderTitle title="基本信息" size="16px"></HeaderTitle>
          <el-row>
            <el-col :span="8">
              <el-form-item label="单号">
                <span>{{ infoData.code }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="名称">
                <span>{{ infoData.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人部门">
                <span>{{ infoData.auditDeptName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核人">
                <span>{{ infoData.auditName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报损报溢人">
                <span>{{ infoData.reportName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报损报溢部门">
                <span>{{ infoData.reportDeptName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <span>{{ infoData.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注">
                <span>{{ infoData.remark }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <div>盘点单号{{ infoData.workOrderCode }}</div> -->
          <HeaderTitle
            :title="`盘点单号${infoData.workOrderCode}`"
            size="16px"
          ></HeaderTitle>
          <el-table
            :data="infoData.list"
            border
            :header-cell-style="{
              background: '#F0F3F3',
              border: 'none'
            }"
          >
            <el-table-column :label="`${assetName}编码`" prop="onlyCode">
            </el-table-column>
            <el-table-column :label="`${assetName}名称`" prop="name">
            </el-table-column>
            <el-table-column label="类型" prop="productType.descp">
              <template slot-scope="{ row }">
                {{ getDictValue('类型用途', row.productType) }}
              </template></el-table-column
            >
            <el-table-column label="批次号" prop="batch"> </el-table-column>
            <el-table-column
              v-for="(item, index) in tableHeader"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
              <template slot-scope="{ row }">
                <template v-if="item.formatter">
                  {{ item.formatter(row) }}
                </template>
                <template v-else>
                  {{ row[item.prop] }}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="最小单元" prop="minimumUnit">
              <template slot-scope="{ row }">
                {{ row.unit }}/{{ row.minPackUnit || row.minimumUnit }}
              </template>
            </el-table-column>
            <el-table-column label="盈/亏/损" prop="">
              <template slot-scope="{ row }">
                <span :style="{ color: getEquStatus(row.status).color }">
                  {{ getEquStatus(row.status).label }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="amount">
              <template slot-scope="{ row }">
                <span :style="{ color: getEquStatus(row.status).color }">
                  {{ [1, 2].includes(row.status) ? '-1' : `+${row.amount}` }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="货位信息" prop="">
              <template slot-scope="{ row }">
                {{ row.warehouseName }}-{{ row.reservoirName }}-{{
                  row.goodsShelfName
                }}-{{ row.goodsAllocationName }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
  import StatusStep from '@/components/StatusStep/common.vue';
  // import { getDetail } from '@/api/stockManagement/reportLoss.js'
  import { wh_equStatus, warehousingType } from '@/utils/dict/warehouse';
  import { auditStatus } from '@/utils/dict/common.js';
  import { useDict, useDictLabel } from '@/utils/dict/index';
  import dictMixin from '@/mixins/dictMixins';

  export default {
    components: { StatusStep },
    mixins: [dictMixin],
    data() {
      return {
        auditStatus,
        getWarehousingType: useDictLabel(warehousingType),
        num: 1,
        infoData: {}
      };
    },
    computed: {
      assetName() {
        if (this.infoData.list?.length) {
          return this.getDictValue(
            '类型用途',
            this.infoData.list[0].productType
          );
        }
        return '';
      },
      tableHeader() {
        if (this.infoData.list?.length) {
          return this.getTableHeader(this.infoData.list[0].productType);
        }
        return [];
      }
    },
    created() {
      this.requestDict('类型用途');
      this.$route.query.id && this._getDetail(this.$route.query.id);
    },
    methods: {
      getTableHeader(selectEquiType) {
        switch (+selectEquiType) {
          case 3:
            return [{ label: '牌号', prop: 'brandNum' }];
          case 8:
            return [
              { label: '型号', prop: 'modelType' },
              { label: '规格', prop: 'specification' }
            ];
          case 4:
            return [
              { label: '牌号', prop: 'brandNum' },
              { label: '型号', prop: 'modelType' }
            ];
          case 5: //'周转车'
            return [
              { label: '规格', prop: 'specification' },
              {
                label: '材质',
                prop: 'texture',
                formatter(row) {
                  if (!row?.extendField) return '';
                  const extendField = JSON.parse(row.extendField);
                  return extendField.texture;
                }
              },
              {
                label: '长宽高',
                prop: '',
                formatter(row) {
                  if (!row?.extendField) return '';
                  const extendField = JSON.parse(row.extendField);
                  return `${extendField.length || '-'}*${
                    extendField.width || '-'
                  }*${extendField.high || '-'}`;
                }
              }
            ];
          case 2: //'舟皿'
            return [
              { label: '规格', prop: 'specification' },
              { label: '型号', prop: 'modelType' },
              {
                label: '长宽高',
                prop: '',
                formatter(row) {
                  if (!row?.extendField) return '';
                  const extendField = JSON.parse(row.extendField);
                  return `${extendField.length || '-'}*${
                    extendField.width || '-'
                  }*${extendField.high || '-'}`;
                }
              }
            ];
          case 1: //'设备'
            return [
              { label: '型号', prop: 'modelType' },
              { label: '规格', prop: 'specification' }
            ];
          case 6: //'模具'
            return [
              { label: '牌号', prop: 'brandNum' },
              { label: '型号', prop: 'modelType' },
              {
                label: '收缩系数',
                prop: '',
                formatter(row) {
                  if (!row?.extendField) return '';
                  const extendField = JSON.parse(row.extendField);
                  return extendField.shrinkageCoefficient;
                }
              }
            ];
          case 7: //'备品备件'
            return [
              { label: '规格', prop: 'specification' },
              { label: '型号', prop: 'modelType' }
            ];
        }

        return [];
      },
      getEquStatus: useDict(wh_equStatus),
      async _getDetail(id) {
        const res = await getDetail({ id });
        if (res?.success) {
          this.infoData = res.data;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    padding: 10px;
    margin: 10px 0 10px 0;
    height: calc(100vh - 80px);
    padding: 10px;
    overflow-y: auto;
  }
  .mt10 {
    margin-top: 10px;
  }
  .right {
    text-align: right;
  }
  .page-title {
    background: #fff;
    font-size: 18px;
    padding: 6px 20px;
    font-weight: 500;
    .page-title-div {
      margin: 5px 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #eaeefb;
    }
  }
  .mt20 {
    margin-top: 20px;
  }
  .content-detail {
    background: #fff;
    padding: 20px;
  }

  .basic-details-title {
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #157a2c;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .basic-details-title .border-span {
    height: 18px;
    font-size: 16px;
    border-left: 4px solid #157a2c;
    padding-left: 8px;

    font-weight: 500;
  }

  .locationFlex {
    display: flex;
    //   justify-content: space-between;
    .locationLeft {
      .flex {
        display: flex;
        .title {
          width: 76px;
          font-size: 13px;
          text-align: center;
          margin-right: 5px;
          margin-bottom: 5px;
        }
        .locationContent {
          width: 76px;
          padding: 24px 0;
          color: #fff;
          font-size: 13px;
          text-align: center;
          margin-right: 5px;
          margin-bottom: 5px;
        }
      }
    }
    .locationRight {
      width: 300px;
      margin-left: 40px;
      height: 100%;
    }
    .green {
      background-color: #157a2c;
    }
    .red {
      background-color: #a60014;
    }
    .blue {
      background-color: #027db4;
    }
  }
</style>
