<!-- 
 * @Description: 人员管理
 * @Author: syy 
 * @Date: 2024-7-15
-->
<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        :pagination="false"
        title="班级管理"
        :columns="columns"
        rowKey="personSetId"
        :request-api="userManageClassManageApi.page"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <s-button suffix="班级" @click="addClass(FormOptEnum.ADD)" />
          <s-button
            type="danger"
            :opt="FormOptEnum.DELETE"
            plain
            suffix="班级"
            :disabled="!scope.isSelected"
            @click="addDelete(scope.selectedListIds, '删除所选班级')"
          />
        </template>
        <!-- 表格操作栏 -->
        <template #operation="scope">
          <el-space>
            <s-button link :opt="FormOptEnum.EDIT" @click="addClass(FormOptEnum.EDIT, scope.row)" />
            <s-button link :opt="FormOptEnum.DELETE" @click="addDelete([scope.row.personSetId], `删除班级`)" />
            <el-dropdown @command="handleCommandTree">
              <el-link type="primary" :underline="false" :icon="ArrowDown"> 更多 </el-link>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="!scope.row.pushUserId" :command="commander(scope.row, cmdEnumTree.AddTeacher)">
                    {{ cmdEnumTree.AddTeacher }}
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.pushUserId" :command="commander(scope.row, cmdEnumTree.UpdateTeacher)">
                    {{ cmdEnumTree.UpdateTeacher }}
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.pushUserId" :command="commander(scope.row, cmdEnumTree.DeleteTeacher)">
                    {{ cmdEnumTree.DeleteTeacher }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </template>
      </ProTable>
      <!-- 人员选择 -->
      <userForm ref="userFormRef" />
    </div>

    <!-- 班级新增/编辑表单 -->
    <FormClass ref="formRefC" />
  </div>
</template>
<script setup lang="tsx" name="SysUserKeyPersonnel">
import { userManageClassManageApi,userManageTeacherApi,SysUserPersonnel,userManageMajorApi,userManageDepartmentApi } from "@/api";
import { useHandleData } from "@/hooks/useHandleData";
import { FormOptEnum } from "@/enums";
import FormClass from "./components/formClass/index.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import userForm from "@/views/monitor/live/components/userForm.vue";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
const majorOptions = ref<any>([])
// 获取专业列表
const getMajorList = async () => {
  const res:any = await userManageMajorApi.list({});
  if (res.code === 200) {
    majorOptions.value = res.data;
  }
};
/* 获取系部 */
const departmentOptions = ref<any>([])
const getDepartmentList = async () => {
  const res:any = await userManageDepartmentApi.list({});
  if (res.code === 200) {
    departmentOptions.value = res.data;
  }
};
// 表格配置项
const columns: ColumnProps<SysUserPersonnel.ClassPage>[] = [
  { type: "selection", fixed: "left", width: 50 },
  {
    prop: "majorId",
    label: "所属专业",
    enum: majorOptions,
    fieldNames: { label: "name", value: "id" },
    search: {
      el: "select",
      span:1,
      props: {
        clearable: false,
        placeholder: "请选择专业",
      },
    },
    isShow: false
  },
  {
    prop: "personSetName",
    label: "班级名称",
    search: { el: "input",span:1, } 
  },
 
  {
    prop: "majorName",
    label: "所属专业",
  },
  {
    prop: "departmentName",
    label: "所属系部",
  },
  {
    prop: "userName",
    label: "班主任"
  },
  
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];


// 班级表单引用
const formRefC = ref<InstanceType<typeof FormClass> | null>(null);

/**
 * 打开班级表单
 * @param opt  操作类型
 * @param record  记录
 */

 function addClass(opt: FormOptEnum, record: {} | SysUserPersonnel.ClassPage = {}) {
  formRefC.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTable });
}

/**
 * 班级删除
 * @param ids  id数组
 */
 async function addDelete(id: string[],msg: string) {
  // 二次确认 => 请求api => 刷新表格
  await useHandleData(userManageClassManageApi.delete, { id:id.join(",") }, msg);
  RefreshTable(); //刷新表格
}

// 刷新表格
const RefreshTable = () => {
  proTable.value?.refresh();
}


/** 更多下拉菜单命令枚举 */
enum cmdEnumTree {
  AddTeacher = "绑定班主任",
  UpdateTeacher = "修改班主任",
  DeleteTeacher = "解绑班主任",
}

/** 树下拉菜单参数接口 */
interface CommandTree {
  row: SysUserPersonnel.ClassPage;
  commander: cmdEnumTree;
}

/**配置command的参数 */
function commander(row: SysUserPersonnel.ClassPage, commander: cmdEnumTree): CommandTree {
  return {
    row: row,
    commander: commander,
  };
}
/**
 * 树更多下拉菜单点击事件
 * @param commandtree
 */
 async function handleCommandTree(commander: CommandTree) {
  switch (commander.commander) {
    case cmdEnumTree.AddTeacher:
      pushPerson(cmdEnumTree.AddTeacher, commander.row)
      break
    case cmdEnumTree.UpdateTeacher:
      pushPerson(cmdEnumTree.UpdateTeacher, commander.row)
      break;
    case cmdEnumTree.DeleteTeacher:
       // 二次确认 => 请求api => 刷新表格
      await useHandleData(userManageTeacherApi.delete, {id: commander.row.teacherId}, '解绑教师');
      RefreshTable(); //刷新表格
    
    break;
  }
}
// 人员选择
// 表单引用
const userFormRef = ref<InstanceType<typeof userForm> | null>(null);
/**
 * 打开表单
 * @param opt  操作类型
 * @param record  记录
 */
function pushPerson(opt: cmdEnumTree, record: {}) {
  userFormRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
}
onMounted(() => {
  // 获取专业下拉数据
  getMajorList();
});
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
</style>
