<template>
    <div class="lesson-test-pop">
        <loading :active.sync="isLoading"
                 :is-full-page="fullPage"
                 background-color="#000"
                 :opacity="opacity">
            <template slot="default">
                <svg-icon icon-class="loader" class="loader-icon" />
            </template>
        </loading>
        <div v-if="WarmMessageisOpen" class="warmMessage">
            <div class="messageCard">
                <!---中途離開測驗之提示框---->
                <div class="messageCardContent1" v-if="showMessageNum == 1">
                    <h3>{{$t("studentWeb.exam.testpop.exitQuizhint")}}</h3>
                    <svg-icon icon-class="logoutComfirm" class="logoutComfirmIcon" />
                    <br />
                    <p v-show="closeTest">
                        {{$t("studentWeb.exam.testpop.exitQuizhintDe")}}
                        <br /> {{$t("studentWeb.exam.testpop.exitQuizhintDes")}}
                    </p>
                    <button class="messageCardBtn" @click="closeWarmMessage()">{{$t("studentWeb.exam.testpop.cancel")}}</button>
                    <button class="messageCardBtn" @click="quitTest()">{{$t("studentWeb.exam.testpop.ok")}}</button>
                </div>
                <!---每題都完成到最後一題交卷之提示框---->
                <div class="messageCardContent2" v-if="showMessageNum == 2">
                    <h3>{{$t("studentWeb.exam.testpop.submitQuizhint")}}</h3>
                    <svg-icon icon-class="finshedTest" class="handOnImg" />
                    <p>{{$t("studentWeb.exam.testpop.submitQuizhintDes1")}}</p>
                    <button class="messageCardBtn" @click="closeWarmMessage()">{{$t("studentWeb.exam.testpop.check")}}</button>
                    <button class="messageCardBtn" @click="closetest()">{{$t("studentWeb.exam.testpop.okSubmit")}}</button>
                </div>
                <!---有題目沒完成就交卷之提示框---->
                <div class="messageCardContent3" v-if="showMessageNum == 3">
                    <h3>{{$t("studentWeb.exam.testpop.submitQuizhint")}}</h3>
                    <svg-icon icon-class="unfinishedTest" class="handOnImg" />
                    <p>
                        {{$t("studentWeb.exam.testpop.conAnswer0")}}
                        <span style="color:rgb(250, 100, 0);font-weight:900">{{ undo }}{{$t("studentWeb.exam.testpop.conAnswer1")}}</span>{{$t("studentWeb.exam.testpop.conAnswer2")}}
                    </p>
                    <button class="messageCardBtn" @click="closeWarmMessage()">{{$t("studentWeb.exam.testpop.conAnswer")}}</button>
                    <button class="messageCardBtn" @click="closetest()">{{$t("studentWeb.exam.testpop.okSubmit")}}</button>
                </div>
            </div>
        </div>

        <div class="testTitle">
            <span class="logoutIcon" @click="openWarmMessage(1)">
                <svg-icon icon-class="logout" />
            </span>
            <span class="testTitleText">{{$t("studentWeb.home.exam")}}：{{ $store.getters.getItemTitle.name }}</span>
            <div class="myProgressBar">
                <span class="myTestProgresstitle">{{$t("studentWeb.exam.testpop.completion")}}</span>
                <Progress style="margin-top:15px" :percent="completeRate" />
            </div>
            <button v-if="closeTest" class="submitBtn" @click="openWarmMessage(2)" :class="{ hintClick:hintHandon() }">{{$t("studentWeb.exam.testpop.submitted")}}</button>
            <button v-if="!closeTest" class="submitBtn" :class="{ hintClick:hintHandon()  }">{{$t("studentWeb.exam.testpop.finish")}}</button>
        </div>
        <Row :gutter="30">
            <i-col class="questionArea"
                   :xs="24"
                   :sm="24"
                   :md="12"
                   :lg="20">
                <div class="questionContent" ref="questionBox">
                    <span class="hintwrap">
                        <Tooltip :content="$t('studentWeb.exam.report.noSource')" theme="light" placement="left">
                            <span class="hintIcon">
                                <svg-icon icon-class="hint" />
                            </span>
                        </Tooltip>
                    </span>
                    <div class="questioDes">
                        <div class="questionType" v-if="getQue(queNo).parent == undefined">
                            <span>{{getTestType(getQue(queNo).type)}}</span>
                        </div>
                        <div class="que-item" v-if="getQue(queNo).type != 'compose' && getQue(queNo).parent == undefined">
                            <span>{{ queNo +1 }}.</span>
                            <!--题目渲染-->
                            <div id="answer-box" v-html="getQue(queNo).question"></div>
                        </div>
                        <!--综合题-->
                        <div v-if="getQue(queNo).type == 'compose' || getQue(queNo).parent != undefined">
                            <div class="compose-content" v-if="getQue(queNo).parent !== undefined">
                                <div class="questionType">
                                    <span>{{getTestType(getQue(queNo).parentInfo.type)}}</span>
                                </div>
                                <div class="compose-box">
                                    <span style="margin-left:10px;font-weight:800;font-size:15px">{{$t("studentWeb.exam.testpop.queNo")}}</span>
                                    <br />
                                    <div class="compose-item">
                                        <!--<span w>{{ getQue(queNo).parent + 1}}.</span>-->
                                        <!--题干渲染-->
                                        <div v-html="getQue(queNo).parentInfo.question"></div>
                                    </div>
                                </div>
                                <div class="que-content">
                                    <span style="width:40px">{{ getQue(queNo).paperIndex}}:</span>
                                    <!--题目渲染-->
                                    <div class="que-items" id="answer-box" v-html="getQue(queNo).question"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="answers">
                        <div class="questionNo">{{$t("studentWeb.exam.testpop.myAns")}}</div>
                        <div class="answers-box">
                            <!--问答题-->
                            <div class="compose-content" v-if="getQue(queNo).type != 'judge' && getQue(queNo).type != 'single'  && getQue(queNo).type != 'multiple'">
                                <Compose ref="compose" :itemInfo="getQue(queNo)" :close="!closeTest" :textData="checkers[queNo]" :index="queNo" @dataGet="getComposeAns"></Compose>
                            </div>
                            <!--判断题选项-->
                            <div v-if="getQue(queNo).type == 'judge'" align="center">
                                <label class="testBtn yesNoBtn">
                                    <input type="radio" value="A" v-model="checkers[queNo][0]" :disabled="!closeTest" />
                                    <div class="testbg">
                                        <Icon type="ios-radio-button-off" />
                                    </div>
                                </label>
                                <label class="testBtn yesNoBtn">
                                    <input type="radio" value="B" v-model="checkers[queNo][0]" :disabled="!closeTest" />
                                    <div class="testbg">
                                        <Icon type="md-close" />
                                    </div>
                                </label>
                            </div>
                            <!--选择题选项-->
                            <div class="select-box" v-if="getQue(queNo).type != 'judge'">
                                <label class="testBtn"
                                       v-for="(item, index) in getQue(queNo).option"
                                       :key="index">
                                    <input type="checkbox"
                                           :value="getQue(queNo).option[index].code"
                                           v-model="checkers[queNo]"
                                           @click="getAns(queNo,index)"
                                           :disabled="!closeTest" />
                                    <div class="testbg">
                                        <div style="display:flex">
                                            <span>{{ getQue(queNo).option[index].code }}.</span>
                                            <div v-html="item.value" @click="showImg($event)"></div>
                                        </div>
                                        <div style="clear:both"></div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </i-col>
            <!--答题卡-->
            <i-col class="ansArea"
                   :xs="12"
                   :sm="12"
                   :md="6"
                   :lg="4">
                <div class="checkAnswer">
                    <span style="margin-top:10px;font-weight:800">{{$t("studentWeb.exam.testpop.myAnswerSheet")}}</span>
                    <br />
                    <br />
                    <span style="margin-top:10px;font-weight:800">{{$t("studentWeb.exam.testpop.qNo")}}</span>
                    <div class="que-box">
                        <div v-for="(item,index) in examInfo" :class="[checkers[index].length > 0 ? 'has-ans':'ans-box',index == queNo ?'select-item':'']" @click="gototheQues(index +1)">
                            <span style="padding:5px 5px;cursor:pointer"> {{ item.parent == undefined ? index +1 : item.paperIndex }}</span>
                        </div>
                    </div>
                </div>
                <!--切換頁-->
                <div class="pageCtl2">
                    <button @click="preQ()" v-show="queNo != 0">
                        <Icon type="ios-arrow-back" />{{$t("studentWeb.exam.testpop.previous")}}
                    </button>
                    <button @click="nextQ()"
                            v-show="queNo != (examInfo.length-1)"
                            :class="{ hintClick:queNo != (examInfo.length-1) && checkers[queNo] != ''}">
                        {{$t("studentWeb.exam.testpop.next")}}
                        <Icon type="ios-arrow-forward" />
                    </button>
                </div>
            </i-col>
        </Row>
        <!--图片放大显示-->
        <div class="imgDolg"
             v-show="imgPreview.show"
             @click.stop="imgPreview.show = false">
            <i class="el-icon-close"
               id="imgDolgClose"
               @click.stop="imgPreview.show = false"></i>
            <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
        </div>
    </div>
</template>

<script>
    import Loading from "vue-loading-overlay";
    import "vue-loading-overlay/dist/vue-loading.css";
    import Compose from './composePaper.vue'
    import Complete from './completePaper.vue'
    export default {
        name: "LessonTestPop",
        components: {
            Loading,
            Compose,
            Complete
        },
        created() {
            this.WarmMessageisOpen = false;
            this.showMessageNum = 0;
        },
        mounted() {
            this.formPaper()
            this.getPaper()
        },
        props: {
            papers: {
                type: Object,
                default:()=> {
                    return {}
                }
            }
        },
        data() {
            return {
                isLoading: false,
                fullPage: true,
                opacity: 0.6,
                showMessageNum: 0,
                WarmMessageisOpen: false,
                checkers: [],
                queNo: 0,
                undo: 0,
                closeTest: true,
                paperData: {},
                testType: [
                    {
                        label: this.$t('studentWeb.exam.queType.single'),
                        value: "single"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.multiply'),
                        value: "multiple"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.judge'),
                        value: "judge"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.complete'),
                        value: "complete"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.subjective'),
                        value: "subjective"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.compose'),
                        value: "compose"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.correct'),
                        value: "correct"
                    },
                    {
                        label: this.$t('studentWeb.exam.queType.connector'),
                        value: "connector"
                    },
                ],
                examInfo: [],
                judgeSelect: "",
                imgPreview: {
                    img: "",
                    show: false
                }
            };
        },
        methods: {
            //初始化試卷信息
            formPaper() {
                let paper = []
                this.examInfo.length = []
                let data = this.$store.getters.getPaperInfo.item
                let exam = [...data]
                this.$store.getters.getPaperInfo.item
                if (this.$store.getters.getPaperInfo.item.length) {
                        for (let i = 0; i < exam.length; i++) {
                            if (exam[i].type == 'compose') {
                                let k = 1
                                if (exam[i].children.length > 0) {
                                    for (let items of exam[i].children) {
                                        items.parentInfo = exam[i]
                                        items.parent = i
                                        items.paperIndex = (i + 1) + '-' + k
                                        paper.push(items)
                                        k++
                                    }
                                }
                            } else {
                                exam[i].paperIndex = i
                                paper.push(exam[i])
                            }
                    }
                    }
                this.examInfo = [...paper]
            },
            //獲取富文本返回數據
            getComposeAns(data, index) {
                if (index !== undefined) {
                    this.checkers[index] = []
                    if (data !== "") {
                        this.checkers[index].push(data)
                    }
                    this.hintHandon()
                }
            },
            getJudge() {
                this.checkers[this.queNo] = []
                this.checkers[this.queNo].push(this.judgeSelect)
            },
            getPaper() {
                let paper = this.$store.getters.getCurrentSubject
                this.paperData = { ...paper }
            },
            getTestType(data) {
                for (let item of this.testType) {
                    if (item.value == data) {
                        return item.label
                    }
                }
            },
            getQue(index) {
                if (this.examInfo.length) {
                    if (this.examInfo[index]) {
                        return this.examInfo[index];
                    } else {
                        return {
                            type: ''
                        }
                    }
                }
            },
            getAns(data, index) {
                if (this.getQue(this.queNo).type == "single") {
                    this.checkers[data].length = 0
                    this.checkers[data].push(this.getQue(this.queNo).option[index].code)
                }
            },
            //显示知识点(暂未对接)
            hintHandon() {
                let undoQuestion = 0
                for (var i = 0; i <= this.examInfo.length - 1; i++) {
                    if (this.checkers[i] == "") {
                        undoQuestion++
                    }
                }
                this.undo = undoQuestion
                if (undoQuestion != 0) return false
                else return true
            },
            gototheQues(index) {
                this.queNo = index - 1
            },
            preQ() {
                if (this.queNo > 0) this.queNo--
            },
            nextQ() {
                if (this.queNo < (this.examInfo.length - 1)) this.queNo++
            },
            //打开提示信息
            openWarmMessage(showMessageNum) {
                this.WarmMessageisOpen = true
                if (showMessageNum == 1) {
                    this.showMessageNum = showMessageNum
                } else if (showMessageNum == 2) {
                    for (var i = 0; i <= this.examInfo.length; i++) {
                        if (this.checkers[i] == "" && this.getQue(i).type != 'compose') {
                            this.showMessageNum = 3
                            break;
                        }
                        if (this.checkers[i] != "") {
                            this.showMessageNum = 2
                        }
                    }
                } else return;
            },
            //关闭提示信息
            closeWarmMessage() {
                this.WarmMessageisOpen = false
            },
            //提交作答记录
            closetest() {
                this.WarmMessageisOpen = false
                if (this.checkers.length) {
                    this.isLoading = true;
                    let codes = this.$store.getters.getItemTitle.code.split('-')
                    let req = {
                        id: this.$store.getters.getItemTitle.id,
                        answer: this.checkers,
                        studentId: this.$store.state.userInfo.sub,
                        classId: this.$store.getters.getExamInfo.allClass,
                        subjectId: this.$store.getters.getExamInfo.subject.id,
                        multipleRule: this.$store.getters.getExamInfo.multipleRule,
                        paperId: this.$store.getters.getPaperInfo.id,
                        code: codes[1],
                        scode: this.$store.getters.getItemTitle.scode
                    }
                    this.$api.studentWeb.SaveStuExamPaper(req).then(res => {
                        if (res) {
                            this.$Message.success(this.$t('studentWeb.exam.submitSuccess'))
                            setTimeout(() => {
                                this.$store.commit("ToggleLessonTestPopWithSubject", "")
                                this.isLoading = false
                            }, 2000)
                        }
                    }, err => {
                            this.$Message.warning(this.$t('studentWeb.exam.submitFail'))
                        setTimeout(() => {
                            this.isLoading = false
                        }, 1000)
                    })
                }
            },
            //退出测试
            quitTest() {
                this.isLoading = true
                setTimeout(() => {
                    this.$store.commit("ToggleLessonTestPopWithSubject", "")
                    this.isLoading = false
                }, 500)
            },
            async getItem(data) {
                let datas = []
                if (data !== undefined) {
                    let key = this.$store.getters.getExamInfo.code.split('-')
                    let code = {
                        scope: this.$store.getters.getExamInfo.scope,
                        code: key[(key.length - 1)],
                        blob: data
                    }
                    datas = await this.$evTools.getComposeItem(code)
                    return datas
                } else {
                    return []
                }
            },
            //放大图片
            showImg(e) {
                this.imgPreview = {
                    img: "",
                    show: false
                }
                if (e.target.tagName == 'IMG') {
                    this.imgPreview.img = e.target.src
                    this.imgPreview.show = true
                }
            },
        },

        watch: {
            papers: {
               async handler(newV, oldV) {
                    if (newV.item.length) {
                        this.checkers.length = 0
                        this.closeTest = true
                        if (this.$store.getters.getCurrentSubject.stuAns[0] !== undefined) {
                            let data = []
                            data = await this.getItem(this.$store.getters.getCurrentSubject.stuAns[0])
                            if (data.length) {
                                this.checkers = [...data]
                            } else this.$Message.warning(this.$t('studentWeb.exam.msgWarning'))
                            this.closeTest = false
                            } else {
                            for (let i = 0; i < this.$store.getters.getCurrentSubject.stuScore.length; i++) {
                                    this.checkers == this.checkers.push([])
                                }
                        }
                    }
                },
                deep: true,
                immediate: true
            }
        },
        computed: {
            completeRate() {
                if (this.examInfo.length) {
                    let data = 0
                    data = Math.ceil(((this.examInfo.length - this.undo) / this.examInfo.length) * 100)
                    return data
                } else {
                    return 0
                }

            }
        }
    }
</script>

<style scoped>
    @import "~@/assets/student-web/component_styles/paper-test.css";

    .que-item /deep/ table {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

        .que-item /deep/ table td, table th {
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        .que-item /deep/ table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
        }

    .que-items /deep/ table {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

        .que-items /deep/ table td, table th {
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        .que-items /deep/ table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
        }

    .imgDolg {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 9999;
        background-color: rgba(140, 134, 134, 0.6);
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .imgDolg img {
            width: 60%;
            border: 1px solid #eee;
            height: 95%;
        }

        .imgDolg #imgDolgClose {
            position: fixed;
            top: 35px;
            cursor: pointer;
            right: 17%;
            font-size: 50px;
            color: white;
        }
</style>