<template>
  <v-dialog v-model="isActive" persistent :width="options.width" hide-overlay>
    <v-card :color="options.color">
      <v-card-title>{{ options.title }}</v-card-title>
      <v-card-text>
        <v-progress-linear
          v-if="options.indeterminate !== false"
          indeterminate
          :color="options.progressColor || 'primary'"
        />
        <v-progress-linear
          v-else
          :value="options.value || 0"
          :color="options.progressColor || 'primary'"
        />
        <div v-if="options.text" class="mt-2">
          {{ options.text }}
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

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

const messageStore = useMessageStore()

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