<!-- 
 * @Description: 教师点名
 * @Author: yxq 
 * @Date: 2024-7-16
-->
<template>
  <div class="table-box">
    <ProTable ref="proTable" title="教师点名" :columns="columns" :data="data">
      <!-- 表格操作栏 -->
      <template #operation="scope">
        <el-space>
          <s-button
            :disabled="!scope.row.noFaceNum"
            link
            prefix="人工"
            :opt="FormOptEnum.EDIT"
            suffix="确认"
            @click="onOpen(FormOptEnum.VIEW, scope.row)"
          />
        </el-space>
      </template>
    </ProTable>
    <ReturnConfirm ref="ReturnConfirmRef" />
  </div>
</template>
<script setup lang="ts">
import { attendanceStudentsReturn, AttendanceStudentsReturn } from "@/api";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { FormOptEnum } from "@/enums";
import ReturnConfirm from "./components/returnConfirm/index.vue";
const data = ref([
  {
    louceng: "3",
    qinshibianhao: "306",
    qinshirenshu: "6",
    guiqinNum: "5",
    noFaceNum: "1"
  },
  {
    louceng: "3",
    qinshibianhao: "307",
    qinshirenshu: "8",
    guiqinNum: "6",
    noFaceNum: "2"
  }
]);
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// 表格配置项
const columns: ColumnProps[] = [
  {
    prop: "louceng",
    label: "楼层"
  },
  {
    prop: "qinshibianhao",
    label: "寝室编号"
  },
  {
    prop: "qinshirenshu",
    label: "寝室人数"
  },
  {
    prop: "guiqinNum",
    label: "归寝人数"
  },
  {
    prop: "noFaceNum",
    label: "未归寝人数"
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
const ReturnConfirmRef = ref<InstanceType<typeof ReturnConfirm> | null>(null);
/**
 * 人工确认
 * @param opt  操作类型
 * @param record  弹框数据
 */
function onOpen(opt: FormOptEnum, record: {} | AttendanceStudentsReturn.studentsReturnInfo = {}) {
  switch (opt) {
    case FormOptEnum.VIEW:
      ReturnConfirmRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
      break;
  }
}
// 刷新表格
const RefreshTable = () => {
  proTable.value?.refresh();
};
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
</style>
