<template>
  <v-dialog v-model="isActive" persistent :width="options.width">
    <v-card :color="options.color">
      <v-card-title>{{ options.title }}</v-card-title>
      <v-card-text v-if="options.text">
        {{ options.text }}
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn text @click="close_modal">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { useMessageStore } from '@/stores/message' // 根据实际路径调整

const messageStore = useMessageStore()


// 使用 computed 获取响应式数据
const isActive = computed(() => messageStore.alert?.isActive || false)
const options = computed(() => messageStore.alert?.options || {})

// 关闭模态框方法
const close_modal = () => {
  messageStore.hide('alert')
}
</script>