<template>
    <view class="h-[50px] px-30 bg-bg flex items-end">
        <view class="flex-1 grid items-center gap-30" :class="`grid-cols-${tags.length}`">
            <view v-for="tag in tags" :class="tag.clazz" @click="tag.handler"
                  class="h-[44px] fx-row fx-cen-cen gap-5 shadow-sm bg-white rounded">
                <text class="text-3xs text-tips -mb-10">{{ tag.label }}</text>
                <text class="text-2xl" :class="tag.valueClazz">{{ tag.value }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref, watch} from 'vue'
import {useInjectPaperService} from "@/components/mx-paper/usePaperInjection";
import {useInjectQuestionService} from "@/components/mx-question/useQuestionInjection";
import {fnPlaceholder} from "@/utils/uni-helper";
import _ from "lodash";
import {useInjectPaperNavigatorRef} from "@/components/mx-paper/components/usePaperNavigatorRefInjection";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {useInjectPaperNavigationService} from "@/components/mx-paper/usePaperNavigationServiceInjection";

const {
    allowAnswer,
    allowScore,
    questions
} = useInjectPaperService()
const {
    answeredQuestions,
    unansweredQuestions,
    scoredQuestions,
    unscoredQuestions,
    passedQuestions,
    unpassedQuestions,
} = useInjectQuestionService()
const {navigator} = useInjectPaperNavigatorRef()
const {questionsNavigationHandler} = useInjectPaperNavigationService()

const tags = ref([])

watch([answeredQuestions, unansweredQuestions,
    scoredQuestions, unscoredQuestions,
    passedQuestions, unpassedQuestions,
    allowAnswer, allowScore], ([answered, unanswered, scored, unscored, passed, unpassed]) => {
    tags.value.length = 0 // reset
    if (allowAnswer.value) {
        tags.value.push({
            label: '已做',
            value: answered.length,
            valueClazz: ['text-primary'],
            handler: () => questionsNavigationHandler(navigator.value, answered, '已做')
        })
        tags.value.push({
            label: '未做',
            value: unanswered.length,
            valueClazz: ['text-warning'],
            handler: () => questionsNavigationHandler(navigator.value, unanswered, '未做')
        })
        let rate = 0
        const total = questions.value.length
        if (total > 0) rate = Math.round(answered.length * 100 / total)
        tags.value.push({
            label: '完成率',
            value: rate + '%',
            valueClazz: ['text-success'],
            handler: fnPlaceholder
        })
    } else if (allowScore.value) {
        tags.value.push({
            label: '已阅',
            value: scored.length,
            valueClazz: ['text-primary'],
            handler: () => questionsNavigationHandler(navigator.value, scored, '已阅')
        })
        tags.value.push({
            label: '未阅',
            value: unscored.length,
            valueClazz: ['text-warning'],
            handler: () => questionsNavigationHandler(navigator.value, unscored, '未阅')
        })
        tags.value.push({
            label: '正确',
            value: passed.length,
            valueClazz: ['text-success'],
            handler: () => questionsNavigationHandler(navigator.value, passed, '正确')
        })
        tags.value.push({
            label: '错误',
            value: unpassed.length,
            valueClazz: ['text-error'],
            handler: () => questionsNavigationHandler(navigator.value, unpassed, '错误')
        })
    } else {
        tags.value.push({
            label: '正确',
            value: passed.length,
            valueClazz: ['text-success'],
            handler: () => questionsNavigationHandler(navigator.value, passed, '正确')
        })
        tags.value.push({
            label: '错误',
            value: unpassed.length,
            valueClazz: ['text-error'],
            handler: () => questionsNavigationHandler(navigator.value, unpassed, '错误')
        })
        let rate = 0
        const sumTotal = _.sumBy(questions.value, q => q.scoreTotal * 1)
        const sumScore = _.sumBy(scored, q => q.score * 1)
        if (sumTotal > 0) rate = Math.round(sumScore * 100 / sumTotal)
        tags.value.push({
            label: '得分率',
            value: rate + '%',
            valueClazz: ['text-primary'],
            handler: fnPlaceholder
        })
    }
})

</script>

<style scoped>

</style>