<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="cancel">{{ options.cancelText || '取消' }}</v-btn>
        <v-btn text @click="confirm">{{ options.confirmText || '确定' }}</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 confirm = () => {
  // 如果 options.onConfirm 存在则执行回调
  if (typeof options.value.onConfirm === 'function') {
    options.value.onConfirm()
  }
  messageStore.hide('alert')
}

// 取消操作
const cancel = () => {
  // 如果 options.onCancel 存在则执行回调
  if (typeof options.value.onCancel === 'function') {
    options.value.onCancel()
  }
  messageStore.hide('alert')
}
</script>