<template>
  <div>
    <div class="basic-details-title border-none">
      <span class="border-span">舟皿信息</span>
    </div>
    <el-descriptions
      title=""
      :column="3"
      size="medium"
      :label-style="labelStyle"
      :contentStyle="contentStyle"
      border
    >
      <el-descriptions-item>
        <template slot="label">长</template>
        {{ categoryPallet.palletLen ? categoryPallet.palletLen + 'mm' : '' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">宽</template>
        {{ categoryPallet.wilde ? categoryPallet.wilde + 'mm' : '' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">高</template>
        {{ categoryPallet.height ? categoryPallet.height + 'mm' : '' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">槽数</template>
        {{ categoryPallet.slotNum ? categoryPallet.slotNum : '' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">角度</template>
        {{ categoryPallet.angle > 0 ? angleOptions[categoryPallet.angle] : '' }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        labelStyle: {
          width: '200px'
        },
        contentStyle: {
          width: '400px'
        },
        angleOptions: {
          1: 'A',
          2: '非A'
        },
        categoryPallet: {}
      };
    },
    methods: {
      async getDetailInfoAugr(data) {
        this.categoryPallet = { ...data };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .upload-container {
    display: flex;
    justify-content: flex-start;
    .file-list {
      margin-left: 50px;
      flex: 1;
    }
  }
  .basic-details-title {
    font-size: 16px;
    margin: 15px 0;
  }
</style>
