<template>
  <!-- 成绩查询 - 成绩单 -->
  <ReportModule
    :showTitle="false"
    :showDescribe="false"
    :showPrintBtn="false"
    tableOrChart="table"
    :currentPage="state.pageInfo.pageNum"
    :pageSize="state.pageInfo.pageSize"
    :pageSizes="[50, 100]"
    :total="state.pageInfo.total"
    @update:pageSize="handleSizeChange"
    @update:currentPage="handleCurrentChange"
  >
    <template #title_left>
      <el-input
        v-model="state.keyWord"
        clearable
        style="width: 200px"
        placeholder="请输入学号或姓名"
        class="input_with"
        @input="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>

      <span class="count_item"
        >应考：{{ state.tableCount.examStudentCount }}人</span
      >
      <span class="count_item">实考：{{ state.tableCount.normalCount }}人</span>
      <span class="count_item orange"
        >缺考：{{ state.tableCount.missExamCount }}人</span
      >
    </template>
    <template #module_table_chart>
      <el-table
        :data="state.tableData"
        border
        height="500"
        v-loading="state.tableLoading"
        :element-loading-text="state.loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#ffffff"
      >
        <el-table-column
          type="index"
          :index="GetIndexNumber"
          align="center"
          width="70"
          label="序号"
          fixed="left"
        ></el-table-column>
        <template v-for="item in state.staticHeaderData">
          <el-table-column
            v-if="item.display"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            min-width="100"
          />
        </template>
        <el-table-column
          v-for="(item, index) in state.answerDataTitle"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          min-width="100"
        >
          <template #default="scope">{{
            scope.row?.dynamicsData?.answerData?.[index] || "-"
          }}</template>
        </el-table-column>
      </el-table>
    </template>
  </ReportModule>
</template>

<script lang="ts" setup>
import ReportModule from "@/components/ReportModule.vue";
import {
  studentTranscriptTitle,
  queryJointStudentStatistics,
  studentTranscript,
} from "@/api/analysis";
import { useAnalysisStore } from "@/store/analysis";
import { Search } from "@element-plus/icons-vue";
import { onMounted, reactive, watch } from "vue";

interface TableColumn {
  prop: string;
  label: string;
  display?: boolean;
  [key: string]: any;
}

interface TableCount {
  examStudentCount: number | string;
  normalCount: number | string;
  missExamCount: number | string;
}

interface PageInfo {
  pageSize: number;
  pageNum: number;
  total: number;
}

interface State {
  keyWord: string;
  tableData: any[];
  staticHeaderData: TableColumn[];
  answerDataTitle: TableColumn[];
  tableCount: TableCount;
  pageInfo: PageInfo;
  tableLoading: Boolean;
  loadingText: String;
}

const analysisStore = useAnalysisStore();

const state = reactive<State>({
  keyWord: "",
  tableData: [],
  staticHeaderData: [],
  answerDataTitle: [],
  tableCount: {
    examStudentCount: 0,
    normalCount: 0,
    missExamCount: 0,
  },
  pageInfo: {
    pageSize: 50,
    pageNum: 1,
    total: 0,
  },
  tableLoading: true,
  loadingText: "加载中……",
});

/** 获取表头 */
const getStudentTranscriptTitle = async () => {
  if (!analysisStore.filterObject) return;
  try {
    const res = await studentTranscriptTitle({
      ...analysisStore.filterObject,
      topicControl: 0,
    });
    if (res.code === 200) {
      state.staticHeaderData = res.data?.title?.staticHeaderData || [];
      state.answerDataTitle =
        res.data?.title?.dynamicsHeaderData?.answerDataTitle || [];
    }
  } catch (err) {
    console.error("获取表头失败：", err);
  }
};

/** 获取顶部统计 */
const getTableCount = async () => {
  if (!analysisStore.filterObject) return;
  try {
    const res = await queryJointStudentStatistics({
      ...analysisStore.filterObject,
      topicControl: 0,
      queryStr: state.keyWord,
    });
    if (res.code === 200) {
      state.tableCount = res.data || {};
    }
  } catch (err) {
    console.error("获取统计数据失败：", err);
  }
};

/** 获取表格数据 */
const getTableData = async () => {
  if (!analysisStore.filterObject) return;
  try {
    state.tableLoading = true;
    const res = await studentTranscript({
      ...analysisStore.filterObject,
      topicControl: 0,
      queryStr: state.keyWord,
      pageParam: {
        pageNum: state.pageInfo.pageNum,
        pageSize: state.pageInfo.pageSize,
      },
    });
    if (res.code === 200) {
      state.tableData = res.data?.listData || [];
      state.pageInfo.total = Number(res.data?.total || 0);
    }
    state.tableLoading = false;
  } catch (err) {
    console.error("获取表格数据失败：", err);
  }
};
//获取序号
const GetIndexNumber = (index: number) => {
  let indexCount =
    (state.pageInfo.pageNum - 1) * state.pageInfo.pageSize + index + 1;
  return indexCount;
};
// 分页 & 搜索
const handleCurrentChange = (val: number) => {
  state.pageInfo.pageNum = val;
  getTableData();
};

const handleSizeChange = (val: number) => {
  state.pageInfo.pageSize = val;
  state.pageInfo.pageNum = 1;
  getTableData();
};

const handleSearch = () => {
  state.pageInfo.pageNum = 1;
  getTableData();
};

// 初始化
const pageInit = () => {
  getStudentTranscriptTitle();
  getTableCount();
  getTableData();
};

// 监听筛选条件
watch(
  () => analysisStore.filterObject,
  async () => {
    pageInit();
  },
  { deep: true },
);

onMounted(() => {
  pageInit();
});
</script>

<style lang="scss" scoped>
.input_with {
  margin-right: 10px;
}

.count_item {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 24px;
  margin-left: 10px;

  &.orange {
    color: #fb9f34;
  }
}

.checkbox_group {
  :deep(.el-checkbox) {
    margin-right: 10px;

    &:first-child {
      margin-right: 20px;
    }
  }
}
</style>
