<template>
    <view ref="parseEl" class="mx-question-parse fx-col text-content gap-40">
        <view v-if="question.knowledge">
            <view class="text-primary">[知识点]</view>
            <view class="mt-10" v-html="question.knowledge"/>
        </view>
        <view v-if="sysAnswer">
            <view class="text-primary">[正确答案]</view>
            <view class="mt-10" v-html="sysAnswer"/>
        </view>
        <view v-if="question.parse">
            <view class="text-primary">[解析]</view>
            <view class="mt-10" v-html="question.parse"/>
        </view>
    </view>
</template>

<script setup>
import {computed, onMounted, ref, watch} from 'vue'
import {createPropDefine} from "@/utils";
import {array, empty} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {useMathJaxService} from "@/hooks/useMathJaxService";
import {useInjectMathJaxSwitch} from "@/components/mx-question-content/useMathJaxSwitchInjection";

/*
NOTE: mx-question-parse 支持MathJax
* */

const props = defineProps({
    question: createPropDefine({}, Object)
})

const parseEl = ref(null)
const {updateMathJax} = useMathJaxService()
const {disabled: disabledMathJax} = useInjectMathJaxSwitch()

const sysAnswer = computed(() => {
    // if (array(props.question.answers) && !empty(props.question.answers)) {
    //     return props.question.answers[0]
    // }
    return props.question.answer1 || ''
})

onMounted(() => updateMathJaxIfNeeded())
watch(() => props.question, () => updateMathJaxIfNeeded())

const updateMathJaxIfNeeded = () => {
    if (disabledMathJax) return
    // updateMathJax(parseEl.value?.$el)
}
</script>

<style scoped>

</style>