teachcloud-print-web/src/modules/exam/components/createExamAndPrintTask/InfoExamTask.vue

<template>
  <div class="info-exam-task">
    <div class="part-box part-box-pad part-box-border part-box-gray">
      <el-form
        ref="examTaskComp"
        :model="examTask"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item prop="semesterId" label="使用学期：">
              <semester-select
                v-model="examTask.semesterId"
                class="width-full"
                default-select-in-used
                @change="semesterChange"
              ></semester-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="examId" label="考试：">
              <exam-select
                v-model="examTask.examId"
                :semester-id="examTask.semesterId"
                :clearable="false"
                class="width-full"
                @change="examChange"
              ></exam-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门：">
              {{ teachingRoomName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="courseId" label="课程（代码）：">
              <el-select
                v-model="examTask.courseId"
                placeholder="请选择"
                filterable
                class="width-full"
                :disabled="!examTask.examId"
                @change="courseChange"
              >
                <el-option-group
                  v-for="item in courses"
                  :key="item.label"
                  :label="item.label"
                >
                  <el-option
                    v-for="course in item.options"
                    :key="course.id"
                    :value="course.id"
                    :label="`${course.name}（${course.code}）`"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="paperNumber" label="试卷编号：">
              <el-input
                v-model.trim="examTask.paperNumber"
                placeholder="试卷编号不填写时会自动生成"
                :maxlength="50"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="teacherName" label="拟卷教师：">
              <el-input
                v-model.trim="examTask.teacherName"
                placeholder="请输入拟卷教师"
                :maxlength="50"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="启用AB卷：">
              <el-switch
                v-model="examTask.openAb"
                @change="openAbChange"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="apply-content task-detail">
      <div class="task-body">
        <div
          v-if="checkPrivilege('button', 'SelectTikuPaper', 'TaskApplyManage')"
          class="mb-4 tab-btns"
        >
          <el-button
            v-for="tab in tabs"
            :key="tab.val"
            size="medium"
            :type="curTab == tab.val ? 'primary' : 'default'"
            @click="selectMenu(tab.val)"
            >{{ tab.name }}
          </el-button>
        </div>
        <table class="table mb-2">
          <colgroup>
            <col width="90" />
            <col width="60" />
            <col width="280" />
            <col />
            <col v-if="!IS_REBUILD" width="80" />
          </colgroup>
          <tr>
            <th>备用卷</th>
            <th>卷型</th>
            <th>试卷文件</th>
            <th>
              答题卡
              <span v-if="examTaskInstr" class="tips-markedness">
                ({{ examTaskInstr }})
              </span>
            </th>
            <th v-if="!IS_REBUILD">操作</th>
          </tr>
          <template v-for="(paperAttachment, pindex) in paperAttachments">
            <tr
              v-for="(attachment, index) in paperAttachment.paperAttachmentIds"
              :key="`${pindex}-${index}`"
            >
              <td
                v-if="index === 0"
                :rowspan="paperAttachment.paperAttachmentIds.length"
              >
                卷{{ paperAttachment.serialNumber }}
              </td>
              <td>{{ attachment.name }}</td>

              <td v-if="IS_TIKU_TAB">
                <div class="box-justify">
                  <el-button
                    type="text"
                    class="btn-primary box-grow"
                    @click="toSelect(attachment)"
                  >
                    <i
                      :class="[
                        'icon',
                        attachment.attachmentId
                          ? 'icon-files-act'
                          : 'icon-files',
                      ]"
                    ></i
                    >{{ attachment.filename || "选择试卷" }}
                  </el-button>
                  <el-button
                    type="text"
                    class="btn-primary box-static"
                    :disabled="!attachment.paperUrl"
                    @click="toViewPaper(attachment)"
                    >预览</el-button
                  >
                </div>
              </td>
              <td v-else>
                <el-button
                  type="text"
                  class="btn-primary"
                  @click="toUpload(attachment)"
                >
                  <i
                    :class="[
                      'icon',
                      attachment.attachmentId ? 'icon-files-act' : 'icon-files',
                    ]"
                  ></i
                  >{{
                    attachment.attachmentId
                      ? attachment.filename
                      : "点击上传试卷文件"
                  }}
                </el-button>
              </td>
              <template v-if="IS_TIKU_TAB">
                <td
                  v-if="index === 0"
                  :rowspan="paperAttachment.paperAttachmentIds.length"
                >
                  <el-select
                    v-model="attachment.cardId"
                    placeholder="请选择"
                    style="width: 260px; margin-right: 10px"
                    @change="(val) => tkCardChange(val, attachment)"
                  >
                    <el-option
                      v-for="item in attachment.cards"
                      :key="item.id"
                      :value="item.id"
                      :label="item.title"
                    >
                      <div class="box-justify">
                        <div class="box-grow">{{ item.title }}</div>
                        <el-button
                          class="btn-danger btn-icon box-static"
                          type="text"
                          icon="el-icon-remove"
                          @click="toDeleteCard(item, attachment)"
                        ></el-button>
                      </div>
                    </el-option>
                  </el-select>
                  <el-button
                    class="btn-primary"
                    type="text"
                    :disabled="!attachment.cardId"
                    @click="toViewCard(attachment)"
                    >预览</el-button
                  >
                  <el-button
                    v-if="!IS_REBUILD"
                    class="btn-primary"
                    type="text"
                    :disabled="!attachment.cardId"
                    @click="toEditCard(attachment)"
                    >编辑</el-button
                  >
                </td>
              </template>
              <template v-else>
                <td
                  v-if="index === 0"
                  :rowspan="paperAttachment.paperAttachmentIds.length"
                >
                  <el-select
                    class="mr-2"
                    v-model="attachment.cardId"
                    placeholder="请选择"
                    style="width: 200px"
                    filterable
                    @change="cardChange(attachment)"
                  >
                    <el-option
                      v-for="item in cards"
                      :key="item.id"
                      :value="item.id"
                      :label="item.title"
                      :disabled="item.disabled"
                    >
                      <div class="box-justify">
                        <div class="box-grow">
                          <span
                            :class="[
                              item.type === 'GENERIC'
                                ? 'color-success'
                                : 'color-primary',
                              'mr-1',
                              {
                                'color-danger': item.used,
                              },
                            ]"
                            >[{{ item.type === "GENERIC" ? "通" : "专" }}]</span
                          >
                          {{ item.title }}
                        </div>
                        <el-button
                          v-if="item.type !== 'GENERIC'"
                          class="btn-danger btn-icon box-static"
                          type="text"
                          icon="el-icon-remove"
                          @click="toDeleteCard(item, attachment)"
                        ></el-button>
                      </div>
                    </el-option>
                  </el-select>
                  <span
                    v-if="attachment.cardId"
                    :class="[
                      attachment.cardType === 'GENERIC'
                        ? 'color-success'
                        : 'color-primary',
                      'mr-1',
                      {
                        'color-danger': attachment.used,
                      },
                    ]"
                    >[{{
                      attachment.cardType === "GENERIC" ? "通" : "专"
                    }}]</span
                  >
                  <el-button
                    class="btn-primary"
                    type="text"
                    :disabled="!attachment.cardId"
                    @click="toViewCard(attachment)"
                    >预览</el-button
                  >
                  <template v-if="!IS_REBUILD">
                    <el-button
                      class="btn-primary"
                      type="text"
                      :disabled="
                        !attachment.cardId ||
                        (attachment.cardType === 'GENERIC' &&
                          attachment.createMethod !== 'STANDARD')
                      "
                      @click="toCopyCard(attachment)"
                      >复制</el-button
                    >
                    <el-button
                      class="btn-primary"
                      type="text"
                      :disabled="
                        !attachment.cardId ||
                        attachment.cardType === 'GENERIC' ||
                        !(!attachment.used && attachment.createId === user.id)
                      "
                      @click="toEditCard(attachment)"
                      >编辑</el-button
                    >
                    <el-button
                      v-if="index === 0"
                      class="btn-primary"
                      type="text"
                      :disabled="!canCreateCard"
                      @click="toCreateCard(attachment)"
                      >新建</el-button
                    >
                  </template>
                </td>
              </template>
              <td
                v-if="!IS_REBUILD && index === 0"
                :rowspan="paperAttachment.paperAttachmentIds.length"
                class="text-right"
              >
                <el-button
                  v-if="pindex === paperAttachments.length - 1"
                  class="btn-primary btn-icon"
                  type="text"
                  icon="el-icon-circle-plus"
                  @click="addAtachment"
                ></el-button>
                <el-button
                  class="btn-danger btn-icon"
                  type="text"
                  icon="el-icon-remove"
                  @click="deleteAttachment(pindex)"
                ></el-button>
              </td>
            </tr>
          </template>
          <tr v-if="!paperAttachments.length">
            <td colspan="5">
              <p class="tips-info text-center">暂无数据</p>
            </td>
          </tr>
        </table>

        <h4 class="mb-2">
          附件<span>（最多4个，仅限{{ attachmentFormat.join("、") }}文件）</span
          >：
        </h4>
        <div class="image-list">
          <div
            v-for="(item, index) in imageAttachments"
            :key="`image${index}`"
            class="image-item"
          >
            <img
              :src="item.url"
              :alt="item.filename"
              title="点击查看大图"
              @click="toPreview(index)"
            />
            <div class="image-delete">
              <i
                class="el-icon-delete-solid"
                @click="deletePaperConfirmAttachment(item)"
              ></i>
            </div>
          </div>
          <div
            v-if="paperConfirmAttachments.length < 4"
            class="image-item image-add"
            title="上传附件"
            @click="toUploadPaperConfirm"
          >
            <i class="el-icon-plus"></i>
          </div>
          <br />
          <div
            class="audio-item"
            v-for="(item, index) in audioAttachments"
            :key="`audio${index}`"
          >
            <audio :src="item.url" :alt="item.filename" controls></audio>
            <div class="audio-delete">
              <i
                class="el-icon-delete-solid"
                @click="deletePaperConfirmAttachment(item)"
              ></i>
            </div>
          </div>
        </div>

        <h4 class="mb-2">附件说明：</h4>
        <el-input
          class="mb-2"
          v-model="examTaskDetail.remark"
          type="textarea"
          resize="none"
          :rows="2"
          :maxlength="100"
          clearable
          show-word-limit
          placeholder="建议不超过100个字"
        ></el-input>
      </div>
    </div>

    <!-- upload-paper-dialog -->
    <upload-paper-dialog
      :paper-attachment="curAttachment"
      :upload-type="curUploadType"
      @confirm="uploadConfirm"
      ref="UploadPaperDialog"
    ></upload-paper-dialog>
    <!-- image-preview -->
    <simple-image-preview
      :cur-image="curImage"
      @on-prev="toPrevImage"
      @on-next="toNextImage"
      ref="SimpleImagePreview"
    ></simple-image-preview>
    <!-- ModifyCard -->
    <modify-card ref="ModifyCard" @modified="cardModified"></modify-card>
    <!-- SelectTikuPaperDialog -->
    <select-tiku-paper-dialog
      ref="SelectTikuPaperDialog"
      :row="curAttachment"
      @confirm="tikuPaperSelected"
    ></select-tiku-paper-dialog>
    <!-- CardBuildDialog -->
    <card-build-dialog
      ref="CardBuildDialog"
      :presetData="cardBuildPresetData"
      @confirm="cardBuildConfirm"
    ></card-build-dialog>

    <!-- card-preview-dialog -->
    <card-preview-dialog
      ref="CardPreviewDialog"
      :card-id="curAttachment.cardId"
      show-watermark
    ></card-preview-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import UploadPaperDialog from "../UploadPaperDialog.vue";
import SimpleImagePreview from "@/components/SimpleImagePreview";
import ModifyCard from "../../../card/components/ModifyCard.vue";
import SelectTikuPaperDialog from "./SelectTikuPaperDialog.vue";
import { COMMON_CARD_RULE_ID } from "../../../../constants/enumerate";
import { cardForSelectList } from "../../api";
import {
  courseQuery,
  deleteCard,
  examConfigByExamIdOrgId,
} from "../../../base/api";
import { copyCard } from "../../../card/api";

import CardBuildDialog from "../../../card/components/CardBuildDialog.vue";
import CardPreviewDialog from "../../../card/components/CardPreviewDialog.vue";
import { deepCopy } from "@/plugins/utils";

// type=GENERIC时， 为通卡，不可复制，不可编辑，可预览。
// type=CUSTOM时，可复制，不可编辑，如果是当前自己任务的题卡，才可编辑。
export default {
  name: "info-exam-task",
  components: {
    UploadPaperDialog,
    SimpleImagePreview,
    ModifyCard,
    SelectTikuPaperDialog,
    CardBuildDialog,
    CardPreviewDialog,
  },
  data() {
    return {
      tabs: [
        {
          name: "上传本地试卷",
          val: "upload",
        },
        {
          name: "从题库选择试卷",
          val: "tiku",
        },
      ],
      curTab: "upload",
      user: {},
      task: {},
      rules: {
        semesterId: [
          {
            required: true,
            message: "请选择使用学期",
            trigger: "change",
          },
        ],
        examId: [
          {
            required: true,
            message: "请选择考试",
            trigger: "change",
          },
        ],
        teachingRoomId: [
          {
            required: true,
            message: "请选择机构",
            trigger: "change",
          },
        ],
        courseId: [
          {
            required: true,
            message: "请选择课程",
            trigger: "change",
          },
        ],
        paperNumber: [
          {
            message: "试卷编号不能超过50个字符",
            max: 50,
            trigger: "change",
          },
        ],
        teacherName: [
          {
            message: "拟卷教师不能超过50个字符",
            max: 50,
            trigger: "change",
          },
        ],
      },
      examTask: {},
      cards: [],
      courses: [],
      semesters: [],
      teachingRoomName: "",
      cardRuleName: "全部通卡",
      // card-build
      cardBuildPresetData: {},
      // exam-task-detail
      examTaskDetail: [],
      paperConfirmAttachmentId: {
        attachmentId: "",
        filename: "",
        url: "",
        fileType: "",
      },
      paperAttachments: [],
      paperConfirmAttachments: [],
      curAttachment: {},
      curUploadType: "paper",
      abc: "abcdefghijklmnopqrstuvwxyz".toUpperCase(),
      examTaskInstr: this.$ls.get("schoolInfo", { examTaskInstr: "" })
        .examTaskInstr,
      attachmentFormat: ["jpg", "png", "mp3"],
      // image-preview
      curImage: {},
      curImageIndex: 0,
    };
  },
  computed: {
    ...mapState("exam", [
      "infoExamTask",
      "infoExamTaskDetail",
      "infoExamPrintPlan",
    ]),
    maxFetchCount() {
      return this.paperAttachments.length < 1
        ? 1
        : this.paperAttachments.length;
    },
    canCreateCard() {
      return (
        this.examTask.courseId &&
        this.examTask.examId &&
        this.examTask.cardRuleId !== COMMON_CARD_RULE_ID
      );
    },
    IS_TIKU_TAB() {
      return this.curTab === "tiku";
    },
    IS_REBUILD() {
      return this.examTask.category === "REBUILD";
    },
    imageAttachments() {
      return this.paperConfirmAttachments.filter(
        (item) => item.fileType === "image"
      );
    },
    audioAttachments() {
      return this.paperConfirmAttachments.filter(
        (item) => item.fileType === "audio"
      );
    },
  },
  watch: {
    "examTask.examId": function (val, oldval) {
      if (val !== oldval) this.examAndRoomChange();
    },
    "examTask.teachingRoomId": function (val, oldval) {
      if (val !== oldval) this.examAndRoomChange();
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations("exam", ["updateTaskInfo"]),
    initData() {
      this.user = this.$ls.get("user", {});
      const userOrg = this.user.orgInfo;
      this.teachingRoomName = userOrg.name;
      this.examTask = { ...this.infoExamTask, teachingRoomId: userOrg.id };
      this.paperAttachments = this.examTaskDetail.map((item) => {
        const paperAttachmentIds = item.paperAttachmentIds
          ? JSON.parse(item.paperAttachmentIds)
          : [];
        return {
          ...item,
          paperAttachmentIds,
        };
      });

      if (!this.paperAttachments.length) {
        this.addAtachment();
      }

      this.paperConfirmAttachments = this.examTask.paperConfirmAttachmentIds
        ? JSON.parse(this.examTask.paperConfirmAttachmentIds)
        : [];

      this.getCourses();
      this.getCardList();

      this.$nextTick(() => {
        this.$refs.examTaskComp.clearValidate();
      });
    },
    openAbChange() {
      if (this.examTask.openAb) {
        this.paperAttachments.forEach((paperAttachment) => {
          const attachment = paperAttachment.paperAttachmentIds[0];
          paperAttachment.paperAttachmentIds.push(
            Object.assign(deepCopy(attachment), {
              name: "B",
              attachmentId: "",
              filename: "",
              paperId: null,
              paperUrl: null,
              pages: 0,
            })
          );
        });
      } else {
        this.paperAttachments.forEach((paperAttachment) => {
          paperAttachment.paperAttachmentIds =
            paperAttachment.paperAttachmentIds.slice(0, 1);
        });
      }
    },
    async selectMenu(tab) {
      const result = await this.$confirm(
        "更改类型会清空已设置数据，确定要更改类型？",
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;

      this.paperAttachments = [];
      this.addAtachment();

      this.curTab = tab;
    },
    async getCardList() {
      if (!this.examTask.courseId || !this.examTask.examId) return;
      const data = await cardForSelectList({
        courseId: this.examTask.courseId,
        examId: this.examTask.examId,
      });
      this.cards = data || [];
      if (this.IS_REBUILD) {
        this.cards = this.cards.filter((item) => item.type === "GENERIC");
      }
    },
    async getTkCardList(attachment) {
      if (
        !this.examTask.courseId ||
        !this.examTask.examId ||
        !attachment.paperId
      )
        return;
      const data = await cardForSelectList({
        courseId: this.examTask.courseId,
        examId: this.examTask.examId,
        paperId: attachment.paperId,
      });
      attachment.cards = (data || []).map((item) => {
        return {
          id: item.id,
          title: item.title,
          type: item.type,
          createId: item.createId,
          makeMethod: item.makeMethod,
          used: item.used,
        };
      });
    },
    async getCourses() {
      if (!this.examTask.teachingRoomId || !this.examTask.examId) return;
      const res = await courseQuery({
        teachingRoomId: this.examTask.teachingRoomId,
        examId: this.examTask.examId,
      });
      const teachingCourseIds = res.teachCourseList.map((item) => item.id);
      this.courses = [
        {
          label: "课程管理",
          options: res.teachCourseList,
        },
        {
          label: "开课学院",
          options: res.basicCourseList.filter(
            (item) => !teachingCourseIds.includes(item.id)
          ),
        },
      ];
    },
    semesterChange(val) {
      this.examTask.paperName = val.name;
    },
    examChange(val) {
      if (!val.id) return;
      this.examTask.examModel = val.examModel;
      this.examTask.category = val.category;
      // this.clearTaskData();

      this.examTask.courseId = "";
      this.getCourses();
      this.courseChange();
    },
    courseChange(val) {
      if (val) {
        const courseList = this.courses.map((item) => item.options).flat();
        const course = courseList.find((item) => item.id === val);
        this.examTask.courseName = course.name;
      } else {
        this.examTask.courseName = "";
      }
      this.clearTaskData();
      this.updateTaskInfo({ infoExamTask: this.examTask });
    },
    clearTaskData() {
      this.paperAttachments = [];
      this.addAtachment();

      this.cards = [];
      this.getCardList();
    },
    updateExamTaskDetail() {
      if (this.examTask.openAb) {
        this.paperAttachments.forEach((paperAttachment) => {
          const aAttachment = paperAttachment.paperAttachmentIds[0];
          Object.assign(paperAttachment.paperAttachmentIds[1], {
            cardId: aAttachment.cardId,
            cardType: aAttachment.cardType,
            createMethod: aAttachment.createMethod,
            cardTitle: aAttachment.cardTitle,
            used: aAttachment.used,
            createId: aAttachment.createId,
          });
        });
      }
      this.examTaskDetail = this.paperAttachments.map((item) => {
        return {
          ...item,
          paperAttachmentIds: JSON.stringify(item.paperAttachmentIds),
        };
      });
    },
    async examAndRoomChange() {
      this.updateTaskInfo({ infoExamTask: this.examTask });

      const { examId, teachingRoomId } = this.examTask;
      if (examId && teachingRoomId) {
        const examPrintPlan = await examConfigByExamIdOrgId({
          examId,
          orgId: teachingRoomId,
        });
        this.examTask.cardRuleId = examPrintPlan.cardRuleId;
        this.examTask.review = examPrintPlan.review;
        this.examTask.includePaper =
          examPrintPlan.printContent.indexOf("PAPER") !== -1;
        this.updateExamTaskDetail();

        this.updateTaskInfo({
          infoExamPrintPlan: Object.assign(
            {},
            this.infoExamPrintPlan,
            examPrintPlan
          ),
          infoExamTask: this.examTask,
          infoExamTaskDetail: this.examTaskDetail,
        });
      }
    },
    async cardChange(attachment) {
      const card = this.cards.find((item) => item.id === attachment.cardId);
      if (!card) return;

      attachment.cardType = card.type;
      attachment.createMethod = card.createMethod;
      attachment.cardTitle = card.title;
      attachment.used = card.used;
      attachment.createId = card.createId;
    },
    updateAttachmentBFromA(attachment) {
      if (!this.examTask.openAb) return;

      const pos = this.getAttachmentPos(attachment);
      if (!pos) return;

      const paperAttachment = this.paperAttachments[pos.pindex];
      const aAttachment = paperAttachment.paperAttachmentIds[0];
      Object.assign(paperAttachment.paperAttachmentIds[1], {
        cardId: aAttachment.cardId,
        cardType: aAttachment.cardType,
        createMethod: aAttachment.createMethod,
        cardTitle: aAttachment.cardTitle,
        used: aAttachment.used,
        createId: aAttachment.createId,
      });
    },
    async toCreateCard(attachment) {
      if (!this.examTask.cardRuleId) {
        this.$message.error("题卡规则缺失！");
        return;
      }
      const res = await this.$prompt("请输入题卡名称?", "提示", {
        type: "warning",
        showInput: true,
        inputPlaceholder: "请输入题卡名称",
        inputValidator: (val) => {
          if (!val) return "请输入题卡名称！";
          if (val.length > 50) return "题卡名称不得超过50个字符！";
          return true;
        },
      }).catch(() => {});
      if (!res || res.action !== "confirm") return;
      this.curAttachment = { ...attachment };
      this.$ls.set("prepareTcPCard", {
        courseId: this.examTask.courseId,
        courseName: this.examTask.courseName,
        schoolName: this.$ls.get("schoolName"),
        makeMethod: "SELF",
        cardName: res.value,
        cardRuleId: this.examTask.cardRuleId,
        type: "CUSTOM",
        createMethod: "STANDARD",
      });
      this.$refs.ModifyCard.open();
    },
    toEditCard(attachment) {
      this.curAttachment = { ...attachment };
      // 这里只允许新建标准专卡
      this.$ls.set("prepareTcPCard", {
        id: attachment.cardId,
        courseId: this.examTask.courseId,
        courseName: this.examTask.courseName,
        schoolName: this.$ls.get("schoolName"),
        makeMethod: "SELF",
        cardRuleId: this.examTask.cardRuleId,
        type: "CUSTOM",
        createMethod: "STANDARD",
      });
      this.$refs.ModifyCard.open();
    },
    toViewCard(attachment) {
      this.curAttachment = { ...attachment };
      this.$refs.CardPreviewDialog.open();
    },
    async toCopyCard(attachment) {
      this.curAttachment = { ...attachment };
      const newCardId = await copyCard(
        attachment.toCopyCardId,
        this.examTask.courseId
      );
      this.cardModified({ id: newCardId });
    },
    async cardModified(data) {
      // data: {id,title}
      if (!data.id) return;

      const pos = this.getAttachmentPos(this.curAttachment);
      if (!pos) return;

      if (this.IS_TIKU_TAB) {
        this.paperAttachments[pos.pindex].paperAttachmentIds[
          pos.index
        ].cardTitle = data.title;
        await this.getTkCardList(this.curAttachment);
        return;
      }

      await this.getCardList();
      let card = this.cards.find((item) => item.id === data.id);
      if (!card) return;

      Object.assign(
        this.paperAttachments[pos.pindex].paperAttachmentIds[pos.index],
        {
          cardId: card.id,
          cardType: card.type,
          createMethod: card.createMethod,
          cardTitle: card.title,
          used: card.used,
          createId: card.createId,
        }
      );
    },
    tkCardChange(card, attachment) {
      attachment.cardTitle = card.title;
    },
    async toDeleteCard(card, attachment) {
      const confirm = await this.$confirm(
        `确定要删除题卡【${card.title}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteCard(card.id);
      this.$message.success("删除成功！");
      if (attachment.cardId === card.id) {
        attachment.cardId = null;
        attachment.cardTitle = "";
      }

      if (this.IS_TIKU_TAB) {
        attachment.cards = attachment.cards.filter(
          (item) => item.id !== card.id
        );
      } else {
        await this.getCardList();
      }
    },
    async checkData() {
      const valid = await this.$refs.examTaskComp.validate().catch(() => {});
      if (!valid) return Promise.reject();

      this.updateExamTaskDetail();

      const paperAttachments = this.paperAttachments
        .map((item) => item.paperAttachmentIds)
        .flat();

      if (this.IS_TIKU_TAB) {
        const paperValid = !paperAttachments.some((item) => !item.paperId);
        if (!paperValid) {
          this.$message.error("请完成试卷选择！");
          return Promise.reject();
        }

        const cardValid = !paperAttachments.some((item) => !item.cardId);
        if (!cardValid) {
          this.$message.error("有试卷类型未选择题卡！");
          return Promise.reject();
        }
        return Promise.resolve(true);
      }

      // 设置了入库强制包含试卷时，校验试卷是否上传。
      // 未设置入库强制包含试卷时，若有试卷上传，则需要上传全部。若无试卷上传，则通过。
      if (this.examTask.includePaper) {
        const attachmentValid = !paperAttachments.some(
          (item) => !item.attachmentId
        );
        if (!attachmentValid) {
          this.$message.error("请完成试卷文件上传！");
          return Promise.reject();
        }
      } else {
        const hasUploadPaperAttachments = paperAttachments.filter(
          (item) => item.attachmentId
        );
        if (
          hasUploadPaperAttachments.length > 0 &&
          hasUploadPaperAttachments.length !== paperAttachments.length
        ) {
          this.$message.error("有试卷文件未完成上传！");
          return Promise.reject();
        }
      }

      // if (!this.paperConfirmAttachments.length) {
      //   this.$message.error("请上传附件！");
      //   return;
      // }

      const cardValid = !paperAttachments.some((item) => !item.cardId);
      if (!cardValid) {
        this.$message.error("有试卷类型未选择题卡！");
        return Promise.reject();
      }
      //   const usedCards = paperAttachments
      //     .filter((item) => item.cardId && item.used)
      //     .map((item) => item.name);
      //   if (usedCards.length) {
      //     this.$message.error(`${usedCards.join()}卷选择的题卡已经被使用过！`);
      //     return Promise.reject();
      //   }

      return Promise.resolve(true);
    },
    updateData() {
      this.updateExamTaskDetail();
      let data = {
        infoExamTask: this.examTask,
        infoExamTaskDetail: this.examTaskDetail,
      };
      this.updateTaskInfo(data);
    },
    emitRelateInfo(type) {
      this.$emit("relate-info-change", this.getData(), type);
    },
    // select-paper
    getAttachmentPos(attachment) {
      const pindex = this.paperAttachments.findIndex(
        (item) => item.serialNumber === attachment.serialNumber
      );
      if (pindex === -1) return;

      const index = this.paperAttachments[pindex].paperAttachmentIds.findIndex(
        (item) => item.name === attachment.name
      );
      if (index === -1) return;

      return { pindex, index };
    },
    toSelect(attachment) {
      if (!this.examTask.courseId) {
        this.$message.error("请先选择课程！");
        return;
      }

      let comparePaperId = null;
      if (this.examTask.openAb) {
        const pos = this.getAttachmentPos(attachment);
        if (!pos) return;
        const paperAttachment = this.paperAttachments[pos.pindex];
        const otherAttachment = paperAttachment.paperAttachmentIds.find(
          (item) => item.name !== attachment.name
        );
        if (otherAttachment) comparePaperId = otherAttachment.paperId;
      }

      this.curAttachment = {
        ...attachment,
        comparePaperId,
        courseId: this.examTask.courseId,
        examId: this.examTask.examId,
        uuid: this.examTask.uuid,
      };
      this.$refs.SelectTikuPaperDialog.open();
      // this.tikuPaperSelected({ id: "1", name: "paper-name" });
    },
    async tikuPaperSelected(data) {
      this.cardBuildPresetData = {
        examId: this.examTask.examId,
        courseId: this.examTask.courseId,
        courseName: this.examTask.courseName,
        schoolName: this.$ls.get("schoolName"),
        makeMethod: "SELF",
        cardName: "",
        cardRuleId: this.examTask.cardRuleId,
        type: "CUSTOM",
        createMethod: "STANDARD",
        paperId: data.id,
        paperName: data.name,
        uuid: this.examTask.uuid,
      };
      this.$refs.CardBuildDialog.open();
    },
    cardBuildConfirm(data) {
      if (!data.success) {
        this.$message.error(data.message);
        return;
      }
      const pos = this.getAttachmentPos(this.curAttachment);
      if (!pos) return;

      const info = data.data;
      this.curAttachment = {
        ...this.paperAttachments[pos.pindex].paperAttachmentIds[pos.index],
      };

      Object.assign(
        this.paperAttachments[pos.pindex].paperAttachmentIds[pos.index],
        {
          paperId: this.cardBuildPresetData.paperId,
          cardType: this.cardBuildPresetData.type,
          createMethod: this.cardBuildPresetData.createMethod,
          filename: this.cardBuildPresetData.paperName,
          cardId: info.id,
          cardTitle: info.title,
          uuid: info.uuid,
          attachmentId: info.attachmentId,
          paperUrl: info.paperUrl,
        }
      );
      this.getTkCardList(
        this.paperAttachments[pos.pindex].paperAttachmentIds[pos.index]
      );
    },
    toViewPaper(attachment) {
      if (!attachment.paperUrl) return;
      window.open(attachment.paperUrl);
    },
    // exam-task-detail edit
    addAtachment() {
      const serialNumber = this.paperAttachments.length + 1;
      const newAttachment = {
        name: "A",
        serialNumber,
        attachmentId: "",
        filename: "",
        paperId: null,
        paperUrl: null,
        uuid: this.examTask.uuid,
        cardId: "",
        cardType: "",
        createMethod: "",
        cardTitle: "",
        pages: 0,
        used: false,
        createId: null,
        cards: [],
      };
      const paperAttachment = {
        serialNumber,
        paperType: "",
        paperAttachmentIds: [],
      };
      paperAttachment.paperAttachmentIds.push(newAttachment);

      if (this.examTask.openAb) {
        paperAttachment.paperAttachmentIds.push(
          Object.assign(deepCopy(newAttachment), { name: "B" })
        );
      }
      this.paperAttachments.push(paperAttachment);
    },
    deleteAttachment(index) {
      if (this.paperAttachments.length <= 1) {
        this.$message.error("试卷类型数量不得少于1");
        return;
      }
      this.paperAttachments.splice(index, 1);
      this.paperAttachments.forEach((item, itemIndex) => {
        item.serialNumber = itemIndex + 1;
        item.paperAttachmentIds.forEach((attachment) => {
          attachment.serialNumber = item.serialNumber;
        });
      });
    },
    toUpload(attachment) {
      this.curUploadType = "paper";
      this.curAttachment = {
        ...attachment,
      };
      this.$refs.UploadPaperDialog.open();
    },
    toUploadPaperConfirm() {
      if (this.paperConfirmAttachments.length >= 4) return;
      this.curUploadType = "paperConfirm";
      this.curAttachment = {
        ...this.paperConfirmAttachmentId,
      };
      this.$refs.UploadPaperDialog.open();
    },
    uploadConfirm(attachment, uploadType) {
      if (uploadType === "paper") {
        const pos = this.getAttachmentPos(attachment);
        if (!pos) return;

        this.paperAttachments[pos.pindex].paperAttachmentIds.splice(
          pos.index,
          1,
          {
            ...attachment,
          }
        );
      } else {
        this.paperConfirmAttachments.push(attachment);
      }
    },
    deletePaperConfirmAttachment(data) {
      const index = this.paperConfirmAttachments.findIndex(
        (item) => item.url === data.url
      );
      this.paperConfirmAttachments.splice(index, 1);
    },
    // cardConfirm(data) {
    //   this.examTaskDetail = this.$objAssign(this.examTaskDetail, data);
    // },
    // image-preview
    toPreview(index) {
      this.curImageIndex = index;
      this.selectImage(index);
      this.$refs.SimpleImagePreview.open();
    },
    selectImage(index) {
      this.curImage = this.imageAttachments[index];
    },
    toPrevImage() {
      if (this.curImageIndex === 0) {
        this.curImageIndex = this.imageAttachments.length - 1;
      } else {
        this.curImageIndex--;
      }

      this.selectImage(this.curImageIndex);
    },
    toNextImage() {
      if (this.curImageIndex === this.imageAttachments.length - 1) {
        this.curImageIndex = 0;
      } else {
        this.curImageIndex++;
      }

      this.selectImage(this.curImageIndex);
    },
  },
};
</script>