<template>
    <view class="bg-white text-content mx-card">
        <mx-question-content :question="item" readonly class="p-40"/>
        <uv-line/>
        <view class="grid grid-cols-3 py-20">
            <mx-question-collect :question="item" class="!items-start" @change="handleChange"/>
            <mx-question-correct :question="item" class="!items-center"/>
            <mx-tag-button :text="expand?'隐藏解析':'查看解析'" :icon="expand?'eye-off-outline':'eye'"
                           class="!items-end" @click="expand=!expand"/>
        </view>
        <uv-transition :show="expand">
            <view class="px-40 pb-40 text-base">
                <mx-question-parse :question="item" class="mt-40"/>
            </view>
        </uv-transition>
    </view>
</template>

<script setup>
import {ref} from 'vue'
import {createPropDefine} from "@/utils";
import MxQuestionCollect from "@/components/mx-question/components/mx-question-collect.vue";
import MxQuestionCorrect from "@/components/mx-question/components/mx-question-correct.vue";
import MxQuestionParse from "@/components/mx-question/components/mx-question-parse.vue";

const props = defineProps({
    item: createPropDefine({}, Object)
})
const expand = ref(false)

const emits = defineEmits(['change'])
const handleChange = (collect) => {
    emits('change', collect)
}
</script>

<style scoped>

</style>