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

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
        cache-key="entrust_list_data_2026_10"
        :height="tableHeight"
        :pageSize="20"
        @fullscreen-change="fullscreenChange"
      >
        <template v-slot:code="{ row }">
          <el-link type="primary" :underline="false" @click="goDetail(row)">
            {{ row.code }}
          </el-link>
        </template>

        <template v-slot:action="{ row }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除该需求清单吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
        <!-- <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';
  import {
    getRequirementListPlan,
    deleteRequirementListPlan
  } from '@/api/requirementListPlan';
  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: 'code',
            label: '需求清单号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true,
            slot: 'code'
          },
          {
            prop: 'topCategoryCode',
            label: '顶级产品编号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'topCategoryName',
            label: '顶级产品名称',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'planCode',
            label: '计划编号',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'batchNo',
            label: '批次号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'categoryCode',
            label: '编码',
            width: 150,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryName',
            label: '名称',
            width: 140,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'imgCode',
            label: '零部件图号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categorySize',
            label: '尺寸',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'quantity',
            label: '计划数量',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'measuringUnit',
            label: '计量单位',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'type',
          //   label: '加工类型',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '作业名称',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '承制单位',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '计划类别',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          // {
          //   prop: 'type',
          //   label: '创建人',
          //   width: 100,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 100,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      },

      seekList() {
        return [
          {
            label: '计划编号:',
            value: 'planCode',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '批次号:',
            value: 'batchNo',
            type: 'input',
            labelWidth: 80
          },
          {
            label: '编码:',
            value: 'categoryCode',
            type: 'input',
            labelWidth: 50
          },
          {
            label: '需求清单号:',
            value: 'code',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '顶级产品编号:',
            value: 'topCategoryCode',
            type: 'input',
            labelWidth: 100
          },
          {
            label: '顶级产品名称:',
            value: 'topCategoryName',
            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: {
      async datasource({ page, limit, where }) {
        const res = await getRequirementListPlan({
          ...where,
          pageNum: page,
          size: limit
        });
        return res;
      },

      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },

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

      async remove(row) {
        const ids = [row.id];
        await deleteRequirementListPlan(ids).then((res) => {
          this.$message.success('删除成功');
          this.reload();
        });
      },

      pickOrder(type) {},

      goDetail(item) {
        this.$router.push({
          path: '/requirementListPlan/details',
          query: {
            id: item.id,
            type: 'plan'
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .btn_box {
    margin-bottom: 6px;
  }
</style>
