<template>
    <el-container class="default-body">
        <el-header>
            <back-box class="detailBack">
                <template slot="title">
                    <span class="default-title">
                        {{ title }}
                    </span>
                </template>
            </back-box>
        </el-header>
        <div class="default-filter">
            <el-row class="row-type">
                <label>阶段报表类型</label>
                <el-select @change="_changeType" v-if="dataType && currentType" class="opration-select"
                    v-model="currentType">
                    <el-option v-for="(item, index) in types" :lable="item.name" :key="index" :value="item.name" />
                </el-select>
                <div style="float: right;">
                    <el-button type="primary" @click="_export" class="opration-btn"
                        icon="el-icon-upload2">导出报表</el-button>
                    <el-button type="primary" @click="_print" class="opration-btn"
                        icon="el-icon-printer">打印报表</el-button>
                </div>
            </el-row>
        </div>
        <el-main>
            <div style=" padding: 20px;" id="print-content">
                <div v-if="dataType == '1' && currentType == '试题分析'">
                    <el-row class="row-subfix">
                        <div class="row-line">
                            <span class="line-subfix">班级：</span>
                            <span class="line-value">{{ detail.className }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">科目：</span>
                            <span class="line-value">{{ detail.subjectName }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">课时数：</span>
                            <span class="line-value">{{ ids.length }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">上课时间：</span>
                            <span class="line-value">{{ detail.startTime }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">下课时间：</span>
                            <span class="line-value">{{ detail.endTime }}</span>
                        </div>
                    </el-row>
                    <el-row class="row-subfix">
                        <div class="row-line">
                            <span class="line-subfix">班级人数：</span>
                            <span class="line-value">{{ detail.classPersonNum }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">签到人数：</span>
                            <span class="line-value">{{ detail.checkInCount }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">题目总数：</span>
                            <span class="line-value">{{ detail.questionNum }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">答题总数：</span>
                            <span class="line-value">{{ detail.totalAnswersNum }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">课时时长：</span>
                            <span class="line-value">{{ setDuration(detail.duration) }}</span>
                        </div>
                    </el-row>
                    <el-row class="row-subfix">
                        <div class="row-line">
                            <span class="line-subfix">答对总数：</span>
                            <span class="line-value">{{ detail.totalCorrectAnswersNum }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">总参与度：</span>
                            <span class="line-value">{{ detail.participationRate }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">班级正确率：</span>
                            <span class="line-value">{{ detail.classCorrectRate }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">已达正确率：</span>
                            <span class="line-value">{{ detail.answerCorrectRate }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">反馈时长：</span>
                            <span class="line-value">{{ setDuration(detail.consumingDuration) }}</span>
                        </div>
                    </el-row>
                    <el-row class="row-table">
                        <el-table class="default-table" :data="askItemAnalysis">
                            <el-table-column prop="title" label="课时-题号" />
                            <el-table-column label="题干" width="120">
                                <template slot-scope="scoped">
                                    <el-button type="text" size="mini" @click="openStem(scoped.row)">查看</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="questionType" label="题型" width="100">
                                <template slot-scope="scoped">{{ setSubPro(scoped.row.questionType) }}</template>
                            </el-table-column>
                            <el-table-column prop="answeredNum" label="答题人数" width="100" />
                            <el-table-column prop="correctAnswerNum" label="答对人数" width="100" />
                            <el-table-column prop="participationRate" label="班级参与度(单题)" width="150">
                                <template slot-scope="scoped">{{ scoped.row.participationRate }}%</template>
                            </el-table-column>
                            <el-table-column prop="classCorrectRate" label="班级正确率(单题)" width="150">
                                <template slot-scope="scoped">{{ scoped.row.classCorrectRate }}%</template>
                            </el-table-column>

                            <el-table-column prop="answerCorrectRate" label="已答正确率(单题)" width="150">
                                <template slot-scope="scoped">{{ scoped.row.answerCorrectRate }}%</template>
                            </el-table-column>

                            <el-table-column prop="knowledge" label="知识点(单题)" width="150" />
                            <el-table-column prop="correctAnswer" label="正确答案(单题)" width="150">
                                <template slot-scope="scoped">
                                    {{
                            scoped.row.correctAnswer == 1 ? "✓" :
                                scoped.row.correctAnswer == 2 ? "✗" :
                                    scoped.row.correctAnswer
                        }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="fallible" label="干扰选项(单题)" width="150">
                                <template slot-scope="scoped">
                                    {{
                                scoped.row.fallible == 1 ? "✓" :
                                    scoped.row.fallible == 2 ? "✗" :
                                        scoped.row.fallible
                            }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div v-if="dataType == '1' && currentType == '学生作答表现'">
                    <el-row class="row-table" style="margin-top:0px;">
                        <el-table class="default-table" :data="askPeriodQuestionItems">
                            <el-table-column prop="answerTimes" label="答题次数"></el-table-column>
                            <el-table-column prop="consumingDuration" label="答题耗时"><template slot-scope="scoped">{{
                            setDuration(scoped.row.consumingDuration)
                        }}
                                </template></el-table-column>
                            <el-table-column prop="correctAnswerTimes" label="答对次数">
                                <template slot-scope="scoped">{{
                                scoped.row.correctAnswerTimes ||
                                    Number(scoped.row.correctAnswerTimes) === 0
                                    ? scoped.row.correctAnswerTimes
                                    : "-"
                            }}</template>
                            </el-table-column>
                            <el-table-column prop="participationRate" label="参与度"><template slot-scope="scoped">{{
                                scoped.row.participationRate ||
                                    Number(scoped.row.participationRate) === 0
                                    ? scoped.row.participationRate + "%"
                                    : "-"
                            }}</template></el-table-column>
                            <el-table-column prop="correctRate" label="正确率"><template slot-scope="scoped">{{
                                scoped.row.correctRate || Number(scoped.row.correctRate) === 0
                                    ? scoped.row.correctRate + "%"
                                    : "-"
                            }}</template></el-table-column>
                            <el-table-column prop="answerCorrectRate" label="已答正确率"><template slot-scope="scoped">{{
                                scoped.row.answerCorrectRate ||
                                    Number(scoped.row.answerCorrectRate) === 0
                                    ? scoped.row.answerCorrectRate + "%"
                                    : "-"
                            }}</template></el-table-column>
                            <el-table-column v-for="(item, index) in askPeriodQuestionItemOptions" :key="index"
                                :label="'Q' + (index + 1)"><template slot-scope="scoped">
                                    <span :class="scoped.row['isRight' + index] ? '' : 'red'">{{
                            scoped.row["answer" + index] || "-"
                        }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div v-if="dataType == '1' && currentType == '学生互动表现'">
                    <el-row class="row-table" style="margin-top:0px;">
                        <el-table class="default-table" :data="askInteractives">
                            <el-table-column prop="studentCode" label="学号"></el-table-column>
                            <el-table-column prop="studentName" label="姓名"></el-table-column>
                            <el-table-column prop="interactionsNum" label="参与得分"></el-table-column>
                            <el-table-column prop="interactionsCorrectNum" label="对错得分"></el-table-column>
                            <el-table-column prop="rushAnswerTimes" label="抢答成功次数"></el-table-column>
                            <el-table-column prop="rushAnswerCorrectTimes" label="抢答答对次数"></el-table-column>
                            <el-table-column prop="checkAnswerTimes" label="被抽答次数"></el-table-column>
                            <el-table-column prop="checkAnswerCorrectTimes" label="被抽答答对次数"></el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div v-if="dataType == '1' && currentType == '学生签到表现'">
                    <el-row class="row-subfix">
                        <div class="row-line">
                            <span class="line-subfix">应到人数：</span>
                            <span class="line-value">{{ detail.classPersonNum }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">实到人数：</span>
                            <span class="line-value">{{ detail.checkInCount }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">迟到人数：</span>
                            <span class="line-value">{{ detail.classPersonNum - detail.checkInCount }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">未到人数：</span>
                            <span class="line-value">{{ detail.classPersonNum - detail.checkInCount }}</span>
                        </div>
                    </el-row>
                    <el-row class="row-table" style="margin-top:20px;">
                        <el-table class="default-table" :data="askCheckinStatus">
                            <el-table-column prop="studentCode" label="学号"></el-table-column>
                            <el-table-column prop="studentName" label="姓名"></el-table-column>
                            <el-table-column prop="checkInTime" label="签到时间"></el-table-column>
                            <el-table-column prop="makeUpTime" label="补签时间"></el-table-column>
                            <el-table-column prop="rushAnswerTimes" label="是否迟到"></el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div v-if="dataType == '2' && currentType == '测验成绩单'">
                    <el-row class="row-subfix" :key="index" v-for="(item, index) in titleInfo">
                        <div class="row-line">
                            <span class="line-subfix">班级：</span>
                            <span class="line-value">{{ item.className }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">试卷名称：</span>
                            <span class="line-value">{{ item.paperName }}</span>
                        </div>
                        <div class="row-line">
                            <span class="line-subfix">测验时间：</span>
                            <span class="line-value">{{ item.testTime }}</span>
                        </div>
                    </el-row>
                    <el-row class="row-subfix">
                        <el-table class="default-table" style="margin-top: 10px" :data="titleInfo">
                            <el-table-column prop="testCount" label="测验人数" width="120" />
                            <el-table-column prop="avg" label="平均分" width="120" />
                            <el-table-column prop="hight" label="最高分" width="120" />
                            <el-table-column prop="low" label="最低分" width="120" />
                            <el-table-column prop="title" label="缺考名单">
                                <template slot-scope="scoped">
                                    {{ scoped.row.miss.join("/") }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="row-subfix">
                        <el-table class="default-table" style="margin-top: 10px" :data="studentList">
                            <el-table-column :width="item.label == '学号' ? 120 : 0" :prop="item.prop" :label="item.label"
                                :key="index" v-for="(item, index) in studentHeader" />
                        </el-table>
                    </el-row>
                    <el-row class="row-subfix">
                        <el-table class="default-table" style="margin-top: 10px" :data="questionList">
                            <el-table-column :width="item.label == '题号&答案' ? 80 : 0" :prop="item.prop"
                                :label="item.label" :key="index" v-for="(item, index) in questionHeaders" />
                        </el-table>
                    </el-row>
                    <el-row class="row-subfix" v-if="questionOtherList && questionOtherList.length >= 1">
                        <el-table class="default-table" style="margin-top: 10px" :data="questionOtherList">
                            <el-table-column :prop="item.prop" :label="item.label" :key="index"
                                v-for="(item, index) in questionOtherHeaders" />
                        </el-table>
                    </el-row>
                    <el-row class="row-subfix">
                        <el-table class="default-table" style="margin-top: 10px" :data="questionTotal">
                            <el-table-column prop="quesion" label="题号" width="120" />
                            <el-table-column prop="anwser" label="答案" width="120" />
                            <el-table-column prop="student" label="答错学生">
                                <template slot-scope="scoped">
                                    <span>总计 <span style="color:red;">
                                            {{ scoped.row.details.filter(item => !item.isRight).length }}</span> 人
                                    </span>
                                    <span style="margin: 10px 0;"
                                        v-for="(item, index) in scoped.row.details.filter(item => !item.isRight)">
                                        选{{ item.option }}：{{ item.students.join("/") }}
                                    </span>
                                    <span></span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div v-if="dataType == '2' && currentType == '试题分析'">
                    <el-table class="default-table" :data="testQuestions">
                        <el-table-column prop="questionIndex" label="题号" width="60"></el-table-column>
                        <el-table-column prop="questionType" label="题型" width="100">
                            <template slot-scope="scope">
                                {{ setSubPro(scope.row.questionType) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="score" width="100" label="知识点"></el-table-column>
                        <el-table-column prop="score" width="100" label="满分值"></el-table-column>
                        <el-table-column width="110" prop="highestScore" label="班最高分"></el-table-column>
                        <el-table-column width="110" prop="lowestScore" label="班最低分"></el-table-column>
                        <el-table-column width="110" prop="avgScore" label="班平均分"></el-table-column>
                        <el-table-column prop="classScoringRate" width="120" label="班级得分率"><template
                                slot-scope="scoped">{{ scoped.row.classScoringRate
                                }}%</template></el-table-column>
                        <el-table-column prop="correctAnswer" label="答案"><template slot-scope="scoped">{{
                            scoped.row.correctAnswer == 1
                                ? "✓"
                                : scoped.row.correctAnswer == 2
                                    ? "✗"
                                    : scoped.row.correctAnswer
                        }}</template>
                        </el-table-column>
                        <el-table-column v-for="(item, index) in testQuestionOptions" :key="index" :label="item.title"
                            :prop="'count' + index" width="120"><template slot-scope="scope">
                                <p class="persent">
                                    {{
                            scope.row.questionType == "5"
                                ? ""
                                : scope.row["option" + index]
                                    ? `${scope.row["option" + index]}(${scope.row["persent" + index]
                                    })`
                                    : ""
                        }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="dataType == '2' && currentType == '成绩排名'">
                    <el-table class="default-table" :data="testStudents">
                        <el-table-column prop="studentCode" label="学号" width="120"></el-table-column>
                        <el-table-column prop="studentName" label="姓名"></el-table-column>
                        <el-table-column prop="examScore" label="总分"></el-table-column>
                        <el-table-column prop="scoringRate" label="得分率">
                            <template slot-scope="scope">
                                {{ scope.row.scoringRate }}%
                            </template>
                        </el-table-column>
                        <el-table-column prop="classRank" label="班名"></el-table-column>
                        <el-table-column label="客观题">
                            <el-table-column prop="objectiveExamScore" label="总分"></el-table-column>
                            <el-table-column prop="objectiveScoringRate" label="得分率">
                                <template slot-scope="scope">
                                    {{ scope.row.objectiveScoringRate }}%
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="主观题">
                            <el-table-column prop="subjectiveExamScore" label="总分"></el-table-column>
                            <el-table-column prop="subjectiveScoringRate" label="得分率">
                                <template slot-scope="scope">
                                    {{ scope.row.subjectiveScoringRate }}%
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="dataType == '2' && currentType == '小题分报表'">
                    <el-table class="default-table" :data="testStudents">
                        <el-table-column prop="studentCode" label="学号" width="120"></el-table-column>
                        <el-table-column prop="studentName" label="姓名"></el-table-column>
                        <el-table-column prop="examScore" label="总分"></el-table-column>
                        <el-table-column label="分数组成">
                            <el-table-column prop="objectiveExamScore" label="客观题分"></el-table-column>
                            <el-table-column prop="subjectiveExamScore" label="主观题分"></el-table-column>
                        </el-table-column>
                        <el-table-column v-for="(item, index) in testStudentOptions" :key="index" :label="'Q' + item.id"
                            :prop="'score' + item.id">
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="dataType == '2' && currentType == '作答明细'">
                    <el-table class="default-table" :data="testStudents">
                        <el-table-column prop="studentCode" width="120" label="学号"></el-table-column>
                        <el-table-column prop="studentName" label="姓名"></el-table-column>
                        <el-table-column prop="className" label="班级"></el-table-column>
                        <el-table-column prop="examScore" label="总分"></el-table-column>
                        <el-table-column v-for="(item, index) in testStudentOptions" :key="index"
                            :label="'Q' + item.id">
                            <template slot-scope="scope">
                                <span v-if="testStudents[index]?.questionType == 5">*</span>
                                <span v-else-if="scope.row['answer' + item.id]"
                                    :class="scope.row['isRight' + item.id] ? '' : 'error'">
                                    {{ scope.row["answer" + item.id] }}
                                </span>
                                <span v-else :class="scope.row['questionType' + item.id] == 5 ? '' : 'error'">-</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="dataType == '3' && currentType == '班级对比情况表'">
                    <el-table class="default-table" :data="classdiffExamReport">
                        <el-table-column prop="index" label="序号" width="120" />
                        <el-table-column prop="className" label="班级" width="120" />
                        <el-table-column label="测验人数/班级人数">
                            <template slot-scope="scoped">
                                {{ scoped.row.testCount }} / {{ scoped.row.classCount }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" label="参与度" width="120">
                            <template slot-scope="scoped">
                                {{ scoped.row.testCount / scoped.row.classCount }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="avg" label="班平均分" width="120" />
                        <el-table-column prop="hight" label="班最高分" width="120" />
                        <el-table-column prop="low" label="班最低分" width="120" />
                        <el-table-column prop="front20" label="前20名均分" width="120" />
                        <el-table-column prop="last20" label="后20名均分" width="120" />
                        <el-table-column prop="excellenRate" label="优秀数(率)" width="120">
                            <template slot-scope="scoped">
                                {{ scoped.row.excellenRate }}%
                            </template>
                        </el-table-column>
                        <el-table-column prop="goodRate" label="良好数(率)" width="120">
                            <template slot-scope="scoped">
                                {{ scoped.row.goodRate }}%
                            </template>
                        </el-table-column>
                        <el-table-column prop="passRate" label="合格数(率)" width="120">
                            <template slot-scope="scoped">
                                {{ scoped.row.passRate }}%
                            </template>
                        </el-table-column>
                        <el-table-column prop="failedRate" label="不合格数(率)" width="120">
                            <template slot-scope="scoped">
                                {{ scoped.row.passRate }}%
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="dataType == '3' && currentType == '试题分析'">
                    <el-table class="default-table" :data="testPaperExamReport">
                        <el-table-column prop="questionIndex" label="题号" width="120" />
                        <el-table-column prop="questionType" label="题型" width="100">
                            <template slot-scope="scope">
                                {{ setSubPro(scope.row.questionType) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="score" label="知识点" />
                        <el-table-column prop="score" label="满分值" width="120" />
                        <el-table-column prop="avgScore" label="年级平均分" width="120" />
                        <el-table-column prop="gradeScoringRate" label="年级得分率" width="120" />
                        <el-table-column prop="correctAnswer" label="答案" width="120" />
                        <el-table-column v-for="(item, index) in testPaperExamReportOptions" :key="index"
                            :label="item.title" :prop="'count' + index" width="120">
                            <template slot-scope="scope">
                                <p class="persent">
                                    {{
                            scope.row.questionType == "5"
                                ? ""
                                : scope.row["option" + index]
                                    ? `${scope.row["option" + index]}(${scope.row["persent" + index] ?? "0"
                                    })`
                                    : ""
                        }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="dataType == '3' && currentType == '学生成绩排名榜'">
                    <el-table class="default-table" :data="testStudentExamReport">
                        <el-table-column prop="gradeRank" label="年级排行" />
                        <el-table-column prop="code" label="学号" />
                        <el-table-column prop="name" label="姓名" />
                        <el-table-column prop="className" label="班级" />
                        <el-table-column prop="exam" label="分数" />
                        <el-table-column prop="title" label="成绩等级" />
                    </el-table>
                </div>
            </div>
        </el-main>
        <el-dialog class="stem" :visible.sync="stem.visible" :title="'题干'" width="800" :append-to-body="true">
            <iframe v-if="stem&&stem.src" :src="stem.src" style="width: 100%;min-height: 400px;" />
        </el-dialog>
    </el-container>
</template>
<script>
import { formatDate, downloadFile, tablePrint } from "utils";
export default {
    name: "reportDetail",
    async created() {
        this.role =

            this.$store.getters.info.showRole ||

            this.$store.getters.info.permissions[0].role;

        this.dataType = this.$route.query.dataType || "";

        this.classIds = (this.$route.query.classIds || "").split(',');

        this.subjects = (this.$route.query.subjects || "").split(',');

        this.ids = [this.$route.query.id];

        this.title = this.$route.query.title;

        this.types = this.types.filter(fl => { return fl.dataType == this.dataType });

        this.currentType = this.types[0]?.name ?? ""

        await this._changeType();
    },
    data() {
        return {
            titleInfo: [],
            studentList: [],
            studentHeader: [],
            studentMapping: [
                {
                    key: "code",
                    label: "学号",
                },
                {
                    key: "name",
                    label: "姓名",
                },
                {
                    key: "gradeRank",
                    label: "排名",
                },
                {
                    key: "exam",
                    label: "总分",
                },
                {
                    key: "objective",
                    label: "客观分",
                },
                {
                    key: "subjective",
                    label: "主观分",
                },
            ],
            questionList: [],
            questionHeaders: [],
            questionOtherList: [],
            questionOtherHeaders: [],
            questionTotal: [],
            dataType: null,
            classIds: [],
            subjects: [],
            ids: [],
            // 试题分析对象
            askItemAnalysis: [],
            // 作答情况对象
            askPeriodQuestionItems: [],
            // 作答情况选项对象
            askPeriodQuestionItemOptions: [],
            // 学生互动问答对象
            askInteractives: [],
            // 学生签到情况
            askCheckinStatus: [],
            // 报表详情
            testReport: {
                subjectiveScore: 0,
                subjectiveHighestScore: "",
                subjectiveLowestScore: "",
                subjectiveAvgScore: "",
                subjectiveClassScoringRate: "",
                objectiveScore: "",
                objectiveHighestScore: "",
                objectiveLowestScore: "",
                objectiveAvgScore: "",
                objectiveClassScoringRate: "",
                examPaperScore: "",
                highestScore: "",
                lowestScore: "",
                avgScore: "",
                classScoringRate: "",
            },
            // 报表学生详情
            testStudents: [],
            // 报表学生选项
            testStudentOptions: [],
            // 报表题目详情
            testQuestions: [],
            // 报表题目选项
            testQuestionOptions: [],
            setSubPro(type) {
                let tit;
                switch (type) {
                    case 2:
                        tit = "单选题";
                        break;
                    case 3:
                        tit = "多选题";
                        break;
                    case 4:
                        tit = "判断题";
                        break;
                    case 5:
                        tit = "主观题";
                        break;
                    default:
                        tit = "其他";
                }
                return tit;
            },
            setDuration(times) {
                let m = parseInt(times / 1000 / 60);
                let s = parseInt((times / 1000) % 60);
                let ms = times;
                let aTime;
                if (times == 0) {
                    aTime = `0`;
                } else {
                    if (m == 0 && s == 0) {
                        aTime = `${ms}毫秒`;
                    } else if (m == 0 && s != 0) {
                        aTime = `${s}秒`;
                    } else if (m != 0 && s != 0) {
                        aTime = `${m}分${s}秒`;
                    }
                }
                return aTime;
            },
            title: "",
            types: [{
                dataType: "3",
                name: "班级对比情况表"
            }, {
                dataType: "3",
                name: "试题分析"
            }, {
                dataType: "3",
                name: "学生成绩排名榜"
            }, {
                dataType: "2",
                name: "测验成绩单"
            }, {
                dataType: "2",
                name: "试题分析"
            }, {
                dataType: "2",
                name: "成绩排名"
            }, {
                dataType: "2",
                name: "小题分报表"
            }, {
                dataType: "2",
                name: "作答明细"
            }, {
                dataType: "1",
                name: "试题分析"
            }, {
                dataType: "1",
                name: "学生作答表现"
            }, {
                dataType: "1",
                name: "学生互动表现"
            }, {
                dataType: "1",
                name: "学生签到表现"
            }],
            detail: {},
            currentType: null,
            classdiffExamReport: [],
            testPaperExamReport: [],
            testStudentExamReport: [],
            testPaperExamReportOptions: [],
            //题干数据对象
            stem: {
                visible: false,
                src: null
            }
        }
    },
    methods: {
        async _export() {
            if (this.dataType == "1") {

                let exportPeriodReport = "";

                var query = {};
                query.periodId = this.ids[0];

                exportPeriodReport =
                    this.role == "ROLE_PERSONAL"
                        ? this.$request.pExportPeriodReport
                        : this.$request.exportPeriodReport;

                const data = await exportPeriodReport({
                    ...query,
                });

                if (data) {
                    let blob = new Blob([data], {
                        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                    });
                    let name = `随堂问-单课时报表.xlsx`
                    downloadFile(this.status ? "随堂问-已归档单课时报表.xlsx" : name, blob);
                } else {
                    this.$message.error("下载失败");
                }
            }
            else if (this.dataType == "2") {

                const exportExamReport =
                    this.role == "ROLE_PERSONAL"
                        ? this.$request.pExportExamReport
                        : this.$request.exportExamReport;

                const data = await exportExamReport({
                    examId: this.ids[0]
                });

                this.exportLoading = false;

                if (!data.status) {
                    let blob = new Blob([data], {
                        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                    });
                    downloadFile(
                        this.status
                            ? "即时测-已归档单卷测练报表.xlsx"
                            : "即时测-单卷测练报表.xlsx",
                        blob
                    );
                } else {
                    this.$message.error(data.info);
                }
            }

        },
        _print() {
            tablePrint("print-content", this.title + "_" + this.currentType);
        },
        async _changeType() {
            if (this.dataType == "1") {
                if (this.currentType == "试题分析") {
                    await this._loadAskItemAnalysis();
                }
                else if (this.currentType == "学生作答表现") {
                    await this._loadAskAnwserItems();
                }
                else if (this.currentType == "学生互动表现") {
                    await this._loadAskInteractives();
                }
                else if (this.currentType == "学生签到表现") {
                    await this._loadAskCheckinStatus();
                }
            }
            else if (this.dataType == "2") {
                if (this.currentType == "测验成绩单") {
                    await this._testExamReport();
                }
                else if (this.currentType == "试题分析") {
                    await this._loadTestQuestionReport();
                }
                else if (this.currentType == "成绩排名") {
                    await this._loadTestStudentReport();
                }
                else if (this.currentType == "小题分报表") {
                    await this._loadTestStudentReport();
                }
                else if (this.currentType == "作答明细") {
                    await this._loadTestStudentReport();
                }
            }
            else if (this.dataType == "3") {

                if (this.currentType == "班级对比情况表") {
                    await this._classdiffExamReport();
                }
                else if (this.currentType == "试题分析") {
                    await this._testPaperExamReport();
                }
                else if (this.currentType == "学生成绩排名榜") {
                    await this._testStudentExamReport();
                }
            }
        },
        async _testPaperExamReport() {
            const request = this.$request.tPaperExamReport;

            let response = await request({
                paperId: this.ids[0],
                classIds: this.classIds,
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            let optionsList = [{}, {}, {}, {}, {}];

            let tableData = response.data?.map((item) => {
                let params = {};

                const detail = item?.details ?? [];

                let lastOPtion = detail?.find((item) => {
                    return item.option == "未答";
                });
                let defaultArr = detail?.filter((item) => {
                    return item.option != "未答";
                });
                optionsList.map((items, index) => {
                    if (index != 4) {
                        params["count" + index] =
                            defaultArr[index]?.option != "未答"
                                ? defaultArr[index]?.count
                                : "";
                        params["persent" + index] =
                            defaultArr[index]?.option != "未答"
                                ? defaultArr[index]?.persent
                                : "";
                        params["option" + index] =
                            defaultArr[index]?.option != "未答"
                                ? defaultArr[index]?.option == 1
                                    ? "✓"
                                    : defaultArr[index]?.option == 2
                                        ? "✗"
                                        : defaultArr[index]?.option
                                : "";
                        items["title"] = "选项" + (index + 1);
                    } else {
                        items["title"] = "未答";
                        params["count" + index] = lastOPtion?.count ?? "";
                        params["persent" + index] = lastOPtion?.persent ?? "";
                        params["option" + index] = "?";
                    }
                });

                return {
                    ...item,
                    ...params,
                };
            });

            this.testPaperExamReport = tableData?.sort((a, b) => {
                return a.questionIndex - b.questionIndex;
            });

            this.testPaperExamReportOptions = [...optionsList];

        },
        async _testStudentExamReport() {
            const request = this.$request.tgStudentExamReport;

            let response = await request({
                paperId: this.ids[0],
                classIds: this.classIds,
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.testStudentExamReport = response.data;
        },
        async _classdiffExamReport() {

            const classDiffRequest = this.$request.tClassdiffExamReport;

            let classDiffResponse = await classDiffRequest({
                paperId: this.ids[0],
                classIds: this.classIds,
            });

            if (classDiffResponse.status != 0) {
                this.$message.error(classDiffResponse.info);
                return;
            }
            var index = 0;

            this.classdiffExamReport = classDiffResponse.data.map((item) => {
                item.index = index + 1;
                index += 1;
                return item;
            });
        },
        openStem(stemRow) {
            this.stem.src = stemRow.screenshot ?? "";
            this.stem.visible = true;
        },
        async _testExamReport() {

            this.questionTotal = [];

            const request = this.$request.tTestExamReport;

            let response = await request({
                paperId: this.ids[0],
                classIds: this.classIds,
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.titleInfo = response.data.titleInfos;

            var studentHeaders = [];

            var studentResults = [];

            for (var iheader = 0; iheader < 3; iheader++) {
                for (
                    var imapping = 0;
                    imapping < this.studentMapping.length;
                    imapping++
                ) {
                    studentHeaders.push({
                        prop: this.studentMapping[imapping].key + "_" + iheader,
                        label: this.studentMapping[imapping].label,
                        key: this.studentMapping[imapping].key,
                    });
                }
            }

            this.studentHeader = [...studentHeaders];

            for (var isp = 0; isp < response.data.gradeExamStudentReports.length; isp++) {

                var item = {};

                for (
                    var iamapping = 0;
                    iamapping < studentHeaders.length;
                    iamapping++
                ) {
                    var currentData = response.data.gradeExamStudentReports[isp];

                    if (!currentData) continue;

                    var currentHeader = studentHeaders[iamapping];

                    item[currentHeader.prop] = currentData[currentHeader.key];

                    if (
                        iamapping >= this.studentMapping.length - 1 &&
                        iamapping % this.studentMapping.length == 0
                    ) {
                        isp += 1;
                    }
                }

                studentResults.push(item);
            }

            this.studentList = [...studentResults];

            var otherDatas = [];

            var questionHeaders = [];

            var questionResults = [];

            var questionOtherHeaders = [];

            var questionOtherResults = [];

            var defaultQuestion = 6;

            var defaultCount = 3;

            var defaultQuestionCount = 4;

            var maxQuestionCount = 4;

            var optionSt = 1;

            for (var qheader = 0; qheader < defaultQuestion * defaultCount; qheader++) {
                if (qheader == 0 || qheader % 6 == 0) {
                    questionHeaders.push({
                        prop: "column_" + qheader,
                        label: "题号&答案",
                    });
                    continue;
                } else if (qheader == 1 || (qheader - 1) % 6 == 0) {
                    questionHeaders.push({
                        prop: "column_" + qheader,
                        label: "得分率",
                    });
                    optionSt = 1;
                    continue;
                } else {
                    questionHeaders.push({
                        prop: "column_" + qheader,
                        label: "选项" + optionSt,
                    });
                    optionSt += 1;
                }
            }

            var noPassIndex = 0;

            this.questionHeaders = questionHeaders;

            var itema = null;

            response.data.questionInfos = [...response.data.questionInfos]

            for (var qIndex = 0; qIndex < response.data.questionInfos.length; qIndex++) {

                var currentData = response.data.questionInfos[qIndex];

                var filterDetail = currentData.details.filter(fl => fl.option != '未答');

                var correctAnswerValue = currentData.correctAnswer == "1" ? "✓" : currentData.correctAnswer == 2 ? "✗" : currentData.correctAnswer;

                this.questionTotal.push({
                    quesion: "Q" + (qIndex + 1),
                    anwser: correctAnswerValue ?? "-----",
                    details: currentData.details
                })

                if (filterDetail.length > defaultQuestionCount || filterDetail.length > maxQuestionCount) {
                    currentData.index = qIndex;
                    otherDatas.push(currentData);
                    if (filterDetail.length > maxQuestionCount) {
                        maxQuestionCount = filterDetail.length;
                    }
                    continue;
                }
                else {
                    if (noPassIndex > defaultCount) {
                        questionResults.push(itema)
                        itema = null;
                        noPassIndex = 0;
                    }
                    var stPass = noPassIndex * defaultQuestion;
                    if (!itema) itema = {}

                    var correctAnswerValue = currentData.correctAnswer == "1" ? "✓" : currentData.correctAnswer == 2 ? "✗" : currentData.correctAnswer;

                    itema["column_" + (stPass)] = (qIndex + 1) + "" + correctAnswerValue;
                    itema["column_" + (stPass + 1)] = (currentData.gradeScoringRate * 100) + "%";

                    var value = "------";

                    for (var iOption = 0; iOption < defaultQuestion - 2; iOption++) {
                        var currentOption = filterDetail[iOption];
                        if (currentOption) {
                            var optionValue = currentOption.option == "1" ? "✓" : currentOption.option == 2 ? "✗" : currentOption.option;

                            itema["column_" + (stPass + iOption + 2)] = optionValue + "(" + (currentOption.persent ?? "0%") + ")";
                        }
                        else {
                            itema["column_" + (stPass + iOption + 2)] = value
                        }
                    }

                    noPassIndex += 1
                }

                if (qIndex >= response.data.questionInfos.length - 1 && noPassIndex != 0) {
                    questionResults.push(itema)
                    itema = null;
                }
            }

            optionSt = 1;

            maxQuestionCount += 2;

            this.questionList = [...questionResults]

            var otherCount = parseInt(defaultQuestion * defaultCount / maxQuestionCount);

            itema = null;

            for (var qOHeader = 0; qOHeader < maxQuestionCount * otherCount; qOHeader++) {
                if (qOHeader == 0 || qOHeader % (maxQuestionCount) == 0) {
                    questionOtherHeaders.push({
                        prop: "column_" + qOHeader,
                        label: "题号&答案",
                    });
                    continue;
                } else if (qOHeader == 1 || (qOHeader - 1) % (maxQuestionCount) == 0) {
                    questionOtherHeaders.push({
                        prop: "column_" + qOHeader,
                        label: "得分率",
                    });
                    optionSt = 1;
                    continue;
                } else {
                    questionOtherHeaders.push({
                        prop: "column_" + qOHeader,
                        label: "选项" + optionSt,
                    });
                    optionSt += 1;
                }
            }

            this.questionOtherHeaders = questionOtherHeaders;

            noPassIndex = 0;

            for (var qOIndex = 0; qOIndex < otherDatas.length; qOIndex++) {

                var currentData = otherDatas[qOIndex];

                var filterDetail = currentData.details.filter(fl => fl.option != '未答');

                if (noPassIndex >= otherCount) {
                    questionOtherResults.push(itema)
                    itema = null;
                    noPassIndex = 0;
                }

                var stPass = noPassIndex * maxQuestionCount;

                if (!itema) itema = {}

                var correctAnswerValue = currentData.correctAnswer == "1" ? "✓" : currentData.correctAnswer == 2 ? "✗" : currentData.correctAnswer;

                itema["column_" + (stPass)] = (Number(currentData.index) + 1) + "" + correctAnswerValue;

                itema["column_" + (stPass + 1)] = (currentData.gradeScoringRate * 100) + "%";

                var value = "------";

                for (var iOption = 0; iOption < maxQuestionCount - 2; iOption++) {

                    var currentOption = filterDetail[iOption];

                    if (currentOption) {

                        var optionValue = currentOption.option == "1" ? "✓" : currentOption.option == 2 ? "✗" : currentOption.option;

                        itema["column_" + (stPass + iOption + 2)] = optionValue + "(" + (currentOption.persent ?? "0%") + ")";
                    }
                    else {
                        itema["column_" + (stPass + iOption + 2)] = value
                    }
                }

                noPassIndex += 1

                if (qOIndex >= otherDatas.length - 1 && noPassIndex != 0) {

                    questionOtherResults.push(itema)
                    itema = null;
                }
            }

            this.questionOtherList = [...questionOtherResults]

        },
        async _loadAskInteractives() {
            const request =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPhaseInteractiveReport
                    : this.$request.phaseInteractiveReport;

            let response = await request({
                periodIds: this.ids,
                classIds: this.classIds
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.askInteractives = response.data.list;
        },
        async _loadAskItemAnalysis() {
            const request =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodDetail
                    : this.$request.periodDetail;

            let response = await request({
                periodIds: this.ids
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.detail = response.data;

            this.detail.selectDate = formatDate(new Date(), "yyyy-MM-dd");

            const listRequest =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodQuestionReport
                    : this.$request.periodQuestionReport;


            let listResponse = await listRequest({
                periodIds: this.ids,
                classIds: this.classIds
            });

            if (listResponse.status != 0) {
                this.$message.error(listResponse.info);
                return;
            }

            this.askItemAnalysis = listResponse.data.list;

        },
        async _loadAskAnwserItems() {
            const request =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodStudentReport
                    : this.$request.periodStudentReport;

            let response = await request({
                periodId: this.ids[0],
                classId: this.classIds[0]
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.askPeriodQuestionItems = response.data.list.map((item) => {
                let params = {};
                const detail = item.detail ? JSON.parse(item.detail) : [];
                if (detail.length > this.askPeriodQuestionItemOptions.length) {
                    this.askPeriodQuestionItemOptions = [...detail];
                }
                detail.map((items, index) => {
                    params["isRight" + index] = items.isRight;
                    params["answer" + index] =
                        items.answer == 1
                            ? "✓"
                            : items.answer == 2
                                ? "✗"
                                : items.answer;
                });
                return {
                    ...item,
                    ...params
                };
            });
        },
        async _loadAskCheckinStatus() {

            const detailRequest =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodDetail
                    : this.$request.periodDetail;

            let detailResponse = await detailRequest({
                periodIds: this.ids
            });

            if (detailResponse.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.detail = detailResponse.data;

            const request =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPeriodStudentReport
                    : this.$request.periodStudentReport;

            let response = await request({
                periodId: this.ids[0],
                classId: this.classIds[0],
                type: 3
            });

            if (response.status != 0) {
                this.$message.error(response.info);
                return;
            }

            this.askCheckinStatus = response.data.list;

            console.log(detailResponse, response)

        },
        async _loadTestDetail() {
            //详情 
            const examDetail =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pExamDetail
                    : this.$request.examDetail;

            let { data, info, status } = await examDetail({
                examId: this.ids[0],
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }

            this.testReport = { ...data?.examReport };
        },
        async _loadTestStudentReport() {

            const examStudentReport =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pExamStudentReport
                    : this.$request.examStudentReport;

            let { data, info, status } = await examStudentReport({
                examId: this.ids[0],
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }

            let optionsList = [];

            this.testStudents = data?.list.map((item) => {
                let params = {};
                const detail = JSON.parse(item.detail);
                if (detail.length) {
                    this.showSelect = false;
                }
                if (detail.length > optionsList.length) {
                    optionsList = [...detail];
                }
                detail.map((items, index) => {
                    params["que" + items.id] = items.id;
                    params["score" + items.id] = String(items.score).includes(".")
                        ? Number(items.score)
                        : items.score;
                    params["answer" + items.id] =
                        items.answer == 1 ? "✓" : items.answer == 2 ? "✗" : items.answer;
                    params["isRight" + items.id] = items.isRight;
                    params["questionType" + items.id] = items.questionType;
                });
                return {
                    ...item,
                    ...params,
                };
            });

            this.testStudentOptions = optionsList.sort((a, b) => {
                return a.id - b.id;
            });
        },
        async _loadTestQuestionReport() {
            //试题分析
            this.loading = true;
            const examQuestionReport =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pExamQuestionReport
                    : this.$request.examQuestionReport;

            let { data, info, status } = await examQuestionReport({
                examId: this.ids[0],
                page: 1,
                size: 9999,
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }

            let optionsList = [{}, {}, {}, {}, {}];

            let tableData = data?.list?.map((item) => {
                let params = {};
                const detail = JSON.parse(item.detail);
                let lastOPtion = detail?.find((item) => {
                    return item.option == "未答";
                });
                let defaultArr = detail?.filter((item) => {
                    return item.option != "未答";
                });

                optionsList.map((items, index) => {
                    if (index != 4) {
                        params["count" + index] =
                            defaultArr[index]?.option != "未答"
                                ? defaultArr[index]?.count
                                : "";
                        params["persent" + index] =
                            defaultArr[index]?.option != "未答"
                                ? defaultArr[index]?.persent
                                : "";
                        params["option" + index] =
                            defaultArr[index]?.option != "未答"
                                ? defaultArr[index]?.option == 1
                                    ? "✓"
                                    : defaultArr[index]?.option == 2
                                        ? "✗"
                                        : defaultArr[index]?.option
                                : "";
                        items["title"] = "选项" + (index + 1);
                    } else {
                        items["title"] = "未答";
                        params["count" + index] = lastOPtion.count;
                        params["persent" + index] = lastOPtion.persent;
                        params["option" + index] = "?";
                    }
                });
                return {
                    ...item,
                    ...params,
                };
            });

            this.testQuestions = tableData?.sort((a, b) => {
                return a.questionIndex - b.questionIndex;
            });

            this.testQuestionOptions = [...optionsList];
        }
    }
}
</script>
<style lang="scss">
.opration-select {
    margin-left: 10px !important;
}

.row-line {
    overflow: hidden;
    width: calc(20% - 2px);
    border: 1px solid #ebeef5;
    background: #f5f7fa;
    display: inline-block;
    height: 40px;
    line-height: 40px;

    .line-subfix {
        margin-left: 10px;

    }
}

.row-table {
    margin-top: 20px;
}

.red {
    color: #f30;
}
</style>