<template>
	<v-snackbar v-model="isActive" :timeout="options.timeout > 0 ? options.timeout : 3000" :color="options.color" centered @update:modelValue="onModelUpdate">
		{{ options.text }}
		<template v-slot:actions>
			<v-btn text icon @click="close_modal()">
				<v-icon>mdi-close</v-icon>
			</v-btn>
		</template>
	</v-snackbar>
</template>

<script setup>
import { computed } from "vue";
import { useMessageStore } from "@/stores/message";

const messageStore = useMessageStore();

const isActive = computed({
	get: () => messageStore.toast?.isActive || false,
	set: (value) => {
		if (messageStore.toast) {
			messageStore.toast.isActive = value;
		}
	},
});

const options = computed(() => messageStore.toast?.options || {});

const close_modal = () => {
	messageStore.hide("toast");
};

// 监听模型值更新
const onModelUpdate = (value) => {
	if (!value) {
		// Snackbar 关闭时确保 store 状态同步
		messageStore.hide("toast");
	}
};
</script>
<style lang="scss" scoped>
::v-deep .v-snackbar__wrapper {
	top: 24px;
}
</style>
