<template>
    <el-collapse-item title="1">
        <template #title>
            <div slot="title" class="flex justify-between">
                <el-text>{{ `已经存在试卷：${paper.paperName}` }}</el-text>
                <el-text type="primary">查看详情</el-text>
            </div>
        </template>
        <el-card v-for="(group, idx) in groupedQuestions" shadow="never" class="mb-5">
            <div slot="header" class="clearfix">
                <el-text class="font-bold">
                    {{ numberToChinese(idx + 1) }}、{{ group.title }}(共{{ group.num }}题;共{{ group.score }}分)
                </el-text>
            </div>
            <div v-for="(q, i) in group.list" class="mb-5">
                <div>
                    {{ i + 1 }}.
                    <span style="color: #1890ff">题号:{{ q.id }}（{{ q.score }}分）</span><span
                    v-html="q.title"></span>
                </div>
            </div>
        </el-card>
    </el-collapse-item>
</template>

<script setup name="BuiltPaper">
import {numberToChinese} from "@/utils/paper-helper.js";

const props = defineProps({
    paper: Object
})

const questions = computed(() => props.paper?.questions || [])

const groupedQuestions = computed(() => {
    const results = {}
    questions.value.forEach(q => {
        if (!results[q.qtpye]) results[q.qtpye] = []
        results[q.qtpye].push(q)
    })
    return Object.keys(results).map(g => ({
        title: g,
        list: results[g],
        num: results[g].length,
        score: results[g].reduce((acc, current) => acc + current.score, 0)
    }))
})
</script>

<style scoped>

</style>