<template>
    <div class="lesson-test">
        <br />
        <PaperTest :papers="selectData" v-if="this.$store.getters.getisOpenLessonTestPopNow" /> 
        <div>
            <div class="load-box">
                <load :active.sync="isLoad"
                      background-color="#000">
                    <template slot="default">
                        <svg-icon icon-class="loader" class="loader-icon" />
                    </template>
                </load>
            </div>
            <EventBasicInfo :paper="paperData" />
            <Tabs :value="selectTab" v-if="paperData.length">
                <!-- 评测内容 -->
                <TabPane :label='$t("studentWeb.exam.examData")' name="test">
                    <div class="title-rect-group">
                        <!-- <div class="title-rect" /> -->
                        <h2 class="title-rect-name">{{$t("studentWeb.exam.examLink")}}</h2>
                    </div>
                    <!--多學科試卷-->
                    <div v-if="paperData.length > 0 ">
                        <div class="item-box">
                            <div v-for="(item, index) in paperData"
                                 :key="index"
                                 :class="['paper-item',item.paperId == chooseData.paperId ? 'paper-choose' : '']"
                                 @click="opentestWithSubject(item)">
                                <svg-icon icon-class="test" class="title-icon" />
                                <span style="margin-top:5px">{{ item.subject.name }}{{$store.getters.getItemTitle.scope == 'school' ? $t('studentWeb.exam.isSubject'):''}}</span>
                                <div :class="{ unfinished: item.stuAns.length == 0 ,finished:item.stuAns.length != 0 }">
                                    <Icon style="margin-top:-10px;margin-left:-8px;" type="ios-checkmark" size="36" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="title-rect-group">
                        <div v-if="chooseData.subject !== undefined">
                            <!-- <div class="title-rect" /> -->
                            <h2 class="title-rect-name">{{$t("studentWeb.exam.subjectNow")}}：{{chooseData.subject.name}}</h2>
                            <LessonTestReport :paperInfo="selectData" :examInfo="chooseData" />
                        </div>
                    </div>
                </TabPane>
                <!-- 成绩分析 -->
                <TabPane :label="$t('studentWeb.exam.gradeReport')" v-if="isTestOver" name="analyse">
                    <div class="title-rect-group">
                        <!-- <div class="title-rect" /> -->
                        <h2 class="title-rect-name">{{$t("studentWeb.exam.gradeAnalyse")}}</h2>
                    </div>
                    <div class="student-score">
                        <StudentScore :examData="paperData" :stuData="stuData"></StudentScore>
                    </div>
                </TabPane>
            </Tabs>
        </div>
</div>
</template>

<script>
    import Load from "vue-loading-overlay";
    import "vue-loading-overlay/dist/vue-loading.css";
    import EventBasicInfo from "../../EventBasicInfo";
    import LessonTestReport from "./LessonTestReport";
    import StudentScore from "./LessonTestReportCharts/StudentScore";
    import PaperTest from "./PaperTest";
    export default {
        name: "PaperView",
        components: {
            EventBasicInfo,
            LessonTestReport,
            PaperTest,
            Load,
            StudentScore
        },
        created() {
            this.getPaperData()
        },
        mounted() {
            this.selectTab = "test"
            this.privateType = this.$store.getters.getItemTitle.owner
        },
        data() {
            return {
                unhintNextItem: false,
                ishideHint: false,
                //提示下一個
                mockdata: "",
                nextItem: "", //存放下個活動預告
                isHintNextItem: false,
                showHint: false,
                paperData: [],
                openEva: false,
                selectData: {}, // 存放完整试卷接口的返回值
                isExamDown: false,
                chooseData: {},
                examData: [],
                isLoad: false,
                stuData: {},
                isTestOver: false,
                selectTab: "test",
                paperCtn: null, // 当前评测的scope
                privateType: null, //评测类型
            };
        },
        methods: {
            getPaperData() {
                this.paperData = []
                this.stuData = {}
                this.chooseData = {}
                this.isTestOver = false
                this.isLoad = true
                if (this.$store.getters.getItemTitle.name !== undefined) {
                    let paper = this.$store.getters.getItemTitle
                    let codes = this.$store.getters.getItemTitle.scope == 'school' ? this.$store.getters.getItemTitle.school : this.$store.getters.getItemTitle.creatorId
                    let req = {
                        id: paper.id,
                        studentId: this.$store.state.userInfo.sub,
                        code: codes,
                        scode: paper.scode
                    }
                    this.paperCtn = paper.scope
                    let isTest = 0
                    this.$api.studentWeb.FindStudentPaper(req).then(res => {
                        console.log(res)
                        if (res.papers.length) {
                            this.stuData = res
                            let resData = res
                            for (let item of resData.papers) {
                                if (item.scope) {
                                    this.paperData.push(item)
                                }
                            }
                            for (let i = 0; i < this.paperData.length; i++) {
                                this.paperData[i].subject = resData.subjects[i]
                                this.paperData[i].allClass = resData.claId
                                if (resData.stuAns[i] == undefined) {
                                    this.paperData[i].stuAns = []
                                    this.paperData[i].stuScore = []
                                } else {
                                    if (resData.mark[i] !== "") {
                                        this.paperData[i].stuAns = [resData.mark[i]]
                                    } else {
                                        this.paperData[i].stuAns = resData.stuAns[i]
                                    }
                                    this.paperData[i].stuScore = resData.stuScore[i]
                                    if (resData.stuAns[i][0] !== undefined) {
                                        let k = 0
                                        for (let item of resData.stuScore[i]) {
                                            if (item == -1) {   //有未打分
                                                k++ // 没有打分+1
                                            }
                                        }
                                        if (k == 0 && this.paperData[i].progress == 'finish') {
                                            isTest++
                                        }
                                    }
                                }
                            }
                            if (isTest == this.paperData.length) {
                                this.isTestOver = true
                            }
                            this.opentestWithSubject(this.paperData[0])
                        } else {
                            this.$Message.warning('试卷已删除！')
                        }
                    })
                }
                this.isLoad = false
            },
            dateFormat(timestamp) {
                var date = new Date(timestamp)
                var Y = date.getFullYear() + '-'
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                var D = date.getDate() + ' '
                return Y + M + D;
            },
            hidehint() {
                this.ishideHint = !this.ishideHint;
            },
            opentest: function () {
                this.$store.commit("ToggleLessonTestPop");
            },
            opentestWithSubject(item) {
                if (item !== undefined) {
                    this.getPaper(item)
                }
            },
            async getPaper(data) {
                this.isExamDown = false
                this.isLoad = true
                this.selectData = {}
                this.chooseData = {}
                console.log(this.$store.getters.getItemTitle);
                let codes = this.$store.getters.getItemTitle.scope == 'school' ? data.school : data.creatorId
                if (data.blob !== undefined && data.blob !== "") {
                    let code = {
                        scope: this.paperCtn,
                        code: codes,
                        blob: data.blob,
                        examId: codes
                    }
                    let exam = {}
                    for (let item of this.examData) {
                        if (data.paperId == item.id) {
                            exam = item
                        }
                    }
                    if (exam.id == undefined) { 
                        this.selectData = await this.$evTools.getStuPaper(code)
                        this.examData.push(this.selectData)
                    } else {
                        this.selectData = exam
                    }
                    if (data.stuScore[0] == undefined) {
                        let score = []
                        for (let item of this.selectData.slides) {
                            if (item.type !== 'compose') {
                                score.push(-1)
                            }
                        }
                        data.stuScore = score
                    }
                    this.chooseData = data
                    this.isLoad = false
                    if (this.selectData.item.length > 0) {
                        if (data.stuAns[0] !== undefined) {
                            this.isExamDown = true
                        }
                        this.$store.commit("SetPaperInfo", this.selectData)
                        this.$store.commit("SetExamInfo", data)
                    }
                }
            },
        },
        computed: {
            listData() {
                return this.$store.getters.getCurrentSubject;
            }
        },
        watch: {
            $route: {
                handler() {
                    this.isExamDown = false
                    this.examData = []
                    this.getPaperData()
                },
                // 深度观察监听
                deep: true
            },
            listData: {
                handler() {
                    if (this.$store.getters.getCurrentSubject == '') {
                        this.getPaperData()
                    }
                },
                // 深度观察监听
                deep: true
            },
        },
    };
</script>

<style scoped>
    @import "~@/assets/student-web/component_styles/paper-view.css";
    .student-score ::-webkit-scrollbar {
        width: 0px;
    } 
</style>
