<template>
    <mx-tag-button :text="collected?'已收藏':'收藏'" :icon="collected?'heart-fill':'heart'" @click="handleToggle"/>
</template>

<script setup>
import {computed} from 'vue'
import {createPropDefine} from "@/utils";
import {toast} from "@/uni_modules/uv-ui-tools/libs/function";
import {questionCancelCollect, questionCollect} from "@/api/webApi/webQue";

const props = defineProps({
    question: createPropDefine({}, Object)
})
const emits = defineEmits(['change'])

const id = computed(() => props.question.questionId || props.question.id)
const collected = computed(() => props.question.collect)
let loading = false

const handleToggle = async () => {
    if (loading) return toast('请稍候')
    try {
        loading = true
        const op = collected.value ? questionCancelCollect : questionCollect
        await op(id.value)
        props.question.collect = !collected.value
        emits('change', props.question.collect)
    } finally {
        loading = false
    }
}
</script>

<style scoped>

</style>