<template>
    <div class="base-list-box">
            <div class="exercise-item" v-for="(item,index) of items" :key="index">
                <!-- 题干部分 -->
                <div class="item-question" style="pointer-events:none">
                    <p>{{ index + 1 }} : <span v-html="item.question"></span></p>
                </div>
                <!-- 选项部分 -->
                <div v-for="(option,optionIndex) in item.option" :key="optionIndex" class="item-options" style="pointer-events:none">
                    <p class="item-option-content">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} : <span v-html="option.value"></span></p>
                </div>
                <div class="toggle-area">
                    <!-- 答案展示部分 -->
                    <div class="item-explain">
                        <span class="explain-title">【答案】</span>
                        <div class="item-explain-details">
                            <!-- 问答题答案 -->
                            <div v-if="item.type === 'Subjective'">
                                <span v-for="(answer,index) in item.answer" :key="index" v-html="item.answer.length ? answer : '未设置答案'"></span>
                            </div>
                            <!-- 填空题答案 -->
                            <div v-else-if="item.type === 'Complete'">
                                <span :class="[ item.type === 'Complete' ? 'item-answer-item':'']" v-for="(answer,index) in item.answer" :key="index" v-html="answer"></span>
                            </div>
                            <!-- 其余题型答案 -->
                            <div v-else>
                                <span :class="[ item.type === 'Complete' ? 'item-answer-item':'']" v-for="(answer,index) in item.answer" :key="index">{{answer}}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 解析部分 -->
                    <div class="item-explain">
                        <span class="explain-title">【解析】</span>
                        <div class="item-explain-details">
                            <span v-html="item.explain || '暂无解析'"></span>
                        </div>
                    </div>

                </div>
            </div>
    </div>
</template>

<script>
    export default {
        name: 'headers',
        props: ['items'],
        data() {
            return {


            }
        },
        created() {

        },
        methods: {

        },
        mounted() {
            // this.$emit('chooseExam', this.examList[0]);
        }
    }
</script>

<style>
    .base-list-box{
        padding-bottom:50px;
    }

    .base-list-box .exercise-item {
        position: relative;
        margin-top: 30px;
        font-size: 14px;
        color: #fff;
        padding: 0 20px;
        border-bottom: 1px dashed #5d5d5d;
    }

        .base-list-box .exercise-item .item-question {
            line-height: 30px;
        }

        .base-list-box .exercise-item .item-options {
            line-height: 30px;
        }

        .base-list-box .exercise-item .item-explain {
            margin: 20px 0;
            color: rgb(4, 216, 164);
        }

            .base-list-box .exercise-item .item-explain .explain-title {
                color: rgb(4, 216, 164);
            }

            .base-list-box .exercise-item .item-explain .item-explain-details {
                display: inline-block;
                width:80%;
            }
</style>

