<template>
  <div>
    <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
      <ProjectSelect v-model:value="projectId" :projectId="projectId" />
      <span class="tw-mr-4"></span>
      <CourseSelect v-model:value="courseId" :rootOrgId="rootOrgId" />
      <span class="tw-mr-4"></span>
      <CourseTypeSelect v-model:value="courseType" />
      <span class="tw-mr-4"></span>
      <PaperTypeSelect v-model:value="paperType" />
      <span class="tw-mr-4"></span>
      <a-button class="query-btn" @click="search">查询</a-button>

      <div class="tw-float-right tw-flex tw-gap-2">
        <a-button @click="goAllAnalysis">整体分析</a-button>
        <a-button @click="goBack">返回</a-button>
      </div>
    </div>

    <div class="tw-bg-white tw-p-5 tw-rounded-xl">
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="{
          pageSize: pageSize,
          current: pageNo,
          total: totalElements,
          showTotal: () => ``,
          onChange: (pageNoChanged, pageSizeChanged) => {
            pageNo = pageNoChanged;
            pageSize = pageSizeChanged;
          },
        }"
      >
        <template #course="{ record }">
          <a>{{ `${record.courseName}(${record.courseCode})` }}</a>
        </template>
        <template #action="{ record }">
          <span>
            <a-button @click="goPaperAnalysis(record)">查看分析结果</a-button>
          </span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMainStore } from "@/store";
import { goBack } from "@/utils/utils";
import { watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import ProjectSelect from "@/components/ProjectSelect.vue";
import { Course_Type, Paper } from "@/types";
import { getPaperList } from "@/api/paperManagementPage";
import router from "@/router";

const store = useMainStore();
store.currentLocation = "项目管理 / 项目列表 / 试卷列表";

let rootOrgId = $ref(undefined as unknown as number);
let courseId = $ref(undefined as undefined | number);
let courseType = $ref(undefined as unknown as Course_Type);
let paperType = $ref(undefined as undefined | string);
const route = useRoute();
const projectId = +route.params.projectId;

let data = $ref<Paper[]>([]);
let pageSize = $ref(10);
let pageNo = $ref(1);
let totalElements = $ref(0);

async function search() {
  await fetchData();
}

watch(() => [pageNo, pageSize], fetchData);

async function fetchData() {
  const res = await getPaperList({
    projectId,
    courseId,
    courseType,
    paperType,
    pageSize,
    pageNo,
  });
  // console.log(res);
  data = res.data.content;
  pageNo = res.data.pageNo;
  pageSize = res.data.pageSize;
  totalElements = res.data.totalElements;
}

const columns = [
  {
    title: "科目",
    dataIndex: "course",
    slots: { customRender: "course" },
  },
  {
    title: "试卷类型",
    dataIndex: "paperType",
  },
  {
    title: "试卷名称",
    dataIndex: "paperName",
  },
  {
    title: "有效样本数",
    dataIndex: "totalCount",
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];

onMounted(async () => {
  rootOrgId = store.userInfo.rootOrgId;
  await search();
});

async function goAllAnalysis() {
  await router.push(`/project/allAnalysis/${projectId}`);
}

async function goPaperAnalysis(record: Paper) {
  await router.push(`/project/${projectId}/paperAnalysis/${record.id}`);
}
</script>
