<template>
  <div class="app-container">
    <Table :xbTable="xbTable" :autoScroll="false">
      <template #action="{ row }">
        <el-button text type="primary" @click="handleAction(row)"
          >查看</el-button
        >
      </template>
    </Table>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import { onMounted, reactive } from "vue";
import { getStudentSubjectScore } from "@/api";
import { getAuthToken } from "@/api/login";
import { newPage } from "@/utils";
import { debounce } from "lodash-es";

const props = defineProps({
  filter: {
    type: Object,
    default: () => ({}),
  },
});

// 知识点模块
const xbTable = ref({
  loading: false,
  columns: [],
  tableData: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10000,
  },
});
/** 查询列表 */
function getList() {
  xbTable.value.loading = true;
  xbTable.value.tableData = [];
  getStudentSubjectScore({
    ...xbTable.value.pagination,
    classId: props.filter.classId,
  })
    .then((res) => {
      if (res.length) {
        xbTable.value.columns = [
          {
            prop: "stuName",
            label: "姓名",
          },
          ...res[0].stuDataList.map((i) => ({
            prop: String(i.subjectId),
            label: i.subjectName,
          })),
          {
            label: "操作",
            slot: "action",
          },
        ];
        xbTable.value.tableData = res.map((i) => {
          const obj = {};
          i.stuDataList.forEach((s) => {
            obj[s.subjectId] = `${s.markScore} / ${s.scoreRate / 100} %`;
          });
          return {
            stuName: i.stuName,
            stuId: i.stuId,
            ...obj,
          };
        });
      }
    })
    .finally(() => {
      xbTable.value.loading = false;
    });
}

// 表格分页
function handleTablePageChange(val) {
  xbTable.value.pagination.pageSize = val.limit;
  xbTable.value.pagination.pageNum = val.page;
  getList();
}

function init() {
  getList();
}

const token = ref("");
const handleAction = debounce(
  async (row) => {
    if (!token.value) {
      const res = await getAuthToken();
      token.value = res.data;
    }
    newPage(
      `${import.meta.env.VITE_CLIENT_HOST}/system/homeWork/statistics?token=${
        token.value
      }&stuId=${row.stuId}`
    );
  },
  1000,
  { leading: true, trailing: false }
);

onMounted(() => {
  init();
});

defineExpose({
  init,
});
</script>
<style scoped lang="scss">
.app-container {
}
</style>
