<template>
  <a-modal v-model:open="visible" :width="334" centered @ok="confirm">
    <template #title> 更改卷型号 </template>

    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ style: { width: '90px' } }"
    >
      <a-form-item label="识别结果">{{ recogData.result.join() }}</a-form-item>
      <a-form-item label="识别图片">
        <div class="paper-type-img">
          <img :src="recogData.areaImg" alt="识别图片" />
        </div>
      </a-form-item>
      <a-form-item label="更改卷型">
        <ul>
          <li
            :class="['type-item', { 'is-active': paperType === '#' }]"
            @click="selectPaperType('#')"
          >
            空
          </li>
          <li
            v-for="item in paperTypeBarcodeContent"
            :key="item"
            :class="['type-item', { 'is-active': paperType === item }]"
            @click="selectPaperType(item)"
          >
            {{ item }}
          </li>
        </ul>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";

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

import { RecogBlock } from "@/utils/recog/recog";

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

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

const props = defineProps<{
  recogData: RecogBlock;
}>();

const emit = defineEmits(["modified"]);

const paperTypeBarcodeContent = ref<string[]>([]);
const userStore = useUserStore();
const paperType = ref("");

async function getConfig() {
  const res = await getBaseDataConfig({ examId: userStore.curExam.id });
  paperTypeBarcodeContent.value = res.paperTypeBarcodeContent || [];
}

function selectPaperType(val: string) {
  paperType.value = val;
}

function confirm() {
  if (!paperType.value) {
    message.error("请选择卷型");
    return;
  }
  emit("confirm");
}

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