<!--
 * @Date: 2025-04-18
 * @Description: 评论编辑组件
-->
<template>
    <van-popup :show="show" @update:show="emit('update:show', $event)" position="bottom" round>
        <div class="p-4">
            <div class="text-lg font-bold text-center mb-4">{{ title }}</div>
            <div class="flex justify-center mb-4">
                <van-rate v-model="score" :size="24" color="#ffd21e" void-icon="star" void-color="#eee" />
            </div>
            <van-field v-model="note" rows="3" type="textarea" placeholder="请输入您的评价内容" class="mb-4" />
            <div class="flex justify-end space-x-3">
                <van-button round plain block @click="handleCancel">取消</van-button>
                <van-button round block type="primary" color="#4CAF50" @click="handleSubmit">提交</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Popup, Rate, Field, Button } from 'vant'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    initialScore: {
        type: Number,
        default: 5
    },
    initialNote: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: '评价'
    }
})

const emit = defineEmits(['update:show', 'submit'])

const score = ref(props.initialScore)
const note = ref(props.initialNote)

watch(() => props.show, (newVal) => {
    if (newVal) {
        score.value = props.initialScore
        note.value = props.initialNote
    }
})

const handleCancel = () => {
    emit('update:show', false)
}

const handleSubmit = () => {
    if (score.value === 0) {
        return
    }
    if (!note.value.trim()) {
        return
    }
    emit('submit', {
        score: score.value,
        note: note.value.trim()
    })
    emit('update:show', false)
}
</script>