<template>
  <div id="manualScheduling">
    <el-card class="box-card">
      <div class="table-box">
        <el-input placeholder="请输入内容" v-model="input3" class="search">
          <el-button slot="append" icon="el-icon-search">搜索</el-button>
        </el-input>
        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :initLoad="false"
          :columns="columns"
          :datasource="datasource"
          :pageSize="20"
          row-key="code"
          cache-key="roductionPlanTable"
        >
          <template v-slot:selection="{ row }">
            <el-radio class="radio" v-model="currentId" :label="row.id"
              ><i></i
            ></el-radio>
          </template>
        </ele-pro-table>
      </div>
      <div class="control">
        <div class="btn-list">
          <el-button type="primary">插单/变更</el-button>
          <el-button type="primary">确认</el-button>
          <el-button type="primary">下发</el-button>
        </div>
        <div> </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { getList } from '@/api/productionPlan/index.js';
  import { fieldModel } from '@/api/saleOrder';
  export default {
    data() {
      return {
        newColumns: [],
        input3: '',
        tableData: [
          {
            count: 1,
            name: '张三',
            age: 20,
            sex: '男'
          }
        ]
      };
    },
    created() {
      this.getFieldModel();
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            slot: 'selection'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'code',
            prop: 'code',
            action: 'code',
            label: '计划编号',
            align: 'center',
            minWidth: 160,
            sortable: true
          },
          {
            prop: 'productName',
            label: '名称',
            align: 'center',
            minWidth: 140
          },
          {
            prop: 'priority',
            label: '优先级',
            align: 'center',
            minWidth: 120,
            slot: 'priority',
            sortable: 'custom'
          },
          {
            prop: 'requiredFormingNum',
            label: '数量',
            align: 'center'
          },
          {
            prop: 'priority',
            label: '交期',
            align: 'center',
            minWidth: 120
          }
        ];
      }
    },
    methods: {
      getFieldModel() {
        fieldModel({ fieldModel: 't_main_category' }).then((res) => {
          let privateColumn = [];
          if (this.activeName == 'first') {
            privateColumn.push({
              columnKey: 'action',
              label: '操作',
              width: 148,
              align: 'center',
              resizable: false,
              fixed: 'right',
              slot: 'action'
            });
          } else {
            privateColumn = [];
          }

          let newRes = res.map((m) => {
            return {
              prop: 'extField.' + m.prop,
              label: m.label,
              align: 'center',
              showOverflowTooltip: true
            };
          });

          this.newColumns = [...this.columns, ...newRes, ...privateColumn];

          this.$forceUpdate();
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getList({
          pageNum: page,
          size: limit,
          timeDimensionPlanType: 1,
          ...where
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #manualScheduling {
    height: calc(100vh - 96px);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .box-card {
      height: 100%;
      width: 100%;

      :deep(.el-card__body) {
        height: 100%;
        width: 100%;
        display: flex;
        .table-box {
          flex: 3;
          height: 100%;
          display: flex;
          flex-direction: column;
          margin-right: 10px;
          .search {
            margin-bottom: 10px;
          }
          .ele-pro-table {
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            .el-table {
              flex: 1;
              // display: flex;
              // flex-direction: column;
              // .el-table__body-wrapper {
              //   flex: 1;
              // }
            }
          }
        }
        .control {
          flex: 2;
          .btn-list {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
</style>
