<template>
    <div class="lesson-test-report">
        <div class="scoreboard">
            <div v-show="$store.getters.getItemTitle.progress == 'finish' && testState == 1">
                <svg-icon icon-class="handonHint" class="warm-icon" />
                <span class="warm-hint">{{ $t("studentWeb.exam.timeoutHint") }}</span>
            </div>
            <span v-show="$store.getters.getItemTitle.progress != 'finish' && testState == 1" @click="showTest" style="color: #03966a;width: 100%;cursor: pointer;font-size:18px;font-weight: 800;text-align: center">
                {{$t("studentWeb.exam.report.anwser")}}
            </span>
            <h4 v-show='testState == 2'>{{$t("studentWeb.exam.report.noRes")}}</h4>
            <!-- <Row :gutter="20" v-if='testState == 3'>
                <i-col :xs="24" :sm="24" :md="24" :lg="12">
                    <Row :gutter="20">
                        得分
                        <i-col :xs="24" :sm="24" :md="12" :lg="12">
                            <Card class="score-card">
                                <p class="card-title">{{$t('studentWeb.exam.score')}}</p>
                                <div class="card-content">
                                    <span class="myscore">{{testScore}}</span> / {{ paperInfo.score }}
                                </div>
                            </Card>
                        </i-col>
                        难易度
                        <i-col :xs="24" :sm="24" :md="12" :lg="12">
                            <Card class="score-card">
                                <p class="card-title">{{$t('studentWeb.exam.difficulty')}}</p>
                                <div class="difficulty-rate">
                                    <Rate class allow-half disabled v-model="difficultyRate" />
                                    <span class="difficulty-rate-num">{{difficultyRate }}</span>
                                </div>
                            </Card>
                        </i-col>
                    </Row>
                    <Row :gutter="20">
                        班平均分
                        <i-col :xs="24" :sm="24" :md="12" :lg="12">
                            <Card class="score-card">
                                <p class="card-title">{{$t('studentWeb.exam.average')}}</p>
                                <div class="card-content">
                                    <span class="myscore">--</span>
                                </div>
                            </Card>
                        </i-col>
                        得分题目数
                        <i-col :xs="24" :sm="24" :md="12" :lg="12">
                            <Card class="score-card">
                                <p class="card-title">{{$t("studentWeb.exam.report.getScore")}}</p>
                                <div class="card-content">
                                    <span class="myscore">{{rightAns.right}}</span> / {{rightAns.all}}
                                </div>
                            </Card>
                        </i-col>
                        知识点
                        <i-col :xs="24" :sm="24" :md="24" :lg="24" style="display:none">
                            <Card class="comment-card">
                                <p class="card-title">{{$t('studentWeb.exam.smartComment')}}</p>
                                <div class="card-comment">
                                    <h4>学习相对稳定</h4>
                                    <br />
                                    <h4>
                                        {{$t('studentWeb.exam.keypoint')}}
                                        <span class="keypoint">   三角函数 二元一次方程 三元一次方程 傅里叶函数</span>
                                    </h4>
                                </div>
                            </Card>
                        </i-col>
                    </Row>
                </i-col>
                <i-col :xs="24" :sm="24" :md="24" :lg="12">
                    <Card class="chart-card">
                        <LessonTestReportCharts></LessonTestReportCharts>
                    </Card>
                </i-col>
            </Row> -->
            <Row :gutter="20" v-if='testState == 3'>
                <i-col :xs="24" :sm="24" :md="24" :lg="24">
                    <Row :gutter="20">
                        <!-- 得分 -->
                        <i-col :xs="24" :sm="24" :md="12" :lg="6">
                            <Card class="score-card">
                                <p class="card-title">{{$t('studentWeb.exam.score')}}</p>
                                <div class="card-content">
                                    <span class="myscore">{{testScore}}</span> / {{ paperInfo.score }}
                                </div>
                            </Card>
                        </i-col>
                        <!-- 难易度 -->
                        <i-col :xs="24" :sm="24" :md="12" :lg="6">
                            <Card class="score-card">
                                <p class="card-title">{{$t('studentWeb.exam.difficulty')}}</p>
                                <div class="difficulty-rate">
                                    <Rate class allow-half disabled v-model="difficultyRate" />
                                    <span class="difficulty-rate-num">{{difficultyRate }}</span>
                                </div>
                            </Card>
                        </i-col>
                        <!-- 班平均分 -->
                        <i-col :xs="24" :sm="24" :md="12" :lg="6">
                            <Card class="score-card">
                                <p class="card-title">{{$t('studentWeb.exam.average')}}</p>
                                <div class="card-content">
                                    <span class="myscore">--</span>
                                </div>
                            </Card>
                        </i-col>
                        <!-- 得分题目数 -->
                        <i-col :xs="24" :sm="24" :md="12" :lg="6">
                            <Card class="score-card">
                                <p class="card-title">{{$t("studentWeb.exam.report.getScore")}}</p>
                                <div class="card-content">
                                    <span class="myscore">{{rightAns.right}}</span> / {{rightAns.all}}
                                </div>
                            </Card>
                        </i-col>
                    </Row>
                </i-col>
                <i-col :xs="24" :sm="24" :md="24" :lg="24">
                    <!-- <Card class="chart-card"> -->
                        <LessonTestReportCharts></LessonTestReportCharts>
                    <!-- </Card> -->
                </i-col>
            </Row>
        </div>
        <div class="QAsheet" v-if='testState != 1'>
            <div class='title-rect-group '>
                <h2 class="title-rect-name" @click="checkedAnsFilter">{{$t("studentWeb.exam.report.answerBack")}}</h2>
            </div>
            <div class="filterBtn">
                <CheckboxGroup v-model="checkedAns">
                    <Checkbox label="right">
                        {{$t("studentWeb.exam.report.right")}}: {{rightAns.right}}
                    </Checkbox>
                    <Checkbox label="wrong">
                        {{$t("studentWeb.exam.report.wrong")}}: {{rightAns.wrong}}
                    </Checkbox>
                    <Checkbox label="noAns">
                        {{$t("studentWeb.exam.report.noScore")}}: {{rightAns.noAns}}
                    </Checkbox>
                </CheckboxGroup>
                <svg-icon icon-class="AnsWerDetail" :class="{ ansDetail: !closeAnsDetail, closeAnsDetail: closeAnsDetail,}" />
                <button :class="['wrong-exercises', rightAns.wrong != 0 ? 'wrong' : 'nowrong']" @click="showTest">
                    {{$t("studentWeb.exam.report.wrongPractice")}}
                </button>
            </div>
            
            <br style="clear:both" />
            <div class="qcontent" ref="qcontent" v-if="paperData.length">
                <div class="qcol"
                     v-for="(question, index) in paperData"
                     v-show="checkedAnsFilter(index)"
                     :key="index">
                     <!-- 题目 -->
                    <Row :gutter="10">
                        <i-col :xs="1" :sm="1" :md="1" :lg="1">
                            <div class="qAnsCondition">
                                <svg-icon class="qIcon"
                                          v-show="examInfo.stuScore[index] == question.score"
                                          icon-class="rightAns2" />
                                <svg-icon class="qIcon"
                                          v-show="examInfo.stuScore[index] != -1 && examInfo.stuScore[index] != question.score"
                                          icon-class="wrongAns" />
                                <svg-icon class="qIcon"
                                          v-show="examInfo.stuScore[index] == -1"
                                          icon-class="noAns" />
                            </div>
                        </i-col>
                        <i-col :xs="2" :sm="2" :md="1" :lg="1">
                            <div class="qtype">{{ question.parent == undefined ? getTestType(question.type) : getTestType(question.parentInfo.type) }}</div>
                        </i-col>
                        <i-col :xs="18" :sm="18" :md="21" :lg="21">
                            <div class="qdesc">
                                <div v-if="question.parent == undefined" style="display:inline-flex">
                                    <p style="max-width:75px;font-weight:600">{{question.paperIndex}}.</p>
                                    <div class="que-item" v-html="question.parent == undefined ? question.question :question.parentInfo.question"></div>
                                </div>
                                <div v-if="question.parent != undefined">
                                    <div style="display:flex">
                                        <p style="max-width:75px;font-weight:600">{{question.parent+1}}.</p>
                                        <div class="que-item" v-html="question.parent == undefined ? question.question :question.parentInfo.question"></div>
                                    </div>
                                    <div style="display:flex;margin-top:10px">
                                        <p style="max-width:75px;font-weight:600">{{question.paperIndex}}.</p>
                                        <div class="que-item" v-html="question.question"></div>
                                    </div>
                                </div>
                            </div>
                        </i-col>
                        <i-col :xs="2" :sm="2" :md="1" :lg="1">
                            <div class="qScore">
                                <span v-if="examInfo.stuScore[index] != -1">{{examInfo.stuScore[index]}}/{{question.score}}</span>
                                <span v-if="examInfo.stuScore[index] == -1">{{$t("studentWeb.exam.report.noScore")}}</span>
                            </div>
                        </i-col>
                    </Row>
                    <div class="qAnaly" :class="{ hideqAnaly: closeAnsDetail }">
                        <div class="rightAns">
                            <div class="qAnserlist">
                                <div v-for="(item,index) in question.option" :key="index" style="display:flex;margin-top:5px;">
                                    ({{item.code}})<div style="margin-left:10px" v-html="item.value"></div>
                                </div>
                                <!-- 作答结果 -->
                                <div class="TitleRec1"><span style="margin:5px;color:#1472c7">{{$t("studentWeb.exam.report.ansRes")}}:</span></div>
                                <br />
                                <div v-if="ansData[index]" style="margin-left:10px" v-html="ansData[index].length > 0 ? ansData[index].join(' ') : $t('studentWeb.exam.report.noAns')"></div>
                            </div>
                        </div>
                        <!-- 参考答案、解析 -->
                        <div class="rightAnalys">
                            <div class="TitleRec2"><span style="margin-left:5px">{{$t("studentWeb.exam.report.testAns")}}:</span></div>
                            <br />
                            <div style="display:flex">
                                <div v-for="(item,index) in question.answer" :key="index" v-html="item" style="margin-left:10px;"></div>
                            </div>
                            <div class="TitleRec2"><span style="margin-left:5px">{{$t("studentWeb.exam.report.testAnalyse")}}:</span></div>
                            <br />
                            <div style="margin-left:10px;" v-html="question.explain != '' ?  question.explain : $t('studentWeb.exam.report.noAnalyse') "></div>
                            <div v-show="examInfo.stuScore[index] != -1 && examInfo.stuScore[index] != question.score" class="TitleRec2"><span style="margin-left:5px">{{$t("studentWeb.exam.report.repairSource")}}:</span></div>
                            <br />
                            <div style="margin-left:10px;display:flex" v-show="examInfo.stuScore[index] != -1 && examInfo.stuScore[index] != question.score ">
                                <span v-if="question.repair.length == 0">{{$t("studentWeb.exam.report.noSource")}}</span>
                                <div v-if="question.repair && question.repair.length > 0" class="repair-box">
                                    <Collapse style="width:85%" accordion @on-change="getSource(question.repair,question)">
                                        <Panel name="1">
                                            {{$t("studentWeb.exam.report.linkSource")}}
                                            <p slot="content">
                                                <List border size="small">
                                                    <ListItem v-for="(item,normalIndex) in repairSource.normal" :key="normalIndex">
                                                        <span style="margin-right:10px;" v-show="item.blobUrl">
                                                            <Icon color="#0066FF" custom="iconfont icon-share_link" size="20" />
                                                        </span><a :href="item.blobUrl" target="_blank">{{item.blobUrl}}</a>
                                                    </ListItem>
                                                    <ListItem v-show="repairSource.normal.length == 0">
                                                        <span>{{$t("studentWeb.exam.report.noSource")}}</span>
                                                    </ListItem>
                                                </List>
                                            </p>
                                        </Panel>
                                        <Panel name="2">
                                            {{$t("studentWeb.exam.report.fileSource")}}
                                            <p slot="content">
                                                <List border size="small">
                                                    <ListItem v-for="(item,fileIndex) in repairSource.file" :key="fileIndex">
                                                        <div style="width:100%">
                                                            <span style="margin-right:10px;">
                                                                <Icon v-if="item.fileType == 'zip'" custom="iconfont icon-zip" size="20" />
                                                                <!-- <Icon v-else-if="item.fileType == 'zip'" color="#8199AF" custom="iconfont icon-zip" size="20" /> -->
                                                                <Icon v-else-if="item.fileType == 'pdf'" color="#FF6464" custom="iconfont icon-pdf" size="20" />
                                                                <Icon v-else-if="item.fileType == 'ppt'|| item.fileType == 'pptx'" color="#FF8976" custom="iconfont icon-ppt" size="20" />
                                                                <Icon v-else-if="item.fileType == 'mp3'" color="#FF5562" custom="iconfont icon-mp3" size="20" />
                                                                <Icon v-else-if="item.fileType == 'mp4'" color="#8E4C9E" custom="iconfont icon-video1" size="20" />
                                                                <!-- <Icon v-else-if="item.fileType == 'zip'" custom="iconfont icon-video1" size="20" /> -->
                                                                <Icon v-else-if="item.fileType == 'doc'||item.fileType =='docx'" color="#6CCBFF" custom="iconfont icon-word" size="20" />
                                                                <Icon v-else-if="item.fileType == 'csv'||item.fileType =='xlsx'||item.fileType =='xls'" color="#25C273" custom="iconfont icon-xlsx" size="20" />
                                                                <Icon v-else-if="item.fileType == 'jpg'||item.fileType =='png'||item.fileType =='jpeg'" color="#30D1CA" custom="iconfont icon-jpg" size="20" />
                                                                <Icon v-else custom="iconfont icon-V" size="20" />
                                                            </span><a @click="getItemData(item)">{{item.name}}</a>
                                                            <span style="display:block;float:right;cursor:pointer">
                                                                <Icon type="md-download" size="18" @click="downloadFile(item)" />
                                                            </span>
                                                        </div>
                                                    </ListItem>
                                                    <ListItem v-show="repairSource.file.length == 0">
                                                        <span>{{$t("studentWeb.exam.report.noSource")}}</span>
                                                    </ListItem>
                                                </List>
                                            </p>
                                        </Panel>
                                    </Collapse>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 补救资源 -->
        <Modal v-model="previewStatus" footer-hide width="65%" @on-cancel="closePreview">
            <p slot="header" 
               style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>{{$t("studentWeb.exam.report.fileView")}}</span>
            </p>
            <div class="file-box" v-if="previewStatus">
                <video v-if="previewFile.file == 'video'"
                       id="previewVideo"
                       :src="previewFile.blobUrl"
                       width="870"
                       controls="controls"
                       style="max-height: 800px;">
                    {{$t('teachContent.tips8')}}
                </video>
                <audio v-else-if="previewFile.file == 'audio'" controls>
                    <source :src="previewFile.blobUrl">
                </audio>
                <img v-else-if="previewFile.fileType == 'jpg'||previewFile.fileType =='png'||previewFile.fileType =='jpeg' "
                     :src="previewFile.blobUrl"
                     style="border-radius: 5px;max-height: 800px;max-width:870px;" />
                <pdf ref="pdf"
                     v-else-if="previewFile.fileType == 'pdf'"
                     v-for="(page,index) in numPages"
                     :key="index"
                     :src="previewFile.blobUrl"
                     :page="page"></pdf>
                <!--<span v-else-if="previewFile.fileType == 'doc'||previewFile.fileType == 'csv'||previewFile.fileType == 'pptx' ">{{'https://view.officeapps.live.com/op/view.aspx?src=' + previewFile.blobUrl}}</span>-->
                <iframe v-else-if="previewFile.fileType == 'doc'||previewFile.fileType == 'csv'||previewFile.fileType == 'pptx'||previewFile.fileType == 'xls' " :src="'https://view.officeapps.live.com/op/view.aspx?src=' + previewFile.blobUrl" width='870' height='700' frameborder='1'></iframe>
                <span v-else>{{$t("studentWeb.exam.report.noReview")}}</span>
            </div>
        </Modal>
    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import LessonTestReportCharts from "./LessonTestReportCharts/LessonTestReportCharts";
    import Loading from "vue-loading-overlay";
    import "vue-loading-overlay/dist/vue-loading.css";
    export default {
        name: "LessonTestReport",
        components: {
            LessonTestReportCharts,
            Loading,
            pdf
        },
        props: {
            examInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            paperInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                renderComponent: true,
                isLoading: true,
                opacity: 0.6,
                //loading畫面
                closeAnsDetail: false,
                checkedAns: ["right", "wrong", "noAns"],
                testState: 0,// 表示有没有作答
                paperData: [], //所有题目信息
                ansData: [],
                repairSource: {
                    normal: [],
                    file: []
                },
                repairData: [],
                previewStatus: false,
                previewFile: {},
                numPages:null
            };
        },
        mounted() {
            this.testState = 0
            this.testJudge()
        },
        methods: {
            closePreview() {
                this.previewStatus = !this.previewStatus
                this.previewFile = {}
            },
           async getItemData(data) {
               this.previewStatus = false
                if (data.file) {
                    this.previewFile = this._.cloneDeep(data)
                    this.previewFile.blobUrl = await this.getFileSas(data)
                    if (this.previewFile.fileType == 'doc' || this.previewFile.fileType == 'csv'
                        || this.previewFile.fileType == 'xls' || this.previewFile.fileType == 'xlsx' ||
                        this.previewFile.fileType == 'pptx' || this.previewFile.fileType == 'ppt' || this.previewFile.fileType == 'docx') {
                        let url = escape(this.previewFile.blobUrl)
                        this.previewFile.blobUrl = url
                    }
                    if (this.previewFile.fileType == 'pdf') {
                        await this.getPdf(this.previewFile.blobUrl)
                    }
                    this.previewStatus = true
                }
            },
            getPdf(data) {
                let loadingTask = pdf.createLoadingTask(data)
                loadingTask.promise.then(pdf => {
                    this.numPages = pdf.numPages
                }).catch(err => {
                    this.Message.warning(this.$t('studentWeb.exam.report.pdfErr'))
                })
            },
            //获取文件授权
            async getFileSas(data) {
                if (data) {
                    let req = {
                        url: data.blobUrl
                    }
                    let curFile = ""
                    await this.$api.studentWeb.getFileSas(req).then(res => {
                         curFile = res.url
                     })
                    return curFile
                }
            },
            //下载补救文件资源
            async downloadFile(data) {
                let blobData = await this.getFileSas(data)
                const downloadRes = async () => {
                    let response = await fetch(blobData); // 内容转变成blob地址
                    let blob = await response.blob();  // 创建隐藏的可下载链接
                    let objectUrl = window.URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.href = objectUrl;
                    a.download = data.name;
                    a.click()
                    a.remove();
                }
                downloadRes();
            },
            getSource(data, info) {
                this.repairSource = {
                    normal: [],
                    file: []
                }
                let source = {
                    normal: [],
                    file: []
                }
                for (let item of data) {
                    if (item.type == 'normal') {
                        source.normal.push(item)
                    } else if (item.blobUrl) {
                        let code = item.blobUrl.split('/')
                        let data = code[code.length - 1].split('.')
                        item.name = code[code.length-1]
                        item.file = code[code.length - 2]
                        item.fileType = data[data.length -1]
                        source.file.push(item)
                    }
                }
                this.repairSource = source
            },
            showTest() {
                if (this.examInfo.subject !== undefined) {
                    console.log(this.examInfo);
                    this.$store.commit("ToggleLessonTestPopWithSubject", this.examInfo)
                }
            },
            //判断作答情况
            testJudge() {
                if (this.examInfo.subject !== undefined) {
                    this.testState = 0
                    let k = 0
                    for (let item of this.examInfo.stuScore) {
                        if (item == -1) {   //有未打分
                            k++
                        }
                    }
                    if (k != 0) {
                        if (this.examInfo.stuAns[0] == undefined) {
                            this.testState = 1 //未作答
                        } else {
                            this.testState = 2 //未评分
                            this.formPaper()
                        }
                    } else if (k == 0) {
                        this.testState = 3 //已评分
                        this.formPaper()
                    }
                }
            },
            getTestType(data) {
                for (let item of this.$t('global.testType')) {
                    if (item.value == data) {
                        return item.label
                    }
                }
            },
            //获取学生作答数据
            async getItem(data) {
                let datas = []
                if (data !== undefined) {
                    let codes = this.$store.getters.getItemTitle
                    let code = {
                        scope: codes.scope,
                        code: codes.scope === 'school' ? codes.school : codes.creatorId,
                        blob: data
                    }
                    let blob = this.formUrl(code)
                    code.blob = blob
                    datas = await this.$evTools.getComposeItem(code)
                    return datas
                } else {
                    return []
                }
            },
            //处理学生作答数据blob地址
            formUrl(data) { 
                let a = ""
                if (data.blob.indexOf('https://teammodelstorage') > -1) {
                    a = data.blob
                } else {
                    let blobUrl = JSON.parse(decodeURIComponent(localStorage.student_profile, "utf-8")).blob_uri
                    let studentBlob = blobUrl.split('/')
                    let url = data.scope == 'school' ? blobUrl : "https://" + studentBlob[studentBlob.length - 2] + '/' + this.$store.getters.getItemTitle.creatorId
                    a = `${url}/exam/${data.blob}`
                }
                return a 
            },
            async formPaper() {
                let paper = []
                this.paperData.length = 0
                this.ansData.length = 0
                let data = this.$store.getters.getPaperInfo.item
                let exam = [...data]
                if (this.$store.getters.getPaperInfo.item.length) {
                    for (let i = 0; i < exam.length; i++) {
                        if (exam[i].repair == undefined) {
                            exam[i].repair = []
                        }
                        if (exam[i].type == 'compose') {
                            let k = 1
                            if (exam[i].children.length > 0) {
                                for (let items of exam[i].children) {
                                    if (items.repair == undefined) {
                                        items.repair = []
                                    }
                                    items.parentInfo = exam[i]
                                    items.parent = i
                                    items.paperIndex = (i + 1) + '-' + k
                                    paper.push(items)
                                    k++
                                }
                            }
                        } else {
                            exam[i].paperIndex = i+1
                            paper.push(exam[i])
                        }
                    }
                }
                this.paperData = [...paper]
                if (this.paperData.length) {
                    this.ansData= await this.getItem(this.examInfo.stuAns[0])
                }
            },
            closeDetail() {
                this.closeAnsDetail = !this.closeAnsDetail;
            },
            checkedAnsFilter(index) {
                if (this.checkedAns.includes("right") == true && this.examInfo.stuScore[index] == this.paperData[index].score) {
                    return true;
                } else if (this.checkedAns.includes("wrong") == true && this.examInfo.stuScore[index] != -1 && this.examInfo.stuScore[index] != this.paperData[index].score)
                {
                    return true;
                } else if (this.checkedAns.includes("noAns") == true && this.examInfo.stuScore[index] == -1) {
                    return true;
                }
                else return false;

            },
        },
        computed: {
            testScore() {
                console.log(this.examInfo);
                console.log(this.paperInfo);
                let data = 0
                if (this.examInfo.subject !== undefined) {
                    for (let item of this.examInfo.stuScore) {
                        data += item
                    }
                }
                if(String(data).indexOf(".") != -1) {
                    data = data.toFixed(2)
                }
                return data
            },
            rightAns() {
                let info = {
                    all: 0,
                    right: 0,
                    noAns:0
                }
                if (this.examInfo.subject !== undefined) {
                    info = {
                        all: this.examInfo.stuScore.length,
                        right: 0,
                        noAns:0,
                        wrong:0,
                    }
                    if (this.paperData[0]!= undefined) {
                        for (let i = 0; i < this.examInfo.stuScore.length; i++) {
                            if (this.examInfo.stuScore[i] == -1) {
                                info.noAns++
                            } else if (this.examInfo.stuScore[i] == this.paperData[i].score && this.examInfo.stuScore[i] != -1) {
                                info.right++
                            } else {
                                info.wrong++
                            }
                        }
                    }
                }
                return info
            },
            difficultyRate() {
                let level = 0
                if (this.paperInfo.item.length) {
                    let levelArr = this.paperInfo.item.map(i => i.level)
                    level = this._.meanBy(levelArr).toFixed(1)
                }
                return Number(level)
            },
        },
        watch: {
            examInfo: {
                handler(val, oldval) {
                    if (this.examInfo.subject !== undefined) {
                        this.testState = 0
                        this.testJudge()
                    }
                },
                // 深度观察监听
                deep: true
            },
        }
    };
</script>

<style>
    @import "~@/assets/student-web/component_styles/lesson-testReport.css";
</style>

<style scoped>
    .lesson-test-report {
        min-height: 600px;
    }
    .que-item{
        margin-left:10px;
        max-height:300px;
        overflow-y:scroll;
    }
    .scoreboard {
        width: 100%;
        /*height: 638px;*/
        background: rgb(240, 240, 240);
        /*border: 1px solid rgba(0, 0, 0, 0.1);*/
        border-radius: 8px;
        padding: 44px 50px;
    }

    .scoreboard .ivu-card {
        margin-bottom: 20px;
    }

    .card-title {
        font-size: 16px;
        color: rgb(109, 114, 120);
    }

    .myscore {
        font-size: 60px;
        font-weight: 700;
        /*font-family: Arial, Helvetica, sans-serif;*/
        color: rgb(72, 72, 72);
    }

    .card-content {
        text-align: center;
    }

    .score-card {
        height: 140px;
    }

    .comment-card {
        padding-bottom: 20px;
    }

    .chart-card {
        z-index: 1
    }

    .keypoint {
        color: #03966a;
    }

    .difficulty-rate {
        text-align: center;
        margin-top: 20px;
        font-size: 32px;
        /*font-family: Arial, Helvetica, sans-serif;*/
        font-weight: 700;
    }

    .testReport-subject {
        position: absolute;
        right: 0px;
        top: 85px;
        border: solid 1px rgba(0, 0, 0, 0.2);
        padding: 0px 20px;
        border-radius: 4px;
        font-size: 20px;
    }

    .subject-title {
        color: #24b880 !important;
    }

    @media screen and (max-width: 1366px) {
        .difficulty-rate {
            margin-top: 10px !important;
            line-height: 30px;
            font-size: 30px;
        }

        .ivu-rate {
            white-space: nowrap;
        }
    }

    .qcontent {
        margin-top: 10px;
        list-style-type: none;
    }

    .qcol {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 20px 0px;
        padding-right: 0px;
    }

    .qtype {
        color: #6d7278;
        border: 2px #979797 solid;
        border-radius: 4px;
        padding: 2px;
        text-align: center;
    }

    .qtypeEn {
        padding: 2px;
        font-size: 6px;
    }

    .qAnsCondition {
        width: 4%;
        padding: 2px;
        text-align: center;
    }

    .qdesc {
        display:inline-flex;
        color: rgb(72, 72, 72);
    }

    .qScore {
        font-weight: 800;
        color: gray;
        text-align: right;
    }

    .qIcon {
        width: 24px;
        height: 24px;
        margin-right: 20px;
    }

    .qAnaly {
        margin-top: 0px;
        padding-left: 8.5%;
    }

    @media screen and (max-width: 767px) {
        .qAnaly {
            padding-left: 4.5%;
        }
    }

    .qAnaly .rightAns {
        color: #00ad6c;
    }

    .qAnserlist {
        color: gray;
    }

    .qAnaly .rightAnalys {
        color: gray;
        margin-top:10px;
    }

    .rightAnsItem {
        color: #00ad6c;
    }

    .wrongAnsItem {
        color: rgb(199, 71, 20);
    }

    .TitleRec1 {
        position: relative;
        height:15px;
        border-left: 10px solid #1472c7;
        float: left;
    }

    .TitleRec2 {
        position: relative;
        height: 15px;
        border-left: 10px solid gray;
        float: left;
    }

    .TitleRec3 {
        position: relative;
        top: 2px;
        width: 10px;
        height: 16px;
        margin-right: 5px;
        float: left;
        background-color: gray;
    }

    .related-question {
        margin-top: 1%;
        margin-left: 1.5%;
    }

        .related-question li {
            margin-top: 5px;
        }

    /**對問題進行篩選 */
    .filterBtn {
        /* display: inline-block; */
    }

    .filterBtn .wrong-exercises{
        /* border: 1px solid #515A6E; */
        border: none;
        border-radius: 4px;
        padding: 0 10px;
        height: 26px;
        color: white;
        margin-right: 25px;
        font-weight: bolder;
        float: right;
    }
    .filterBtn .wrong{
        background: #FF5508;
        cursor: pointer;
    }
    .filterBtn .nowrong{
        background: #b7b7b7;
        cursor: not-allowed;
    }


    .checkAns {
        display: inline-block;
        margin-left: 10px;
    }

        .checkAns input[type="checkbox"] {
            visibility: hidden;
            margin-left: -10px;
        }

        .checkAns:hover {
            cursor: pointer;
        }

        .checkAns span {
            position: relative;
            z-index: 2;
            padding: 10px;
            padding-right: 12px;
            font-weight: bolder;
        }

        .checkAns input[type="checkbox"]:checked ~ span {
            color: #fff;
            font-weight: bolder;
        }

        .checkAns input[type="checkbox"]:checked ~ .rightBtn{
            background-color: #00ad6c !important;
            border: none;
        }  
        
        .checkAns input[type="checkbox"]:checked ~ .noAnsBtn {
            background-color: rgb(183, 183, 183) !important;
            border: none;
        }

/*        .checkAns input[type="checkbox"]:checked ~ .rightBtn {
            background-color: rgb(20, 114, 199) !important;
            border: none;
        }*/

        .checkAns input[type="checkbox"]:checked ~ .wrongBtn {
            background-color: rgb(255, 85, 8) !important;
            border: none;
        }
    .rightBtn,
    .noAnsBtn,
    .wrongBtn {
        background-color: #fff;
        position: relative;
        height: 26px;
        top: -24px;
        margin-bottom: -20px;
        z-index: 1;
        border-radius: 4px;
        border: 1px solid rgb(197, 197, 197);
    }

    .ansDetail,
    .ansDetail:hover,
    .closeAnsDetail:hover {
        float: right;
        height: 28px;
        width: 28px;
        /* margin-top: -40px;
        margin-bottom: -40px; */
        color: #03966a;
        cursor: pointer;
    }

    .closeAnsDetail {
        float: right;
        height: 28px;
        width: 28px;
        margin-top: -40px;
        margin-bottom: -40px;
        color: gray;
        cursor: pointer;
    }

    .hideqAnaly {
        display: none;
    }

    .aclassoneloading3 {
        font-weight: bolder;
        position: absolute;
        text-align: center;
        top: -70%;
        right: -40%;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.5);
    }

    .vld-overlay {
        outline: none;
        border: none;
    }
    .repair-box{
        width:100%;
    }
        .repair-box /deep/ .ivu-list-container{
            max-height:300px;
            overflow:scroll;
        }
        .file-box{
            text-align:center;
            height:100%;
            overflow:scroll;
        }
    .lesson-test-report /deep/ .ivu-modal {
        top: 50px !important;
    }

    .lesson-test-report .file-box /deep/ .ivu-modal-body {
        padding: 16px;
        font-size: 14px;
        line-height: 1.5;
        height: 800px;
        overflow: scroll;
    }
    /*.image-viewer .close-icon {
        position: absolute;
        right: -16px;
        top: -16px;
        font-size: 24px;
        color: black;
        cursor: pointer;
        border-radius: 50px;
        background: white;
        padding: 2px;
    }*/
</style>
