<!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{
        padding-bottom: 10px;
    }

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

    .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">

            <div class="qu-content">

                <p>【{{ quData.quType===1?'单选题':'判断题' }}】{{ quData.content }}</p>
                <p v-if="quData.image!=null && quData.image!=''">
                    <el-image :src="quData.image" style="max-width:80%;" ></el-image>
                </p>
                <div v-if="quData.quType === 1 || quData.quType === 3">
                    <el-radio-group v-model="radioValues" readonly>
                        <el-radio v-for="an in quData.answerList" :key="an.id" :label="an.id" readonly>{{ an.content }}</el-radio>
                    </el-radio-group>
                </div>

                <!-- 多选题 -->
                <div v-if="quData.quType === 2">
                    <el-checkbox-group v-model="multiValues" readonly>
                        <el-checkbox v-for="an in quData.answerList" :key="an.id" :label="an.id">{{ an.content }}</el-checkbox>
                    </el-checkbox-group>
                </div>

            </div>

        </el-card>

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

        <el-card class="qu-analysis" style="margin-top: 20px; margin-bottom: 30px">
            选项解析：
            <div v-for="an in quData.answerList" :key="an.id" 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>

        <el-button type="info" onclick="closeItem()">返回</el-button>

    </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: {
            quData: {

            },

            radioValues: '',
            multiValues: [],
            analysisCount: 0,
            quId:[[${quId}]],
        },
        created() {
            console.log(this.quId)
                this.fetchData()
        },
        methods: {
            fetchData() {
                let that = this
                axios.get('/system/qu/detail/',{params:{quId: this.quId}}).then(response => {
                    that.quData = response.data.data

                    that.quData.answerList.forEach((an) => {
                        // 解析数量
                        if (an.analysis) {
                            that.analysisCount += 1
                        }

                        // 用户选定的
                        if (an.isRight) {
                            if (that.quData.quType === 1 || that.quData.quType === 3) {
                                that.radioValues = an.id
                            } else {
                                that.multiValues.push(an.id)
                            }
                        }
                    })
                })
            },
        }
    })
</script>
</body>
</html>
