<template>
  <ele-modal
    :visible.sync="visible"
    title="入库详情"
    width="1200px"
    :maxable="true"
  >
    <el-form ref="form" label-width="100px" class="create-form">
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>

      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="编码:" prop="code">
            <el-input v-model="row.code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工单编码:" prop="workOrderCode">
            <el-input v-model="row.workOrderCode" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="仓库名称:" prop="warehouseName">
            <el-input v-model="row.warehouseName" style="width: 100%" disabled>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物品分类:" prop="categoryLevelName">
            <el-input
              v-model="row.categoryLevelName"
              style="width: 100%"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间:" prop="createTime">
            <el-input v-model="row.createTime" style="width: 100%" disabled>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <ele-pro-table
      v-if="clientEnvironmentId == 3"
      :columns="columns"
      :datasource="tableList"
      cache-key="tgDetails"
      height="calc(100vh - 350px)"
      :need-page="false"
    >
      <template v-slot:packingWeight="{ row }">
        {{ row.packingWeight }} {{ row.weightUnit }}
      </template>

      <template v-slot:materielCode="{ row }">
        {{ row.extInfo.materielCode }}
      </template>

      <template v-slot:clientCode="{ row }">
        {{ row.extInfo.clientCode }}
      </template>

      <template v-slot:engrave="{ row }">
        {{ row.extInfo.engrave }}
      </template>
    </ele-pro-table>

    <ele-pro-table
      v-else-if="clientEnvironmentId == 2"
      :columns="columns2"
      :datasource="tableList"
      cache-key="srDetails"
      height="calc(100vh - 350px)"
      :need-page="false"
    >
      <template v-slot:quantity="{ row }">
        {{ row.quantity }}
      </template>
    </ele-pro-table>

    <ele-pro-table
      v-else-if="clientEnvironmentId == 4"
      :columns="columns"
      :datasource="tableList"
      cache-key="tgDetails"
      height="calc(100vh - 350px)"
      :need-page="false"
    >
      <template v-slot:packingWeight="{ row }">
        {{ row.packingWeight }} {{ row.weightUnit }}
      </template>

      <template v-slot:materielCode="{ row }">
        {{ row.extInfo.materielCode }}
      </template>

      <template v-slot:clientCode="{ row }">
        {{ row.extInfo.clientCode }}
      </template>

      <template v-slot:engrave="{ row }">
        {{ row.extInfo.engrave }}
      </template>
    </ele-pro-table>

    <ele-pro-table
      v-else
      :columns="columns"
      :datasource="tableList"
      cache-key="srDetails"
      height="calc(100vh - 350px)"
      :need-page="false"
    >
      <template v-slot:packingWeight="{ row }">
        {{ row.packingWeight }} {{ row.weightUnit }}
      </template>

      <template v-slot:materielCode="{ row }">
        {{ row.extInfo.materielCode }}
      </template>

      <template v-slot:clientCode="{ row }">
        {{ row.extInfo.clientCode }}
      </template>

      <template v-slot:engrave="{ row }">
        {{ row.extInfo.engrave }}
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script>
  export default {
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },
    data() {
      return {
        visible: false,
        tableList: [],
        row: {},
        columns: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },

          // {
          //   label: '入库申请单id',
          //   prop: 'applyStorageId'
          // },

          {
            label: '物品名称',
            prop: 'categoryName'
          },
          {
            label: '物品分类名称',
            prop: 'categoryLevelName'
          },

          {
            label: '批次号',
            prop: 'batchNo'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },

          {
            label: '型号',
            prop: 'modelType'
          },

          {
            label: '包装数量',
            prop: 'packingCount'
          },

          {
            label: '包装单位',
            prop: 'packingUnit'
          },

          {
            label: '本包重量',
            slot: 'packingWeight'
          },

          {
            label: '包装内总数量',
            slot: 'quantity',
            prop: 'quantity'
          },

          {
            label: '序列号',
            slot: 'productSequence',
            prop: 'productSequence'
          },
          {
            label: '物料代号',
            slot: 'materielCode'
          },
          {
            label: '客户代号',
            slot: 'clientCode'
          },
          {
            label: '刻码',
            slot: 'engrave'
          },

          {
            label: '发货码',
            prop: 'sendCode'
          }
        ],

        columns2: [
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },

          // {
          //   label: '入库申请单id',
          //   prop: 'applyStorageId'
          // },

          {
            label: '物品名称',
            prop: 'categoryName'
          },
          {
            label: '物品分类名称',
            prop: 'categoryLevelName'
          },
          {
            label: '批次号',
            prop: 'batchNo'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },

          {
            label: '型号',
            prop: 'modelType'
          },

          {
            label: '包装数量',
            prop: 'packingCount'
          },

          {
            label: '包装单位',
            prop: 'packingUnit'
          },

          {
            label: '本包重量',
            prop: 'packingWeight'
          },

          {
            label: '包装内总数量',
            slot: 'quantity'
          },

          {
            label: '发货码',
            prop: 'sendCode'
          }
        ]
      };
    },
    created() {},
    methods: {
      open(row) {
        console.log(row, 'row++++++++++');

        if (row) {
          this.row = row;
          this.tableList = [...row.detailList];
        }
        this.visible = true;
      }
    }
  };
</script>
