<template>
  <div>
    <el-dialog
      v-if="type === 103"
      :model-value="type === 103"
      :title="title"
      :before-close="fnClose"
    >
      <el-space wrap>
        <el-button type="primary" v-print="'#printContent'">打印</el-button>
      </el-space>
      <br /><br />
      <div id="printContent">
        <p>单位名称:{{ CORP_NAME }}</p>
        <p class="mt-10">任务名称:{{ data.taskInfo.STUDY_NAME }}</p>
        <div class="tc">
          <h3 class="mt-10">{{ data.paperInfo.EXAMNAME }}</h3>
          <p class="mt-10">(满分:{{ data.paperInfo.EXAMSCORE }}分)</p>
        </div>
        <div>
          <template v-if="data.paperInfo.selectList.length > 0">
            <table style="width: 100%">
              <thead>
                <tr>
                  <td style="border: none">
                    <el-divider content-position="left">单选题</el-divider>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in data.paperInfo.selectList"
                  :key="item.QUESTION_ID"
                >
                  <td style="border: none">
                    <p class="mt-10">{{ index + 1 }}.{{ item.QUESTIONDRY }}</p>
                    <el-row class="mt-10">
                      <el-col :span="2"></el-col>
                      <el-col :span="22">
                        <p class="mt-10">A.{{ item.OPTIONA }}</p>
                        <p class="mt-10">B.{{ item.OPTIONB }}</p>
                        <p class="mt-10">C.{{ item.OPTIONC }}</p>
                        <p class="mt-10">D.{{ item.OPTIOND }}</p>
                      </el-col>
                    </el-row>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
          <template v-if="data.paperInfo.multiList.length > 0">
            <table style="width: 100%">
              <thead>
                <tr>
                  <td style="border: none">
                    <el-divider content-position="left">多选题</el-divider>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in data.paperInfo.multiList"
                  :key="item.QUESTION_ID"
                >
                  <td style="border: none">
                    <p class="mt-10">{{ index + 1 }}.{{ item.QUESTIONDRY }}</p>
                    <el-row class="mt-10">
                      <el-col :span="2"></el-col>
                      <el-col :span="22">
                        <p class="mt-10">A.{{ item.OPTIONA }}</p>
                        <p class="mt-10">B.{{ item.OPTIONB }}</p>
                        <p class="mt-10">C.{{ item.OPTIONC }}</p>
                        <p class="mt-10">D.{{ item.OPTIOND }}</p>
                      </el-col>
                    </el-row>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
          <template v-if="data.paperInfo.judgeList.length > 0">
            <table style="width: 100%">
              <thead>
                <tr>
                  <td style="border: none">
                    <el-divider content-position="left">判断题</el-divider>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in data.paperInfo.judgeList"
                  :key="item.QUESTION_ID"
                >
                  <td style="border: none">
                    <p class="mt-10">{{ index + 1 }}.{{ item.QUESTIONDRY }}</p>
                    <el-row class="mt-10">
                      <el-col :span="2"></el-col>
                      <el-col :span="22">
                        <p class="mt-10">A.{{ item.OPTIONA }}</p>
                        <p class="mt-10">B.{{ item.OPTIONB }}</p>
                      </el-col>
                    </el-row>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
        </div>
      </div>
      <div v-html="PRINT_STYLE" />
      <template #footer>
        <el-button @click="fnClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { getStudyTaskInfo, getPaperByTaskId } from "@/request/archives.js";
import { reactive } from "vue";
import { useVModels } from "@vueuse/core";
import { useUserStore } from "@/pinia/user.js";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, type, studyTaskId } = useVModels(props);

const userStore = useUserStore();
const CORP_NAME = userStore.getUserInfo.CORP_NAME;

const data = reactive({
  taskInfo: {},
  paperInfo: {
    selectList: [],
    multiList: [],
    judgeList: [],
  },
});

const emits = defineEmits(["update:visible", "update:current"]);

const fnClose = () => {
  emits("update:current", undefined);
};

const fnGetStudyTaskInfo = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const resData = await getStudyTaskInfo({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (resData && resData.pd) {
      data.taskInfo = resData.pd;
    }
  }
};
await fnGetStudyTaskInfo();

const fnGetPaperByTaskId = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const resData = await getPaperByTaskId({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (resData.paper) {
      if (resData.paper) {
        data.paperInfo = resData.paper;
      }
      data.paperInfo.selectList = [];
      data.paperInfo.multiList = [];
      data.paperInfo.judgeList = [];
      if (resData.questionList && resData.questionList.length > 0) {
        resData.questionList.forEach((question) => {
          if (question.QUESTIONTYPE === "1") {
            data.paperInfo.selectList.push(question);
          } else if (question.QUESTIONTYPE === "2") {
            data.paperInfo.multiList.push(question);
          } else if (question.QUESTIONTYPE === "3") {
            data.paperInfo.judgeList.push(question);
          }
        });
      }
    }
  }
};
await fnGetPaperByTaskId();
</script>

<style scoped lang="scss"></style>
