<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getTableList"
      :initParam="initParam"
      :toolButton="_toolButton"
      :border="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="">
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增科目</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row.subject_id)">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteSub(scope.row.subject_id)">删除</el-button>
      </template>
    </ProTable>

    <SubjectDialog ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive } from "vue";
import { Subject } from "@/api/interface";
import { ElMessageBox, ElMessage } from "element-plus";

import ProTable from "@/components/ProTable/index.vue";
import SubjectDialog from "@/views/base/subject/components/SubjectDialog.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getSubjectList, deleteSubject } from "@/api/modules/base";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";

// ProTable 实例
const proTable = ref<ProTableInstance>();
const initParam = reactive({ stage_id: "" });

const _toolButton = ["refresh"];

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

const stageSelectChange = async e => {
  console.log(e);
  initParam.stage_id = e;
};

// 表格配置项
const columns = reactive<ColumnProps<Subject.ResSubjectList>[]>([
  { type: "index", width: 70, label: "序号" },
  { prop: "subject_id", label: "学科ID" },
  { prop: "subject_name", label: "学科名称" },
  { prop: "subject_code", label: "学科代码" },
  {
    prop: "stage_id",
    label: "学段",
    enum: [
      { stage_id: 0, stage_name: "通用" },
      { stage_id: 4, stage_name: "小学" },
      { stage_id: 5, stage_name: "初中" },
      { stage_id: 6, stage_name: "高中" },
      { stage_id: 7, stage_name: "职业" }
    ],
    search: { el: "select", props: { onChange: stageSelectChange } },
    fieldNames: { label: "stage_name", value: "stage_id" }
  },
  { prop: "sort_id", label: "排序号" },
  { prop: "operation", label: "操作", width: 200 }
]);

const dialogRef = ref<InstanceType<typeof SubjectDialog> | null>(null);

const openDrawer = (title: string, subject_id: number = 0) => {
  const params = {
    title,
    row: {},
    getTableList: proTable.value?.getTableList,
    updateId: subject_id
  };
  dialogRef.value?.acceptParams(params);
};

// 删除学科信息
const deleteSub = async (subject_id: number) => {
  ElMessageBox.confirm(`是否删除该学科信息?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  }).then(async () => {
    await deleteSubject({ subject_id });
    ElMessage.success({ message: `成功！` });

    proTable.value?.getTableList();
  });
};
</script>
