<!-- 
 * @Description: 教师点名
 * @Author: syy 
 * @Date: 2024-7-15
-->
<template>
  <div class="main-box">
    <TreeFilter
      ref="treeFilter"
      label="personSetName"
      id="personSetId"
      width="300px"
      title="班级管理"
      :show-all="true"
      :request-api="userManageClassManageApi.page"
      @change="changeTreeFilter"
    >
      <template v-slot:label="{ row }">
        <span class="custom-tree-node">
          <span>{{ row.node.label }} {{ row.node.userName ? `(${row.node.userName})` : "" }}</span>
        </span>
      </template>
    </TreeFilter>
    <div class="table-box">
      <ProTable ref="proTable" title="任务列表" :columns="columns" rowKey="id" :request-api="attendanceRoolcallApi.getTaskPageList">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <s-button :opt="FormOptEnums.INITIATE" @click="onOpen(FormOptEnums.INITIATE, { personSetId: personSetId }, treeFilter.treeAllData)" />
          <s-button
            type="danger"
            :opt="FormOptEnum.DELETE"
            plain
            suffix="点名任务"
            :disabled="!scope.isSelected"
            @click="onDelete(scope.selectedListIds, '删除点名任务')"
          />
        </template>
        <!-- 表格操作栏 -->
        <template #operation="scope">
          <el-space>
            <s-button link :opt="FormOptEnum.VIEW" @click="onView(scope.row)" />
            <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.personId], `删除点名任务`)" />
          </el-space>
        </template>
      </ProTable>
    </div>
    <!-- 发起新增/编辑表单 -->
    <Form ref="formRef"></Form>
  </div>
</template>
<script setup lang="tsx" name="SysUserPersonnel">
import { attendanceRoolcallApi,userManageClassManageApi} from "@/api";
import { useHandleData } from "@/hooks/useHandleData";
import { FormOptEnum } from "@/enums";
import Form from "./components/form/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();

/** 表单操作类型枚举 */
enum FormOptEnums {
  /** 发起 */
  INITIATE = "发起",
  /* 查看点名任务 */
  VIEWTASK = "查看",
  /* 修改点名记录 */
  EDITTASK = "修改点名记录"
}

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const visible = ref(false); //是否显示人员表单
const proTable = ref<ProTableInstance>();
const treeFilter = ref<any>();
// 表格配置项
const columns: ColumnProps[] = [
  { type: "selection", fixed: "left", width: 50 },
  {
    prop: "cameraName",
    label: "摄像头名称"
  },
  {
    prop: "continueTime",
    label: "持续时间"
  },
  {
    prop: "similarity",
    label: "相似度"
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
const onView = (row: any) => {
  router.push( {
    path:'/roolcall/detail',
    query: {
      taskId: row.taskId,
      personSetId:row.personSetId
    }
  });
};
// 发起任务表单引用
const formRef = ref<InstanceType<typeof Form> | null>(null);

/**
 * 打开表单
 * @param opt  操作类型
 * @param record  记录
 */
 function onOpen(opt: FormOptEnums, record: {},treeAllData:any) {
  formRef.value?.onOpen({ opt: opt, record: record,treeAllData:treeAllData, successful: RefreshTable });
}



/**
 * 任务删除
 * @param ids  id数组
 */
 async function onDelete(ids: string[], msg: string) {
  if(ids.length === 0){
    ElMessage({
      message: '请选择要删除的人员',
      type: 'warning'
    });
    return
  }
  // 二次确认 => 请求api => 刷新表格
  await useHandleData(attendanceRoolcallApi.delete, {id: ids.join(",") }, msg);
  RefreshTable(); //刷新表格
}

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

/** 班级切换 */
const personSetId = ref<number | string>()
function changeTreeFilter(val: number | string) {
  personSetId.value = val
  proTable.value!.pageable.pageNum = 1;
  proTable.value!.searchParam.personSetId = val;
  proTable.value!.search();
}
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}
</style>
