<template>
  <div class="page-container">
    <back-box>
      <template slot="title">
        <span>即时测-数据报表</span>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select
          class="sel"
          v-model="query.classId"
          placeholder="选择班级"
          @change="changClazz"
        >
          <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-if="role == 'ROLE_BANZHUREN'"
          class="sel"
          multiple
          collapse-tags
          v-model="query.subjectId"
          placeholder="选择科目"
          @change="_QueryData"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-else
          class="sel"
          v-model="query.subjectId"
          placeholder="选择科目"
          @change="_QueryData"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="d1">
          <el-date-picker
            v-model="query.startDay"
            type="date"
            @change="handleChangeTimeStart"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="query.endDay"
            type="date"
            placeholder="选择日期时间"
            @change="handleChangeTimeEnd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <p class="p1">
          <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
            >今天</span
          >
          <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
            >本周</span
          >
          <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
            >本月</span
          >
          <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']"
            >本季度</span
          >
        </p>
        <el-button type="primary" round @click="_QueryData()">筛选</el-button>
      </div>
    </div>
    <div class="table-box">
      <el-radio-group v-model="tabIndex" style="margin-bottom: 20px">
        <el-radio-button :label="1">单卷测练报表</el-radio-button>
        <el-radio-button :label="2">阶段测练报表</el-radio-button>
      </el-radio-group>
      <div v-if="tabIndex == 1">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :default-sort="{ prop: '', order: 'descending' }"
        >
          <el-table-column
            prop="title"
            label="试卷名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalScore"
            label="卷面分"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="ceyan"
            label="测验人数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="shijian"
            label="测验时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pingjun"
            label="班平均分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="zuigao"
            label="班最高分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="zuidi"
            label="班最低分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="youxiu"
            label="优秀数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.youxiu }}%</template
            ></el-table-column
          >
          <el-table-column
            prop="lianghao"
            label="良好数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.lianghao }}%</template
            ></el-table-column
          >
          <el-table-column
            prop="jige"
            label="及格数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.jige }}%</template
            ></el-table-column
          >
          <el-table-column
            prop="bujige"
            label="不及格数（率）"
            sortable
            align="center"
            ><template slot-scope="scoped"
              >{{ scoped.row.bujige }}%</template
            ></el-table-column
          >
          <el-table-column label="操作" align="center">
            <template slot-scope="scoped">
              <el-tooltip effect="dark" content="详情" placement="top">
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="fa fa-arrow-right"
                  @click="linkTo(scoped.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="修改答案" placement="top">
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="fa fa-file-text"
                  @click="edit(scoped.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="tabIndex == 2">
        <el-table
          :data="tableStage"
          border
          style="width: 100%"
          :default-sort="{ prop: '', order: 'descending' }"
        >
          <el-table-column
            prop="xuehao"
            label="学号"
            align="center"
            fixed
          ></el-table-column>
          <el-table-column
            prop="xingming"
            label="姓名"
            fixed
            align="center"
          ></el-table-column>
          <el-table-column label="阶段汇总" align="center">
            <el-table-column
              prop="totalScore"
              label="总分"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="rank"
              label="排名"
              align="center"
            ></el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in answerList"
            :key="index"
            :label="item.title"
          >
            <el-table-column
              :prop="item.title + 'totalScore'"
              label="成绩"
              align="center"
            ></el-table-column>
            <el-table-column
              :prop="item.title + 'rank'"
              label="班名"
              align="center"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <p class="down" v-if="tabIndex == 2">
        <el-button type="info" plain round icon="fa fa-cloud-download"
          >导出报表</el-button
        >
      </p>
    </div>
    <div class="edit-dia" v-show="dialogVisible" height="100%">
      <div class="back">
        <div class="back-l" @click="dialogVisible = false">
          <i class="fa fa-mail-reply-all"></i>
          <p>修改答案</p>
        </div>
      </div>
      <div class="form-box">
        <div class="answer-title">
          <p class="name">{{ form.title }}</p>
          <p class="totals">卷面总分：{{ form.score }}分</p>
        </div>
        <div v-if="questionList && questionList.length">
          <div v-for="(question, index) in questionList" :key="index">
            <p class="question-title">
              <span>{{ setBigNum(index) }}、</span>
              <span class="title-txt">{{ question.questionTitle }}</span>
              <span>共 {{ question.score }} 分</span>
            </p>
            <ul class="questions-ul">
              <li class="sub-questions">
                <div class="qs-num">题号</div>
                <div class="qs-type">题型</div>
                <div class="qs-score">分数</div>
                <div class="qs-partScore">漏选得分</div>
                <div class="qs-options qs-options2">选项设置</div>
              </li>
              <li
                v-for="(subQuestions, indexs) in question.subQuestions"
                :key="indexs"
              >
                <p
                  class="set-ans-btn"
                  v-if="
                    subQuestions.qusType &&
                    subQuestions.subNum &&
                    subQuestions.subNum > 4
                  "
                >
                  <el-button type="primary" @click="setFormAns(index, indexs)"
                    >批量设置答案</el-button
                  >
                </p>
                <div v-else class="sub-questions">
                  <div class="qs-num">{{ subQuestions.questionIndex }}</div>
                  <div class="qs-type">
                    {{ setSubPro(subQuestions.questionType) }}
                  </div>
                  <div class="qs-score">
                    {{ subQuestions.score }}
                  </div>
                  <div class="qs-partScore">
                    <p v-if="subQuestions.questionType != 3">--</p>
                    <p v-else>{{ subQuestions.partScore }}</p>
                  </div>
                  <div class="qs-options qs-options2">
                    <p v-if="subQuestions.questionType == 5">--</p>
                    <p v-if="subQuestions.questionType == 4" class="answer-box">
                      <span
                        class="answer-s"
                        :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                        @click="subQuestions.correctAnswer = 1"
                        >✓</span
                      >
                      <span
                        class="answer-s"
                        :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                        @click="subQuestions.correctAnswer = 2"
                        >✗</span
                      >
                    </p>
                    <p v-if="subQuestions.questionType == 3" class="answer-box">
                      <template
                        v-for="option in subQuestions.answerOptions.split(',')"
                      >
                        <span
                          v-if="option"
                          class="answer-s"
                          :class="
                            subQuestions.correctAnswer.includes(option)
                              ? 'active'
                              : ''
                          "
                          :key="option"
                          @click="changAnswer(subQuestions, option)"
                          >{{ option }}</span
                        >
                      </template>
                    </p>
                    <p v-if="subQuestions.questionType == 2" class="answer-box">
                      <template
                        v-for="option in subQuestions.answerOptions.split(',')"
                      >
                        <span
                          class="answer-s"
                          v-if="option"
                          :class="
                            subQuestions.correctAnswer == option ? 'active' : ''
                          "
                          :key="option"
                          @click="subQuestions.correctAnswer = option"
                          >{{ option }}</span
                        >
                      </template>
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="btn-box">
          <el-button type="danger" plain round @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button type="primary" round @click="saveAnswer">保存</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="批量设置答案" :visible.sync="diaSetAns" width="400">
      <div class="qs-options">
        <p class="dia-tips">
          请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
        </p>
        <p>{{ setSubPro(formAns.qusType) }}：</p>
        <p class="ipt">
          <el-input
            v-model="formAns.answerList"
            @keydown.native="keydownAnswer($event)"
          ></el-input>
        </p>
        <p class="answer-box">
          <template v-if="formAns.qusType == 4">
            <span
              class="answer-s active"
              @click="
                formAns.answerList.length < formAns.subNum
                  ? (formAns.answerList += '✓')
                  : ''
              "
              >✓</span
            >
            <span
              class="answer-s active"
              @click="
                formAns.answerList.length < formAns.subNum
                  ? (formAns.answerList += '✗')
                  : ''
              "
              >✗</span
            >
          </template>
          <template v-if="formAns.qusType == 3">
            <span
              class="answer-s active"
              v-for="option in formAns.answerOptions"
              :key="option"
              @click="setMultiple(formAns, option)"
              >{{ option }}</span
            >
            <span
              class="answer-s active"
              @click="
                formAns.answerList.split(',').length < formAns.subNum
                  ? (formAns.answerList += ',')
                  : ''
              "
              >,</span
            >
          </template>
          <template v-if="formAns.qusType == 2" class="answer-box">
            <span
              class="answer-s active"
              v-for="option in formAns.answerOptions"
              :key="option"
              @click="
                formAns.answerList.length < formAns.subNum
                  ? (formAns.answerList += option)
                  : ''
              "
              >{{ option }}</span
            >
          </template>
          <span
            class="answer-s delButton"
            @click="formAns.answerList = formAns.answerList.slice(0, -1)"
            >x</span
          >
        </p>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="saveFormAns">确 定</el-button>
        <el-button @click="diaSetAns = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate, deepClone, checkAnswer } from "utils";
export default {
  data() {
    return {
      role: "",
      loading: false,
      dialogVisible: false,
      diaSetAns: false,
      form: {},
      questionList: [],
      formAns: {
        listIndex: 0, //大题位置
        endIndex: 0, //相同题目最后一位题目的questionIndex
        qusType: "", //题目类型
        subNum: 0, //数量
        answerOptions: [], //答案选项
        answerList: "", //答案列表-字符串
      },
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        classId: "",
        subjectId: "",
        startDay: "",
        endDay: "",
        day: "",
      },
      classList: [], //班级
      subjectList: [], //科目
      tabIndex: 1, //选项卡
      tableData: [
        {
          title: "试卷一",
          totalScore: 10,
          ceyan: "40/50",
          shijian: "2022-11-9 21:30至22:30",
          pingjun: 60,
          zuigao: 90,
          zuidi: 50,
          youxiu: 50,
          lianghao: 40,
          jige: 30,
          bujige: 20,
          questionList: [
            {
              questionTitle: "f",
              score: 1,
              subQuestions: [
                {
                  questionIndex: 1,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D",
                  correctAnswer: "B",
                },
                {
                  questionIndex: 2,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "A",
                },
                {
                  questionIndex: 3,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "A",
                },
                {
                  questionIndex: 4,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "A",
                },
                {
                  questionIndex: 5,
                  questionType: 2,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "A",
                },
                {
                  questionIndex: 6,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 7,
                  questionType: 4,
                  score: 1,
                  partScore: 0,
                  selectNum: 0,
                  answerOptions: [],
                  correctAnswer: "1",
                },
                {
                  questionIndex: 8,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 9,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 10,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 11,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 12,
                  questionType: 3,
                  score: 1,
                  partScore: 0,
                  selectNum: 4,
                  answerOptions: "A, B, C, D,E,F",
                  correctAnswer: "AB",
                },
                {
                  questionIndex: 13,
                  questionType: 4,
                  score: 1,
                  partScore: 0,
                  selectNum: 0,
                  answerOptions: [],
                  correctAnswer: "1",
                },
              ],
            },
          ],
        },
        {
          title: "试卷二",
          totalScore: 20,
          ceyan: "30/50",
          shijian: "2022-11-9 21:30至22:30",
          pingjun: 80,
          zuigao: 92,
          zuidi: 53,
          youxiu: 45,
          lianghao: 56,
          jige: 20,
          bujige: 30,
        },
      ],
      tableStage: [
        {
          xuehao: 1,
          xingming: "丁芳菲",
          totalScore: 5,
          rank: 1,
          周测卷20221130totalScore: 10,
          周测卷20221130rank: 0,
          周测卷20221131totalScore: 11,
          周测卷20221131rank: 1,
          周测卷20221132totalScore: 12,
          周测卷20221132rank: 2,
          周测卷20221132totalScore: 13,
          周测卷20221132rank: 3,
        },
        {
          xuehao: 2,
          xingming: "丁芳",
          totalScore: 4,
          rank: 2,
          周测卷20221130totalScore: 20,
          周测卷20221130rank: 3,
          周测卷20221131totalScore: 21,
          周测卷20221131rank: 4,
          周测卷20221132totalScore: 22,
          周测卷20221132rank: 5,
          周测卷20221132totalScore: 22,
          周测卷20221132rank: 5,
        },
      ],
      answerList: [
        //设置多卷内容供tableStage表格数据用
        {
          title: "周测卷20221130",
          totalScore: 6,
          rank: 2,
        },
        {
          title: "周测卷20221131",
          totalScore: 7,
          rank: 3,
        },
        {
          title: "周测卷20221132",
          totalScore: 8,
          rank: 4,
        },
      ],
    };
  },
  async created() {
    this.role = this.$store.getters.info.permissions.find(
      (item) => item.roleName == this.$store.getters.info.showRoleName
    )?.role;
    await this._QueryClassList();
    await this._QuerySubjectList();
    // await this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  methods: {
    linkTo(obj) {
      //去详情
      this.$router.push({
        path: "/testAnalysis",
        query: {
          id: obj.id,
        },
      });
    },
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
      }
      return tit;
    },
    setBigNum(num) {
      let txt = "";
      let bigNum = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
      ];
      txt = bigNum[num];

      return txt;
    },
    setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      let aYear = new Date().getFullYear();
      let aMonth = new Date().getMonth() + 1;
      that.query.day = "";
      that.query.startDay = "";
      that.query.endDay = "";
      switch (index) {
        case 1:
          that.query.day = formatDate(new Date(), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          break;
        case 2:
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
          that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 3:
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 4:
          if (aMonth > 1 && aMonth < 4) {
            aMonth = "01";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "04";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "07";
          } else {
            aMonth = "10";
          }

          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
      }
      this.page = 1;
      this._QueryData();
    },
    handleChangeTimeStart(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.endDay) {
        if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.startDay = "";
        }
      }
    },
    handleChangeTimeEnd(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.startDay) {
        if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.endDay = "";
        }
      }
    },
    keydownAnswer(event) {
      //快速答案设置禁止输入
      if (
        event.key == "Meta" ||
        event.key == "CapsLock" ||
        event.key == "Shift" ||
        event.key == "Enter" ||
        event.key == "Alt" ||
        event.key == "Backspace" ||
        event.key == "Delete" ||
        event.key == "ArrowUp" ||
        event.key == "ArrowDown" ||
        event.key == "ArrowLeft" ||
        event.key == "v" ||
        event.key == "V" ||
        event.key == "ArrowRight"
      ) {
        return;
      } else {
        event.returnValue = "";
      }
    },
    setAnswer(type, ans) {
      let txt = "";
      if (type == 2) {
        txt = ans;
      } else if (type == 3) {
        txt = ans + ",";
      } else if (type == 4) {
        txt = ans == 1 ? "✓" : "✗";
      }
      return txt;
    },
    setMultiple(obj, answer) {
      //多选答案设置
      obj.answerList += answer;
      let str = obj.answerList;
      let str2 = checkAnswer(
        str,
        3,
        obj.answerOptions.split(",").length,
        obj.answerList.length
      );
      obj.answerList = str2;
    },
    edit(item) {
      //修改答案
      this.form = deepClone(item);
      this.questionList = deepClone(item?.questionList || []);
      this.questionList?.map((item) => {
        let types = [{}];
        let addndex = 0;
        item.subQuestions.map((sub, index) => {
          if (!!sub.questionType) {
            if (sub.questionType == types[addndex].qusType) {
              //同类型批量答案+1
              types[addndex].subNum += 1;
              if (
                types[addndex].answerOptions.length < sub.answerOptions.length
              ) {
                types[addndex].answerOptions = sub.answerOptions;
              }
              types[addndex].answerList += this.setAnswer(
                sub.questionType,
                sub.correctAnswer
              );
              if (index == item.subQuestions.length - 1) {
                //循环最后类型数量大于等于5，保存批量答案
                if (types[addndex].subNum && types[addndex].subNum >= 5) {
                  types[addndex].endIndex = sub.questionIndex;
                  types[addndex].index = index;
                }
              }
            } else {
              if (types[addndex].subNum && types[addndex].subNum >= 5) {
                //不同类型时如果原有类型数量大于等于5，保存批量答案
                types[addndex].endIndex =
                  item.subQuestions[index - 1].questionIndex;
                types[addndex].index = index;
                addndex += 1;
                types[addndex] = {};
              }
              //不同类型初始化批量答案
              types[addndex].qusType = sub.questionType;
              types[addndex].subNum = 1;
              types[addndex].answerOptions = sub.answerOptions;
              types[addndex].answerList = this.setAnswer(
                sub.questionType,
                sub.correctAnswer
              );
            }
          }
        });
        for (let i = 0; i < types.length; i++) {
          if (types[i].qusType == 3) {
            types[i].answerList = types[i].answerList.slice(0, -1);
          }
          if (types[i].subNum >= 5) {
            item.subQuestions.splice(
              types[i].index + i,
              0,
              deepClone(types[i])
            );
          }
        }
      });
      this.dialogVisible = true;
    },
    setFormAns(index, indexs) {
      //初始化要修改的答案
      this.formAns = { ...this.questionList[index].subQuestions[indexs] };
      this.formAns.listIndex = index;
      this.diaSetAns = true;
    },
    saveFormAns() {
      //批量修改答案
      let EndIndex;
      let subNum = this.formAns.subNum - 1;
      this.questionList[this.formAns.listIndex].subQuestions.some(
        (item, index) => {
          if (this.formAns.endIndex == item.questionIndex) {
            EndIndex = index;
            return;
          }
        }
      );
      for (let i = 0; i <= subNum; i++) {
        let correctAnswer = "";
        if (this.formAns.qusType == 2) {
          correctAnswer = this.formAns.answerList[subNum - i];
        } else if (this.formAns.qusType == 3) {
          correctAnswer = this.formAns.answerList.split(",")[subNum - i];

          console.log(this.formAns.answerList.split(",")[subNum - i]);
        } else if (this.formAns.qusType == 4) {
          correctAnswer = this.formAns.answerList[subNum - i] == "✓" ? 1 : 2;
        }
        this.questionList[this.formAns.listIndex].subQuestions[
          EndIndex - i
        ].correctAnswer = correctAnswer;
      }
      this.diaSetAns = false;
    },
    async saveAnswer() {
      //保存答案
      for (let i = 0; i < this.questionList.length; i++) {
        for (let j = 0; j < this.questionList[i].subQuestions.length; j++) {
          if (this.questionList[i].subQuestions[j].qusType) {
            this.questionList[i].subQuestions.splice(j, 1);
          }
        }
      }
      const { data, status, message } = await this.$request.modifyPaper({
        paperId: this.form.id,
        questionList: [...this.questionList],
      });
      if (status == 0) {
        this._QueryData();
      } else {
        this.$message.error(message);
      }
    },

    async changClazz() {
      await this._QuerySubjectList();
      await this.setDate(1);
    },
    async _QueryClassList() {
      const { data, status, info } = await this.$request.fetchClassList();
      if (status === 0) {
        this.classList = data.list.map((item) => {
          return {
            value: item.classId,
            label: item.className,
          };
        });
        this.query.classId = this.classList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async _QuerySubjectList() {
      const { data, status, info } = await this.$request.fetchSubjectList({
        classId: this.query.classId,
      });
      if (status === 0) {
        this.subjectList =
          data.subjectNames?.map((item) => {
            return {
              value: item,
              label: item,
            };
          }) || [];
        if (this.role == "ROLE_BANZHUREN") {
          this.subjectList.unshift({
            value: "",
            label: "全部",
          });
          this.query.subjectId = [this.subjectList[0]?.value];
        } else {
          this.query.subjectId = this.subjectList[0]?.value;
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.loading = true;
      //多课时对比
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      const { data, status, info } = await this.$request.fetchQuizList({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table-box {
  margin: 0 20px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 5px;
  :deep(.fa-arrow-right) {
    padding-left: 2px;
  }
  :deep(.fa-file-text) {
    padding-left: 2px;
  }
}

.fa-exchange {
  color: #667ffd;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}
.dia-btn {
  border-radius: 20px;
  margin: 0 20px;
  padding: 10px 20px;
}
.dia-tips {
  padding-bottom: 10px;
}
.answer-s {
  width: 32px;
  height: 28px;
  cursor: pointer;
  user-select: none;
}
.set-questions {
  display: flex;
  margin-bottom: 12px;
  width: 100%;
  .qs-num {
    flex-shrink: 0;
    margin-right: 10px;
  }
}
.qs-options {
  flex: 1;
  .ipt {
    margin-bottom: 5px;
  }
  .delButton {
    border-color: #ff6868;
    background: #ff6868 url("../../assets/images/arrow.png") no-repeat center;
    background-size: 19px;
    cursor: pointer;
    color: transparent;
  }
  .ac {
    border-color: #ff6868;
    background: #ff6868;
    color: #fff;
  }
}
.down {
  padding-top: 16px;
}
.page-container {
  position: relative;
}
.edit-dia {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #fff;
  overflow-y: auto;
  z-index: 10;
  .back {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    .back-l {
      display: flex;
      align-items: center;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 18px;
      font-weight: 500;
    }
    .fa-mail-reply-all {
      font-size: 28px;
      color: #b3b3b3;
      margin-right: 12px;
    }
  }
  .form-box {
    padding: 20px;
  }
  .answer-title {
    text-align: center;
    font-size: 20px;
    color: #333;
    font-weight: 700;
    padding-bottom: 20px;
    .totals {
      font-size: 16px;
      color: #888;
      font-weight: normal;
    }
  }
  .question-title {
    line-height: 40px;
    .ipt {
      width: 300px;
      margin: 0 16px 0 10px;
      :deep(.el-input__inner) {
        border-radius: 20px;
        border-color: #667ffd;
        background: rgba($color: #667ffd, $alpha: 0.05);
      }
    }
    .delete {
      margin-right: 8px;
    }
    .title-txt {
      margin-right: 20px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .questions-ul {
    border-left: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    margin: 12px 0;
  }
  .sub-questions {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #e2e2e2;
    & > div {
      min-height: 40px;
      padding: 5px;
      flex-shrink: 0;
      border-right: 1px solid #e2e2e2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .qs-num {
      width: 80px;
    }
    .qs-type {
      width: 160px;
    }
    .qs-score,
    .qs-partScore {
      width: 160px;
    }
    .qs-options {
      flex: 1;
    }
    .qs-set {
      width: 80px;
    }
    .qs-options2 {
      text-align: left;
      justify-content: flex-start;
      padding-left: 20px;
      .answer-s {
        cursor: pointer;
      }
    }
    :deep(.el-select) {
      .el-input__inner {
        border-radius: 20px;
        border-color: #667ffd;
        width: 150px;
        height: 32px;
        line-height: 32px;
        background: rgba($color: #667ffd, $alpha: 0.05);
      }
      .el-input__icon {
        line-height: 32px;
      }
    }
  }
  .set-ans-btn {
    width: 100%;
    padding: 10px 0 10px 630px;
    box-sizing: border-box;
    border-bottom: 1px solid #e2e2e2;
  }
}
</style>