<template>
  <div class="app-container">
    <Filter
      v-model="filterData"
      :config="filterConfig"
      @handleAction="handleFilterData"
      @updateSchool="handleUpdateSchool"
    />
    <!-- 表格 -->
    <Table :xbTable="xbTable" @tablePageChange="handleTablePageChange">
      <template v-slot:operation="scope">
        <el-button
          link
          type="primary"
          icon="View"
          @click="handleView(scope.row)"
          >查看</el-button
        >
      </template>
    </Table>
  </div>
</template>

<script setup name="PersonageReport">
import router from "@/router";
import Filter from "@/views/smartCampus/components/Filter/index.vue";
import Table from "@/views/smartCampus/components/Table/index.vue";
import { useFetchGradeClassTree } from "@/utils/dropDownData";
import useUserStore from "@/store/modules/user";
import {
  getClassListApi,
  getPersonReportApi,
  getGradeListApi,
} from "@/api/smartCampus/index";
const { proxy } = getCurrentInstance();
const selectConfig = ref({
  gradeDataTree: [],
});
const filterData = ref({}); //过滤
const filterConfig = computed(() => {
  return [
    {
      comName: "admin",
      label: "学校名称",
      prop: "tenantId",
      placeholder: "请选择",
      clearable: true,
    },
    {
      comName: "el-tree-select",
      label: "班级",
      placeholder: "请选择",
      prop: "search",
      clearable: true,
      options: selectConfig.value.gradeDataTree,
      selectConfig: {
        label: "name",
        value: "name",
        children: "children",
      },
    },
    {
      comName: "el-input",
      label: "学生姓名",
      prop: "stuName",
      placeholder: "请输入",
      clearable: true,
    },
    {
      comName: "el-input",
      label: "学号",
      prop: "stuNo",
      placeholder: "请输入",
      clearable: true,
    },
    {
      comName: "el-select",
      label: "学科",
      prop: "subject",
      clearable: true,
      options: [{ label: "英语", value: "英语" }],
      selectConfig: {
        label: "label",
        value: "value",
      },
    },
  ];
});

const xbTable = ref({
  loading: false,
  columns: [
    { prop: "gradeName", label: "年级" },
    { prop: "className", label: "班级" },
    { prop: "stuName", label: "姓名" },
    { prop: "stuNo", label: "学号" },
    { label: "操作", slot: "operation" },
  ],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  getPersonReportApi({ ...xbTable.value.pagination, ...filterData.value }).then(
    (res) => {
      xbTable.value.tableData = res.rows;
      xbTable.value.loading = false;
      xbTable.value.pagination.total = res.total;
    }
  );
}
// 过滤按钮
function handleFilterData(type) {
  switch (type.value) {
    case "search":
      getList();
      break;
    case "reset":
      xbTable.value.pagination.pageNum = 1;
      getList();
      if (useUserStore().showAllTenant) fetchGradeTree();
      break;
  }
}
// 超管身份
function handleUpdateSchool() {
  filterData.value.search = "";
  fetchGradeTree();
}
// 表格分页
function handleTablePageChange(val) {
  xbTable.value.pagination.pageSize = val.limit;
  xbTable.value.pagination.pageNum = val.page;
  getList();
}

// 查看个人报告
function handleView(row) {
  router.push({
    path: "/smartCampus/studyReport/viewPersonageReport/index/" + row.id,
  });
}

// 获取年级树状
async function fetchGradeTree() {
  selectConfig.value.gradeDataTree = await useFetchGradeClassTree({
    tenantId: filterData.value.tenantId,
  });
}
// 超管
function handleAdminRole() {
  if (useUserStore().showAllTenant) {
    xbTable.value.columns.unshift({ prop: "tenantName", label: "学校名称" });
  }
}
handleAdminRole();
getList();
fetchGradeTree();
</script>
