<!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;
        font-size: 16px;
    }

    .qu-analysis p{
        color: #555; font-size: 14px
    }
    .qu-analysis-line{
        margin-top: 20px; border-bottom: #eee 1px solid
    }

    .el-checkbox-group label,.el-radio-group label{
        width: 100%;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
    <div class="app-container">

        <el-card style="margin-top: 20px;font-size: 16px">

            <div class="qu-content">

                <p>【{{ quData.quTypeData | quTypeFilter }}】{{ 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="answerValues[0]" readonly>
                        <el-radio v-for="an in quData.answerList" :key="an.id" :label="an.id" readonly>
                            {{ an.abc }}.{{ an.content }}
                            <div v-if="an.image!=null && an.image!=''" style="clear: both">
                                <el-image :src="an.image" style="max-width:100%;" />
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>

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

                <div v-if="analysisShow" style="margin-top: 20px; color: #1890ff; font-weight: bold">
                    正确答案：{{ rightTags.join(' ') }}
                </div>

            </div>

        </el-card>

        <el-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px">
            整题解析：
            <p>{{ quData.analysis }}</p>
            <p v-if="!quData.analysis">暂无解析内容！</p>
        </el-card>

        <el-card v-if="analysisShow" class="qu-analysis" style="margin-top: 20px;">
            选项解析：
            <div v-for="an in quData.answerList" v-if="an.analysis" class="qu-analysis-line">
                <p style="color: #555;">{{ an.content }}：</p>
                <p style="color: #1890ff;">{{ an.analysis }}</p>
            </div>
            <p v-if="analysisCount === 0">暂无选项解析</p>

        </el-card>

        <div style="padding-top: 30px">
            <el-button type="primary" @click="handNext">继续下一题</el-button>
            <el-button type="info" onclick="closeItem()">返回</el-button>
        </div>

    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: element-js" />
<script th:inline="javascript">
    var app = new Vue({
        el: '#app',
        data: {
            examId: '',
            quId: '',
            tags: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
            analysisShow: false,
            quData: {
                quTypeData:''
            },
            answerValues: [],
            rightValues: [],
            rightTags: []
        },
        created() {
            this.examId = [[${examId}]]

            this.fetchNextQu()
        },
        methods: {
            clearValues() {
                this.answerValues = []
                this.rightValues = []
                this.analysisShow = false
                this.rightTags = []
            },
            // 查找试卷详情
            fetchQuDetail(id) {
                // 当前赋值
                this.quId = id
                this.clearValues()
                let that = this
                axios.get('/system/qu/detail',{params:{quId:id}}).then(response => {
                    // 题目信息
                    that.quData = response.data.data
                    if (that.quData.quType === 1) {
                        that.quData.quTypeData = '单选题'
                    }else if(that.quData.quType === 3){
                        that.quData.quTypeData = '判断题'
                    }else if(that.quData.quType === 2){
                        that.quData.quTypeData = '多选题'
                    }
                    // 保存正确答案
                    that.quData.answerList.forEach((an, index) => {
                        an.abc = that.tags[index]

                        // 用户选定的
                        if (an.isRight) {
                            that.rightValues.push(an.id)
                            that.rightTags.push(an.abc)
                        }
                    })
                })
            },
            fetchNextQu() {
                // 查找下一个
                let that = this
                let param = {
                    examId: this.examId,
                    quId: this.quId
                }
                axios.post('/system/userBook/next',param).then(response => {
                    that.fetchQuDetail(response.data.msg)
                })
            },
            handNext() {
                // 直接显示下一个
                if (this.analysisShow) {
                    // 正确显示下一个
                    this.fetchNextQu()
                } else {
                    // 直接判断正确性
                    if (this.rightValues.join(',') === this.answerValues.join(',')) {
                        this.$message({
                            message: '回答正确，你好棒哦！',
                            type: 'success'
                        })

                        // 正确显示下一个
                        this.fetchNextQu()
                    } else {
                        // 错误显示解析
                        this.analysisShow = true

                        this.$message({
                            message: '很遗憾，做错了呢，请参考答案解析！',
                            type: 'error'
                        })
                    }
                }
            }
        }
    })
</script>
</body>
</html>
