<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <seek-page :seekList="seekList" @search="search"></seek-page>

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
        cache-key="entrust_list_data"
        :height="tableHeight"
        :pageSize="20"
        @fullscreen-change="fullscreenChange"
      >
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="detail"
          >
            详情
          </el-button>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    data() {
      return {
        loading: false,
        factoryList: [],
        selection: [],
        tableHeight: 'calc(100vh - 320px)'
      };
    },

    computed: {
      columns() {
        return [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'type',
            label: '需求订单号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '顶级产品编号',
            width: 120,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '顶级产品名称',
            width: 120,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '计划状态',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '计划编号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '批次号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '生产工单号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '编码',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '零部件图号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '型号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '规格',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '尺寸',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '计划数量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '计量单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: 'BOM类型',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: 'BOM版本',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '牌号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '加工类型',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '作业名称',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '承制单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '计划类别',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '投料控制清单号',
            width: 120,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '创建人',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          },
          {
            prop: 'type',
            label: '创建时间',
            width: 100,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'type'
          }
        ];
      },

      seekList() {
        return [
          {
            label: '计划编号:',
            value: 'name',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '批次号:',
            value: 'name',
            type: 'input',
            labelWidth: 80
          },
          {
            label: '编码:',
            value: 'name',
            type: 'input',
            labelWidth: 50
          },
          {
            label: '需求订单号:',
            value: 'name',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '顶级产品编号:',
            value: 'name',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '顶级产品名称:',
            value: 'name',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '计划状态:',
            value: 'name',
            type: 'select',
            labelWidth: 100,
            planList: this.factoryList
          },
          {
            label: '计划类别:',
            value: 'name',
            type: 'select',
            labelWidth: 100,
            planList: this.factoryList
          },
          {
            label: '承制单位:',
            value: 'name',
            type: 'select',
            labelWidth: 100,
            planList: this.factoryList
          }
        ];
      }
    },

    methods: {
      datasource() {},

      search() {},

      fullscreenChange(fullscreen) {
        if (fullscreen) {
          this.tableHeight = 'calc(100vh - 120px)';
        } else {
          this.tableHeight = 'calc(100vh - 320px)';
        }
      },

      detail() {
        this.$router.push({
          path: '/materialRequirement/requirementListOrder/details'
        });
      }
    }
  };
</script>

<style></style>
