<template>
  <div>
    <el-dialog
      title="领料列表"
      :visible.sync="visible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="80%"
    >
      <div class="tableZ_box">
        <div class="row">
          <div class="col">
            <div class="name">领料时间</div>
            <div class="content">{{ dataObj.createTime }}</div>
          </div>
          <div class="col">
            <div class="name">领料单号</div>
            <div class="content">{{ dataObj.code }}</div>
          </div>

          <div class="col">
            <div class="name">领料人</div>
            <div class="content">{{ dataObj.executorName }}</div>
          </div>
        </div>
      </div>

      
        <ele-pro-table
          ref="table"
          :columns="columns"
          max-height="320px"
          :datasource="dataObj.detailList"
          cache-key="detailed"
          highlight-current-row
          :need-page="false"
        >
  
          <template v-slot:empty>
            <div class="empty">暂无领料数据</div>
          </template>

          <template v-slot:index="{ row, $index }">
            {{ $index }} <el-tag>{{ row.rootCategoryLevelName }}</el-tag>
          </template>

          <template v-slot:demandQuantity="{ row }">
            {{ row.demandQuantity }} {{ row.unit }}
          </template>
        </ele-pro-table>
     
    </el-dialog>
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      detailedObj: {}
    },
    data() {
      return {
        visible: true,
        dataObj: null
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 120,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'index'
          },

          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center'
          },

          {
            prop: 'categoryName',
            label: '名称',
            align: 'center'
          },

          {
            prop: 'demandQuantity',
            label: '数量',
            align: 'center',
            slot: 'demandQuantity'
          },

          {
            prop: 'warehouseName',
            label: '领料仓库',
            align: 'center'
          },

          {
            prop: 'warehouseLeaderName',
            label: '审核人',
            align: 'center'
          },

          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center'
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center'
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          }
        ];
      }
    },

    methods: {
      handleClose() {
        this.$emit('detailedClose');
      }
    },

    created() {
      let obj = JSON.parse(this.detailedObj);
      console.log(obj, 'obj');

      this.dataObj = obj;
    }
  };
</script>

<style lang="scss" scoped>
  .tableZ_box {
    border: 1px solid #e3e5e5;
    margin: 6px 0;

    &:last-child {
      border-bottom: none;
    }

    .row {
      width: 100%;
      display: flex;
    }

    .col {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      min-width: 200px;
      min-height: 32px;
      border-bottom: 1px solid #e3e5e5;
      border-right: 1px solid #e3e5e5;

      &:last-child {
        border-right: none;
      }

      .name {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 80px;
        height: 100%;
        background-color: #d0e4d5;
        color: #000;
      }

      .content {
        padding: 4px 6px;
        color: #000;
      }
    }

    .pd6 {
      padding: 0 6px;
    }
  }
  .tableZ_box {
    .col {
      width: calc(100% / 3);
    }
  }

  .tag_box {
    span {
      display: inline-block;
      padding: 2px 4px;
      background: #e6f7ff;
      margin: 0 4px;
    }
  }
</style>
