<template>
  <a-modal
    v-model:open="visible"
    :width="718"
    :footer="false"
    :closable="false"
    :mask="false"
    :maskClosable="false"
    wrapClassName="recog-edit-dialog"
  >
    <div class="recog-edit">
      <a-row align="top" :gutter="8" class="m-b-8px">
        <a-col :span="4">
          <div class="modal-box">
            <p class="box-title">{{ recogTitle }}</p>
            <p class="box-cont">{{ recogTitleDesc }}</p>
          </div>
        </a-col>
        <a-col :span="16">
          <div class="modal-box modal-origin">
            <img v-if="recogData.areaSrc" :src="recogData.areaSrc" alt="截图" />
          </div>
        </a-col>
        <a-col :span="4">
          <div class="modal-box" @click="close">
            <p class="box-title">Esc键</p>
            <p class="box-cont">关闭</p>
          </div>
        </a-col>
      </a-row>
      <a-row align="top" :gutter="8">
        <a-col :span="4">
          <div class="modal-box">
            <p class="box-title">识别结果</p>
            <p class="box-cont">{{ recogResult }}</p>
          </div>
        </a-col>
        <a-col :span="16">
          <div class="modal-box modal-options">
            <a-button
              v-for="option in recogData.options"
              :key="option"
              :type="selectResult.includes(option) ? 'primary' : 'default'"
              @click="selectOption(option)"
              >{{ option }}</a-button
            >
          </div>
        </a-col>
        <a-col :span="4">
          <div class="modal-box" @click="onConfirm">
            <p class="box-title">Enter键</p>
            <p class="box-cont">保存</p>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { message } from "ant-design-vue";
import useModal from "@/hooks/useModal";
import { RecogBlock } from "@/utils/recog/recog";

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

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

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

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

const selectResult = ref([] as string[]);

const titles = {
  question: "客观题",
  absent: "缺考",
  breach: "违纪",
  paperType: "卷型号",
};
const recogTitle = computed(() => {
  return titles[props.recogData.type];
});

const recogTitleDesc = computed(() => {
  if (props.recogData.type === "question") {
    return `#${props.recogData.index}`;
  }
  return "--";
});

const recogResult = computed(() => {
  if (props.recogData.type === "question") {
    return props.recogData.result.join("");
  }
  return "";
});

function selectOption(option: string) {
  if (!props.recogData) return;

  // 单选直接赋值
  if (!props.recogData.multiple) {
    selectResult.value = [option];
    return;
  }

  // 多选情况
  // 空直接赋值，空值与其他互斥
  if (option === "#") {
    selectResult.value = ["#"];
    return;
  }

  let result = selectResult.value.filter((item) => item !== "#");
  if (result.includes(option)) {
    result = result.filter((item) => item !== option);
  } else {
    result.push(option);
  }
  // 保证result的顺序和options的顺序是一致的
  selectResult.value = props.recogData.options.filter((item) =>
    result.includes(item)
  );
}

// 键盘事件
function registKeyEvent() {
  document.addEventListener("keydown", keyEventHandle);
}
function removeKeyEvent() {
  document.removeEventListener("keydown", keyEventHandle);
}

function keyEventHandle(e: KeyboardEvent) {
  if (e.code === "Enter") {
    e.preventDefault();
    onConfirm();
    return;
  }
}

function onConfirm() {
  if (!selectResult.value.length) {
    message.error("请选择答案");
    return;
  }

  emit("confirm", selectResult.value);
  close();
}

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

watch(
  () => props.recogData,
  (val) => {
    if (!val) return;
    selectResult.value = [...props.recogData.result];
  }
);

function modalOpenHandle() {
  selectResult.value = [...props.recogData.result];
  registKeyEvent();
}
</script>
