<template>
  <a-modal
    v-model:open="visible"
    :width="410"
    style="top: 10vh"
    title="切换考试"
    @ok="confirm"
  >
    <div class="exam-list">
      <a-radio-group v-model:value="choosedExamId">
        <a-radio v-for="item in dataList" :key="item.id" :value="item.id">
          <a-space class="radio-content" align="center" :size="10">
            <div class="rc-id">No.{{ item.id }}</div>
            <div class="rc-name">{{ item.name }}</div>
            <div class="rc-mode">{{ item.mode }}</div>
          </a-space>
        </a-radio>
      </a-radio-group>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { message } from "ant-design-vue";
import { getExamList } from "@/ap/base";
import { ExamItem } from "@/ap/types/base";

import useModal from "@/hooks/useModal";
import { useUserStore } from "@/store";

defineOptions({
  name: "SelectExamDailog",
});

/* modal */
const { visible, open, close } = useModal();
defineExpose({ open, close });

const userStore = useUserStore();

const dataList = ref<ExamItem[]>([]);
const choosedExamId = ref(0);
async function getExams() {
  const res = await getExamList({
    enable: true,
    pageNumber: 1,
    pageSize: 1000,
  });
  dataList.value = res.result || [];
}
getExams();

function confirm() {
  if (!choosedExamId.value) {
    message.error("请选择考试");
    return;
  }

  const curExam = dataList.value.find(
    (item) => item.id === choosedExamId.value
  );
  if (!curExam) return;

  userStore.setCurExam(curExam);
  close();
}

/* init modal */
watch(
  () => visible.value,
  (val) => {
    if (val) {
      modalOpenHandle();
    }
  },
  {
    immediate: true,
  }
);

function modalOpenHandle() {
  choosedExamId.value = userStore.curExam?.id;
}
</script>

<style lang="less" scoped>
.radio-content {
  .rc-id {
    width: 60px;
  }
  .rc-name {
    width: 200px;
  }
  .rc-mode {
    width: 60px;
    color: @text-color3;
  }
}
.exam-list {
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;

  .ant-radio-wrapper {
    margin-bottom: 16px;
    margin-right: 0;
  }
}
</style>
