<template>
  <!-- 成绩查询 - 成绩单 -->
  <ReportModule
    ref="reportModuleRef"
    :showTitle="false"
    :showDescribe="false"
    :showPrintBtn="false"
    tableOrChart="table"
    :currentPage="state.pageInfo.pageNum"
    :pageSize="state.pageInfo.pageSize"
    :pageSizes="[50, 100]"
    :total="state.pageInfo.total"
    @ChangePageSize="ChangePageSize"
    @ChangeCurrentPage="ChangeCurrentPage"
    @ExportExcel="ExportExcel"
  >
    <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 #title_right>
      <el-checkbox-group v-model="state.checkList" class="checkbox_group">
        <el-checkbox
          v-if="state.groupDataTitleData.length"
          label="显示分组"
          value="group"
        />
        <el-checkbox
          v-if="state.scoreDataTitleData.length"
          label="显示小题"
          value="question"
        />
      </el-checkbox-group>
    </template>
    <template #module_table_chart>
      <el-table
        :data="state.tableData"
        border
        stripe
        ref="tableRef"
        :height="state.tableHeight"
        v-loading="state.tableLoading"
        :element-loading-text="state.loadingText"
        :element-loading-spinner="loadingSvgIcon"
        element-loading-background="#ffffff"
      >
        <el-table-column
          type="index"
          :index="GetIndexNumber"
          align="center"
          width="70"
          label="序号"
          fixed="left"
        ></el-table-column>
        <el-table-column
          v-for="item in state.staticHeaderData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          min-width="80"
          fixed="left"
        >
          <template #default="scope">
            <span
              v-if="
                scope.row.score != '缺考' &&
                scope.row.score != '违纪' &&
                item.prop === 'studentUserName'
              "
              @click="OpenStudentPaper(scope.row)"
              style="cursor: pointer; color: #2e64fa"
            >
              {{ scope.row[item.prop] }}
            </span>
            <template v-else>
              {{ scope.row?.[item.prop] || "-" }}
            </template>
          </template>
        </el-table-column>
        <template v-if="state.checkList.includes('group')">
          <el-table-column
            v-for="(item, index) in state.groupDataTitleData"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            min-width="100"
          >
            <template #header>
              <template v-if="item.label.length > 6">
                <el-tooltip effect="dark" :content="item.label" placement="top">
                  <span>{{ item.label }}</span>
                </el-tooltip>
              </template>
              <template v-else>
                {{ item.label }}
              </template>
            </template>
            <template #default="scope">{{
              scope.row?.dynamicsData?.groupData?.[index] || "-"
            }}</template>
          </el-table-column>
        </template>
        <template v-if="state.checkList.includes('question')">
          <el-table-column
            v-for="(item, index) in state.scoreDataTitleData"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            min-width="100"
          >
            <template #default="scope">{{
              scope.row?.dynamicsData?.scoreData?.[index] || "-"
            }}</template>
          </el-table-column>
        </template>
      </el-table>
    </template>
  </ReportModule>
  <StudentPaper
    :modelValue="state.showStudentPaperDialog"
    :paperInfo="state.paperInfo"
    :pageTitle="state.paperTitle"
    @updateModelValue="UpdateModelValue"
  ></StudentPaper>
</template>

<script lang="ts" setup>
import ReportModule from "@/components/ReportModule.vue";
import StudentPaper from "@/components/StudentPaper.vue"; //学生答题卡组件
import {
  studentTranscriptTitle,
  queryJointStudentStatistics,
  studentTranscript,
  studentTranscriptExcel,
} from "@/api/analysis";
import { useAnalysisStore } from "@/store/analysis";
import { downloadExcel } from "@/utils/exportExcel";
import { Search } from "@element-plus/icons-vue";
import {loadingSvgIcon} from "@/utils/common";
import {
  nextTick,
  ref,
  onMounted,
  onUnmounted,
  reactive,
  computed,
  watch,
} from "vue";
import { throttle } from "lodash";

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;
  checkList: string[];
  tableHeight: Number;
  tableData: any[];
  staticHeaderData: TableColumn[];
  groupDataTitleData: TableColumn[];
  scoreDataTitleData: TableColumn[];
  tableCount: TableCount;
  pageInfo: PageInfo;
  tableLoading: Boolean;
  loadingText: String;
  paperInfo: {
    examPaperId: string; //考试科目id
    platformNumber: string; //学籍号平台号
    questionId: string; //题目id
  };
  paperTitle: String; //学生试卷标题
  showStudentPaperDialog: Boolean; //是否显示学生答题卡弹窗
}

const analysisStore = useAnalysisStore();
const getExamName = computed(() => {
  return analysisStore.analysisExamInfo.examName || "";
});

const state = reactive<State>({
  keyWord: "",
  checkList: [],
  tableHeight: 1000, //表格高度
  tableData: [],
  staticHeaderData: [],
  groupDataTitleData: [],
  scoreDataTitleData: [],
  tableCount: {
    examStudentCount: 0,
    normalCount: 0,
    missExamCount: 0,
  },
  pageInfo: {
    pageSize: 50,
    pageNum: 1,
    total: 0,
  },
  tableLoading: true,
  loadingText: "加载中,请稍后...",
  paperInfo: {
    examPaperId: "", //考试科目id
    platformNumber: "", //学籍号平台号
    questionId: "", //题目id
  }, //学生试卷信息
  paperTitle: "", //学生试卷标题
  showStudentPaperDialog: false, //是否显示学生答题卡弹窗
});
const tableRef = ref<any>(null);
const reportModuleRef = ref<any>(null);
/** 获取表头 */
const GetStudentTranscriptTitle = async () => {
  if (!analysisStore.filterObject) return;
  try {
    const res = await studentTranscriptTitle({
      ...analysisStore.filterObject,
      topicControl: 0,
    });
    if (res.code === 200) {
      const staticHeaderData = res.data?.title?.staticHeaderData || [];
      state.staticHeaderData = staticHeaderData.filter(
        (item: { display: any }) => item.display,
      );
      state.groupDataTitleData =
        res.data?.title?.dynamicsHeaderData?.groupDataTitle || [];
      state.scoreDataTitleData =
        res.data?.title?.dynamicsHeaderData?.scoreDataTitle || [];
      let checkList = [];  
      if(state.groupDataTitleData.length){
        checkList.push('group');
      }
      if(state.scoreDataTitleData.length){
        checkList.push('question');
      }
      state.checkList = checkList.length?[checkList[0]]:[];
    }
  } 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 (isInit: boolean = false) => {
  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);
    }
  } catch (err) {
    console.error("获取表格数据失败：", err);
  } finally {
    state.tableLoading = false;
    // 数据加载完成后重置滚动
    nextTick(() => {
      TableScrollTop()
      if(isInit){
        SetTableHeight();
      }
    });
  }
};
//获取序号
const GetIndexNumber = (index: number) => {
  let indexCount =
    (state.pageInfo.pageNum - 1) * state.pageInfo.pageSize + index + 1;
  return indexCount;
};
// 当前页码事件
const ChangeCurrentPage = (val: number) => {
  state.pageInfo.pageNum = val;
  GetTableData();
};
// 每页显示个数事件
const ChangePageSize = (val: number) => {
  state.pageInfo.pageSize = val;
  state.pageInfo.pageNum = 1;
  GetTableData();
};
// 导出Excel
const ExportExcel = () => {
  // 1. 设置加载状态
  reportModuleRef.value?.SetExportLoading?.(true);
  // 2. 参数
  const params = {
    ...analysisStore.filterObject,
    topicControl: 0,
    topicControlName: "成绩单",
    queryStr: state.keyWord,
    pageParam: {
      pageNum: state.pageInfo.pageNum,
      pageSize: state.pageInfo.pageSize,
    },
    staticHeaderData: state.staticHeaderData,
    dynamicsHeaderDataMap: {},
  };
  if (state.checkList.includes("group")) {
    params.dynamicsHeaderDataMap.groupDataTitle = state.groupDataTitleData;
  }
  if (state.checkList.includes("question")) {
    params.dynamicsHeaderDataMap.scoreDataTitle = state.scoreDataTitleData;
  }
  // 3. 调用通用下载方法，并在完成后重置加载状态
  downloadExcel(studentTranscriptExcel, params).finally(() => {
    reportModuleRef.value?.SetExportLoading?.(false);
  });
};
//打开答题卡弹窗
const OpenStudentPaper = (row, prop) => {
  state.paperInfo = {
    examPaperId: analysisStore.filterObject.subjectId, //考试科目id
    platformNumber: row.studentRegistrationCode, //学籍号平台号
    questionId: "", //题目id
  };
  state.paperTitle = `${getExamName.value}-${analysisStore.filterObject.subjectName}-${row.className}-${row.studentUserName}`; //学生姓名
  state.showStudentPaperDialog = true;
};
//更新弹窗状态
const UpdateModelValue = (val: boolean) => {
  state.showStudentPaperDialog = val;
};
// 搜索事件
const HandleSearch = () => {
  state.pageInfo.pageNum = 1;
  GetTableData();
};
// 表格内容滚动置顶
const TableScrollTop = () => {
  const el = tableRef.value?.$el;
  if (!el) return;

  // 在下一帧执行，确保 DOM 已更新
  requestAnimationFrame(() => {
    // 尝试多种选择器，兼容不同版本
    const scrollWrap =
      el.querySelector(".el-scrollbar__wrap") ||
      el.querySelector(".el-table__body-wrapper") ||
      el.querySelector(".el-table__fixed-body-wrapper");

    if (scrollWrap) {
      scrollWrap.scrollTop = 0;
      scrollWrap.scrollLeft = 0;
    } else {
      // 若仍未找到，延迟再试一次（表格可能尚未完全渲染）
      setTimeout(() => {
        const retry =
          el.querySelector(".el-scrollbar__wrap") ||
          el.querySelector(".el-table__body-wrapper");
        if (retry) {
          retry.scrollTop = 0;
          retry.scrollLeft = 0;
        }
      }, 200);
    }
  });
};
// 设置表格高度
const SetTableHeight = () => {
  const container = document.getElementsByClassName("report_content")?.[0];
  if (container) {
    state.tableHeight = container.clientHeight - 152;
  }
};
// 窗口大小改变事件
const HandleResize = throttle(() => {
  SetTableHeight();
}, 200);
// 初始化
const PageInit = () => {
  state.pageInfo.pageNum = 1;
  state.checkList = [];
  GetStudentTranscriptTitle();
  GetTableCount();
  GetTableData(true);
};

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

onMounted(() => {
  window.addEventListener("resize", HandleResize);
  PageInit();
});
onUnmounted(() => {
  // 移除监听 防止内存泄漏
  window.removeEventListener("resize", HandleResize);
});
</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>
