<template>
  <div>
    <div>
      <span>设置：</span>
      <a-button @click="importModalVisible = true">题型分布设置</a-button>
    </div>

    <div v-if="props.questions.some((q) => q.type === 'TYPE1')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">题型题目难度等级构成分布(一)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE070">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'TYPE1' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'TYPE2')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">题型题目难度等级构成分布(二)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE080">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'TYPE2' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'TYPE3')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">题型题目难度等级构成分布(三)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE090">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'TYPE3' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'CONTENT1')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">内容题目难度等级构成分布(一)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE100">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'CONTENT1' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'CONTENT2')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">内容题目难度等级构成分布(二)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE110">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'CONTENT2' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'CONTENT3')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">内容题目难度等级构成分布(三)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE120">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'CONTENT3' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'ABILITY1')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">能力题目难度等级构成分布(一)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE130">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'ABILITY1' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'ABILITY2')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">能力题目难度等级构成分布(二)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE140">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'ABILITY2' || !q.type)
        "
      />
    </div>

    <div v-if="props.questions.some((q) => q.type === 'ABILITY3')">
      <div class="tw-flex tw-justify-between tw-items-center tw-my-4">
        <h3 class="section-title">能力题目难度等级构成分布(三)</h3>
        <div class="tw-flex tw-gap-2">
          <!-- <a-button @click="openModalDESCRIBE150">说明</a-button> -->
        </div>
      </div>

      <DifficultyDistriTable
        :questions="
          props.questions.filter((q) => q.type === 'ABILITY3' || !q.type)
        "
      />
    </div>

    <a-modal
      v-model:visible="importModalVisible"
      title="题型设置导入"
      okText="确定"
      cancelText="取消"
      @ok="handleImport"
    >
      <a-form>
        <a-form-item label="文件地址">
          <input id="file-input" :multiple="false" type="file" />
        </a-form-item>
        <a-form-item label="下载模板">
          <a-button class="download-tpl-btn" @click="downloadTpl">
            下载模板
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { importQuestionGroups } from "@/api/paperAnalysisPage";
// import EventBus from "@/plugins/eventBus";
import { SASQuestionGroup } from "@/types";
import { downloadFileURL } from "@/utils/utils";
import { message } from "ant-design-vue";
import { h } from "vue";
import DifficultyDistriTable from "./DifficultyDistriTable.vue";

const props = defineProps<{
  questions: SASQuestionGroup[];
  projectId: number;
}>();

// function openModalDESCRIBE070() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE070");
// }
// function openModalDESCRIBE080() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE080");
// }
// function openModalDESCRIBE090() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE090");
// }
// function openModalDESCRIBE100() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE100");
// }
// function openModalDESCRIBE110() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE110");
// }
// function openModalDESCRIBE120() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE120");
// }
// function openModalDESCRIBE130() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE130");
// }
// function openModalDESCRIBE140() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE140");
// }
// function openModalDESCRIBE150() {
//   EventBus.emit("SHOW_SETTING", "DESCRIBE150");
// }

/** <handleImport> */
let importModalVisible = $ref<boolean>(false);
async function handleImport() {
  const files = (document.querySelector("#file-input") as HTMLInputElement)
    .files;
  const fileToImport = files && files[0];
  if (!fileToImport) {
    void message.warn({ content: "请选择文件" });
    return;
  }
  (document.querySelector("#file-input") as HTMLInputElement).value = "";
  const res = await importQuestionGroups(props.projectId, fileToImport);
  if (!res.data.hasError) {
    importModalVisible = false;
    void message.success({ content: "导入成功" });
  } else {
    // eslint-disable-next-line
    const msg = res.data.failRecords.map((v) =>
      h("div", `行号：${v.lineNum}, 错误：${v.msg}`)
    );
    void message.error({
      content: h("span", ["导入失败", ...msg]),
    });
  }
}
/** </handleImport> */

async function downloadTpl() {
  await downloadFileURL("/api/ess/sasQuestionGroup/template");
}
</script>

<style scoped></style>
