<template>
  <div class="part-box is-filter">
    <el-space wrap>
      <span>科目：{{ subjectInfo.code }}-{{ subjectInfo.name }}</span>
      <span style="margin-left: 20px"
        >客观总分：{{ subjectInfo.objectiveScore }}</span
      >
      <span style="margin-left: 20px"
        >主观总分：{{ subjectInfo.subjectiveScore }}</span
      >
      <span style="margin-left: 20px"
        >试卷总分：{{ subjectInfo.totalScore }}</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="mainTitle" label="大题名称" width="120" />
      <el-table-column prop="mainNumber" label="大题号" width="80" />
      <el-table-column prop="subNumber" label="小题号" width="80" />
      <el-table-column prop="totalScore" label="满分" width="80" />
      <el-table-column prop="intervalScore" label="间隔分" width="80" />
      <el-table-column prop="selectiveIndex" label="选做题分组" width="100">
        <template #default="scope">
          {{ scope.row.selectiveIndex }}-
          {{ dictFilter.optionalScorePolicy(scope.row.scorePolicy) }}
        </template>
      </el-table-column>
      <el-table-column prop="selectivePart" label="选做题区" width="100">
        <template #default="scope">
          {{ scope.row.selectiveIndex }} - {{ scope.row.selectivePart }}
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 选做题规则 -->
  <OptionalRuleDialog
    ref="optionalRuleDialogRef"
    :subject-code="subjectCode"
    @modified="getList"
  />
  <!-- 新增选做题规则 -->
  <ModifyOptionalQuestionRule
    ref="modifyOptionalQuestionRuleRef"
    :row-data="{}"
    @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 { OptionalQuestionItem } from '@/api/types/subject';
  import useLoading from '@/hooks/loading';
  import { dictFilter } from '@/utils/filter';

  import OptionalRuleDialog from './components/OptionalRuleDialog.vue';
  import ModifyOptionalQuestionRule from './components/ModifyOptionalQuestionRule.vue';

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

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

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

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

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

  const modifyOptionalQuestionRuleRef =
    ref<InstanceType<typeof ModifyOptionalQuestionRule>>();
  const onAdd = () => {
    modifyOptionalQuestionRuleRef.value?.open();
  };

  const optionalRuleDialogRef = ref<InstanceType<typeof OptionalRuleDialog>>();
  const onEdit = () => {
    optionalRuleDialogRef.value?.open();
  };

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

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