<template>
    <view class="h-[50px] px-30 fx-row fx-bet-cen bg-bg">
        <view class="text-tips text-sm">请为该题评分</view>
        <view class="fx-row items-center text-content gap-10">
            <text>错误</text>
            <uv-switch v-model="wrongSwitchOn" active-color="var(--error-color)" @change="handleWrong"/>
            <text class="ml-10">正确</text>
            <uv-switch v-model="correctSwitchOn" active-color="var(--success-color)" @change="handleCorrect"/>
        </view>
    </view>
</template>

<script setup>
import {ref, watch} from 'vue'
import {useInjectQuestionService} from "@/components/mx-question/useQuestionInjection";
import {useInjectPaperService} from "@/components/mx-paper/usePaperInjection";

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

const wrongSwitchOn = ref(false)
const correctSwitchOn = ref(false) // 通过只需要1个判定就可以了

watch(current, () => {
    wrongSwitchOn.value = isScored(current.value) && !isPassed(current.value)
    correctSwitchOn.value = isPassed(current.value)
}, {immediate: true})

const handleWrong = async () => {
    const userData = getUserData(current.value)
    if (wrongSwitchOn.value) {
        correctSwitchOn.value = false
        userData.score = 0
    } else {
        userData.score = ''
    }
}

const handleCorrect = async () => {
    const userData = getUserData(current.value)
    if (correctSwitchOn.value) {
        wrongSwitchOn.value = false
        userData.score = current.value.scoreTotal * 1
    } else {
        userData.score = ''
    }
}
</script>

<style scoped>

</style>