<template>
  <div class="part-box is-filter">
    <el-space wrap>
      <span>科目：{{ subjectInfo.code }}-{{ subjectInfo.name }}</span>
      <span style="margin-left: 20px"
        >客观总分：{{ subjectInfo.objectiveTotalScore }}</span
      >
      <span style="margin-left: 20px"
        >主观总分：{{ subjectInfo.subjectiveTotalScore }}</span
      >
      <span style="margin-left: 20px"
        >试卷总分：{{ subjectInfo.paperTotalScore }}</span
      >
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-button type="primary" @click="onEdit"> 编辑 </el-button>
      <el-button @click="onReturn">返回</el-button>
    </el-space>
  </div>

  <div class="part-box">
    <el-table
      ref="tableRef"
      v-loading="loading"
      :data="dataList"
      class="page-table"
      border
      stripe
    >
      <el-table-column prop="bigQuestionName" label="大题名称" width="120" />
      <el-table-column prop="bigQuestionNo" label="大题号" width="80" />
      <el-table-column prop="smallQuestionNo" label="小题号" width="80" />
      <el-table-column prop="fullScore" label="满分" width="80" />
      <el-table-column prop="intervalScore" label="间隔分" width="80" />
      <el-table-column prop="questionType" label="选做题分组" width="100" />
      <el-table-column prop="answer" label="选做题区" width="100" />
    </el-table>
  </div>

  <!-- 新增/编辑试卷结构弹窗 -->
  <ModifyPaperStructure
    ref="modifyPaperStructureRef"
    :row-data="curRow"
    :subject-id="subjectId"
    @modified="getList"
  />
</template>

<script setup lang="ts">
  import { reactive, ref, computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { getSubjectDetail, getOptionalQuestionList } from '@/api/subject';
  import type { PaperStructureItem } from '@/api/types/subject';
  import useLoading from '@/hooks/loading';

  import ModifyPaperStructure from './components/ModifyPaperStructure.vue';

  defineOptions({
    name: 'OptionalRuleEdit',
  });

  const route = useRoute();
  const router = useRouter();

  // 从路由参数获取科目ID
  const subjectId = computed(() => Number(route.params.subjectId) || 0);

  const subjectInfo = reactive({
    code: '',
    name: '',
    objectiveTotalScore: 0,
    subjectiveTotalScore: 0,
    paperTotalScore: 0,
  });
  // 获取科目详情信息
  const getSubjectDetailInfo = async () => {
    const res = await getSubjectDetail(subjectId.value);
    subjectInfo.code = res.code;
    subjectInfo.name = res.name;
    subjectInfo.objectiveTotalScore = res.objectiveTotalScore;
    subjectInfo.subjectiveTotalScore = res.subjectiveTotalScore;
    subjectInfo.paperTotalScore = res.paperTotalScore;
  };

  // 获取试卷结构列表
  const { loading, setLoading } = useLoading();
  const dataList = ref<PaperStructureItem[]>([]);
  // 获取试卷结构列表
  const getList = async () => {
    setLoading(true);
    const res = await getOptionalQuestionList(subjectId.value).catch(() => []);
    setLoading(false);
    dataList.value = res || [];
  };

  const onAdd = () => {
    // modifyPaperStructureRef.value?.open();
  };

  const onEdit = () => {
    // modifyPaperStructureRef.value?.open();
  };

  const onReturn = () => {
    router.back();
  };

  onMounted(() => {
    if (subjectId.value) {
      getList();
      getSubjectDetailInfo();
    }
  });
</script>
