<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :toolButton="false"> </ProTable>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue";
import { Scheme } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";

import { getStageList, getSubjectList, getSchemeList } from "@/api/modules/base";

const _toolButton = ["refresh"];
const subjectEnum = ref<any>([]);

// ProTable 实例
const proTable = ref<ProTableInstance>();

const getTableList = (params: any) => {
  return getSchemeList(params);
};

const getStageSelect = async () => {
  const res = await getStageList();
  const _data = { data: res.data.list };
  return _data;
};

const stageSelectChange = async e => {
  proTable.value!.searchParam.subject_id = "";
  subjectEnum.value.splice(0, subjectEnum.value.length);
  const res = await getSubjectList({ stage_id: e, pageNum: 1, pageSize: 100 });
  subjectEnum.value.push(...res.data.list);
};

// 表格配置项
const columns = reactive<ColumnProps<Scheme.ResSchemeList>[]>([
  { type: "index", width: 70, label: "序号" },
  { prop: "scheme_id", label: "版本ID" },
  { prop: "scheme_name", label: "版本名称" },
  {
    prop: "stage_id",
    label: "学段",
    enum: getStageSelect,
    search: { el: "select", props: { onChange: stageSelectChange } },
    fieldNames: { label: "stage_name", value: "stage_id" }
  },
  {
    prop: "subject_id",
    label: "学科",
    enum: subjectEnum.value,
    tag: true,
    isShow: false,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "subject_name", value: "subject_id" }
  },
  {
    prop: "type_id",
    label: "类型",
    tag: true,
    enum: [
      { label: "章节目录", value: 1, tagType: "warning" },
      { label: "知识点", value: 2, tagType: "success" }
    ]
  }
  // { prop: "operation", label: "操作", fixed: "right", width: 330 }
]);

onMounted(() => {
  // getStageSelect();
});
</script>

<style></style>
