<template>
    <div class="border border-solid border-blue-100 p-4 rounded-lg">
        <div v-html="question.title"/>
        <div v-if="!hiddenOptions" class="flex flex-wrap justify-between mt-2">
            <div v-for="op in options" v-html="op"/>
        </div>
        <el-divider border-style="dashed"/>
        <div class="flex items-center gap-10 px-5">
            <div class="text-sm">ID：{{ question.id }}</div>
            <div class="text-sm">题型：{{ question.qtpye }}</div>
            <el-link type="primary" @click="emits('parse')">查看解析</el-link>
            <slot/>
        </div>
    </div>
</template>

<script setup name="QuestionContent">
const emits = defineEmits(['parse'])
const props = defineProps({
    question: Object,
    hiddenOptions: Boolean
})
const options = computed(() => {
    const results = []
    const codes = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    codes.forEach(code => {
        const op = props.question['option' + code]
        if (op) results.push(code + '、' + op)
    })
    return results
})
</script>

<style scoped>

</style>