<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增题库')" />
    <th:block th:include="include :: element-css" />
</head>
<style>

    .qu-content div{
        line-height: 30px;
        width: 100%;
    }

    .el-checkbox-group label,.el-radio-group label{
        width: 100%;
    }

    .content-h{
        height: calc(100vh - 110px);
        overflow-y: auto;
    }

    .card-title{
        background: #eee;
        line-height: 35px;
        text-align: center;
        font-size: 14px;
    }
    .card-line{
        padding-left: 10px
    }
    .card-line span {
        cursor: pointer;
        margin: 2px;
    }
    .el-radio, .el-checkbox{
        padding: 9px 20px 9px 10px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        margin-bottom: 10px;
        width: 100%;
    }

    .is-checked{
        border: #409eff 1px solid;
    }

    .el-radio img, .el-checkbox img{
        max-width: 200px;
        max-height: 200px;
        border: #dcdfe6 1px dotted;
    }

    .el-checkbox__inner {
        display: none;
    }

    .el-radio__inner{
        display: none;
    }

    .el-checkbox__label{
        line-height: 30px;
    }

    .el-radio__label{
        line-height: 30px;
    }
.ibox-content{
    height: 99%;
}
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
    <div class="app-container">

        <el-row :gutter="24">

            <el-col :span="24">
                <el-card style="margin-bottom: 10px">

                    距离考试结束还有：
                    <span style="color: #ff0000; font-weight: 700">{{ min }}分钟{{ sec }}秒</span>
                    <el-button :loading="loading" style="float: right; margin-top: -10px" type="primary" icon="el-icon-plus" @click="handHandExam()">
                        {{ handleText }}
                    </el-button>

                </el-card>
            </el-col>

            <el-col :span="5" :xs="24" style="margin-bottom: 10px">

                <el-card class="content-h">

                    <p class="card-title">答题卡</p>
                    <el-row :gutter="24" class="card-line" style="padding-left: 10px">
                        <el-tag type="info">未作答</el-tag>
                        <el-tag type="success">已作答</el-tag>
                    </el-row>

                    <div v-if="paperData.radioList!==undefined && paperData.radioList.length > 0">
                        <p class="card-title">单选题</p>
                        <el-row :gutter="24" class="card-line">
                            <el-tag v-for="item in paperData.radioList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)"> {{ item.sort+1 }}</el-tag>
                        </el-row>
                    </div>

                    <div v-if="paperData.multiList!==undefined && paperData.multiList.length > 0">
                        <p class="card-title">多选题</p>
                        <el-row :gutter="24" class="card-line">
                            <el-tag v-for="item in paperData.multiList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)">{{ item.sort+1 }}</el-tag>
                        </el-row>
                    </div>

                    <div v-if="paperData.judgeList!==undefined && paperData.judgeList.length > 0">
                        <p class="card-title">判断题</p>
                        <el-row :gutter="24" class="card-line">
                            <el-tag v-for="item in paperData.judgeList" :type="cardItemClass(item.answered, item.quId)" @click="handSave(item)">{{ item.sort+1 }}</el-tag>
                        </el-row>
                    </div>

                </el-card>

            </el-col>

            <el-col :span="19" :xs="24">

                <el-card class="qu-content content-h">
                    <p v-if="quData.content">{{ quData.sort + 1 }}.{{ quData.content }}</p>
                    <p v-if="quData.image!=null && quData.image!=''">
                        <el-image :src="quData.image" style="max-width:100%;" />
                    </p>
                    <div v-if="quData.quType === 1 || quData.quType===3">
                        <el-radio-group v-model="radioValue">
                            <el-radio v-for="item in quData.answerList" :label="item.id">{{ item.abc }}.{{ item.content }}
                                <div v-if="item.image!=null && item.image!=''" style="clear: both">
                                    <el-image :src="item.image" style="max-width:100%;" />
                                </div>
                            </el-radio>
                        </el-radio-group>
                    </div>

                    <div v-if="quData.quType === 2">

                        <el-checkbox-group v-model="multiValue">
                            <el-checkbox v-for="item in quData.answerList" :key="item.id" :label="item.id">{{ item.abc }}.{{ item.content }}
                                <div v-if="item.image!=null && item.image!=''" style="clear: both">
                                    <el-image :src="item.image" style="max-width:100%;" />
                                </div>
                            </el-checkbox>
                        </el-checkbox-group>

                    </div>

                    <div style="margin-top: 20px">
                        <el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
                            上一题
                        </el-button>

                        <el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
                            下一题
                        </el-button>

                    </div>

                </el-card>

            </el-col>

        </el-row>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: element-js" />
<script type="text/javascript">
    var prefix = ctx + "system/paper";
    var app = new Vue({
        el: '#app',
        data:{
// 全屏/不全屏
            isFullscreen: false,
            showPrevious: false,
            showNext: true,
            loading: false,
            handleText: '交卷',
            pageLoading: false,
            // 试卷ID
            paperId: '',
            //
            examId:'',
            // 当前答题卡
            cardItem: {},
            allItem: [],
            // 当前题目内容
            quData: {
                answerList: []
            },
            // 试卷信息
            paperData: {
                leftSeconds: 99999,
                radioList: [],
                multiList: [],
                judgeList: []
            },
            // 单选选定值
            radioValue: '',
            // 多选选定值
            multiValue: [],
            // 已答ID
            answeredIds: [],
            min:'',
            sec:''
        },
        mounted() {
            this.paperId = '[[${paperId}]]'
            this.examId = '[[${examId}]]'
            this.fetchData()
        },
        watch:{
            'paperData.leftSeconds': {
                handler(newVal) {
                    // this.paperData.leftSeconds = newVal
                    this.countdown()
                }
            }
        },
        methods: {
            countdown() {
                // 清除之前的定时器，确保只有一个定时器在运行
                if (this.timer) {
                    clearInterval(this.timer)
                }
                this.timer = setInterval(() => {
                    if (this.paperData.leftSeconds < 0) {
                        this.doHandler()
                        clearInterval(this.timer) // 清除定时器
                        return
                    }
                    this.min = parseInt(this.paperData.leftSeconds / 60).toString().padStart(2, '0')
                    this.sec = parseInt(this.paperData.leftSeconds % 60).toString().padStart(2, '0')
                    this.paperData.leftSeconds -= 1

                    console.log(this.min, this.sec)
                }, 1000)
            },
            // 答题卡样式
            cardItemClass(answered, quId) {
                if (quId === this.cardItem.quId) {
                    return 'warning'
                }

                if (answered) {
                    return 'success'
                }

                if (!answered) {
                    return 'info'
                }
            },

            /**
             * 统计有多少题没答的
             * @returns {number}
             */
            countNotAnswered() {
                let notAnswered = 0

                this.paperData.radioList.forEach(function(item) {
                    if (!item.answered) {
                        notAnswered += 1
                    }
                })

                this.paperData.multiList.forEach(function(item) {
                    if (!item.answered) {
                        notAnswered += 1
                    }
                })

                this.paperData.judgeList.forEach(function(item) {
                    if (!item.answered) {
                        notAnswered += 1
                    }
                })

                return notAnswered
            },

            /**
             * 下一题
             */
            handNext() {
                const index = this.cardItem.sort + 1
                this.handSave(this.allItem[index])
            },

            /**
             * 上一题
             */
            handPrevious() {
                const index = this.cardItem.sort - 1
                this.handSave(this.allItem[index])
            },

            doHandler() {
                this.handleText = '正在交卷，请等待...'
                this.loading = true

                let that = this
                axios.get(prefix + '/submitExam/' + this.paperId).then(() => {
                    that.$message({
                        message: '试卷提交成功，即将进入试卷详情！',
                        type: 'success'
                    })
                    $.modal.close()

                    var url = 'system/paper/toView/' + that.paperId
                    $.modal.openTab("考试结果", url);

                })
            },

            // 交卷操作
            handHandExam() {
                const that = this

                // 交卷保存答案
                this.handSave(this.cardItem, function() {
                    const notAnswered = that.countNotAnswered()

                    let msg = '确认要交卷吗？'

                    if (notAnswered > 0) {
                        msg = '您还有' + notAnswered + '题未作答，确认要交卷吗?'
                    }

                    that.$confirm(msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.doHandler()
                    }).catch(() => {
                        that.$message({
                            type: 'info',
                            message: '交卷已取消，您可以继续作答！'
                        })
                    })
                })
            },

            // 保存答案
            handSave(item, callback) {
                if (item.id === this.allItem[0].id) {
                    this.showPrevious = false
                } else {
                    this.showPrevious = true
                }

                // 最后一个索引
                const last = this.allItem.length - 1

                if (item.id === this.allItem[last].id) {
                    this.showNext = false
                } else {
                    this.showNext = true
                }

                const answers = this.multiValue
                if (this.radioValue !== '') {
                    answers.push(this.radioValue)
                }

                const params = { paperId: this.paperId, quId: this.cardItem.quId, answers: answers, answer: '' }
                let that = this
                axios.post(prefix + '/fillAnswer',params).then(() => {
                    // 必须选择一个值
                    if (answers.length > 0) {
                        // 加入已答列表
                        that.cardItem.answered = true
                    }

                    // 最后一个动作，交卷
                    if (callback) {
                        callback()
                    }

                    // 查找详情
                    that.fetchQuData(item)
                })
            },

            // 试卷详情
            fetchQuData(item) {
                // 获得详情
                this.cardItem = item
                // 查找下个详情
                let that = this
                const params = { paperId: this.paperId, quId: item.quId }
                axios.post(prefix+'/quDetail',params).then(response => {
                    that.quData = response.data.data
                    that.radioValue = ''
                    that.multiValue = []

                    let _that = that
                    // 填充该题目的答案
                    that.quData.answerList.forEach((item) => {
                        if ((_that.quData.quType === 1 || _that.quData.quType === 3) && item.checked) {
                            _that.radioValue = item.id
                        }

                        if (_that.quData.quType === 2 && item.checked) {
                            _that.multiValue.push(item.id)
                        }
                    })
                })
            },

            // 试卷详情
            fetchData() {
                let _that = this
                axios.get(prefix+'/detail/'+ this.paperId)
                    .then((res)=>{
                        // 试卷内容
                        _that.paperData = res.data.data

                        // 获得第一题内容
                        if (_that.paperData.radioList && _that.paperData.radioList.length>0) {
                            _that.cardItem = _that.paperData.radioList[0]
                        } else if (_that.paperData.multiList && _that.paperData.multiList.length>0) {
                            _that.cardItem = _that.paperData.multiList[0]
                        } else if (_that.paperData.judgeList && _that.paperData.judgeList.length>0) {
                            _that.cardItem = _that.paperData.judgeList[0]
                        }

                        const that = _that

                        _that.paperData.radioList.forEach(function(item) {
                            that.allItem.push(item)
                        })

                        _that.paperData.multiList.forEach(function(item) {
                            that.allItem.push(item)
                        })

                        _that.paperData.judgeList.forEach(function(item) {
                            that.allItem.push(item)
                        })

                        // 当前选定
                        _that.fetchQuData(_that.cardItem)
                    })
            }

        }
    })
</script>
</body>
</html>
