<template>
    <view class="w-full h-full px-15 fx-col fx-cen-cen rounded relative"
          :class="tabClass">
        <text class="text-sm">第{{ item.seq }}题</text>
        <template v-if="!cleanMode">
            <view v-if="allowAnswer&&isAnswered(item)"
                  class="absolute top-5 right-5 h-15 w-15 rounded shadow shadow-green-100 bg-success"/>
            <template v-else-if="isScored(item)">
                <uv-icon v-if="isPassed(item)" name="checkmark-circle-fill" size="12" color="var(--success-color)"/>
                <uv-icon v-else name="close-circle-fill" size="12" color="var(--error-color)"/>
            </template>
        </template>
    </view>
</template>

<script setup>
import {computed} from 'vue'
import {createPropDefine} from "@/utils";
import {useInjectPaperService} from "@/components/mx-paper/usePaperInjection";
import {useInjectQuestionService} from "@/components/mx-question/useQuestionInjection";

const props = defineProps({
    // item is a question
    item: createPropDefine({}, Object),
    // clean mode 给弹层用，不用展示状态特效
    cleanMode: createPropDefine(false, Boolean)
})

const {current, allowAnswer} = useInjectPaperService()
const {isAnswered, isScored, isPassed} = useInjectQuestionService()

const isActive = computed(() => current.value == props.item)
const tabClass = computed(() =>
    isActive.value && !props.cleanMode ?
        ['text-primary bg-white shadow shadow-blue-100 bg-white']
        : ['text-main bg-slate-100 shadow-xs'])
</script>

<style scoped>

</style>