<template>
  <v-dialog
    :max-width="maxWidth"
    :model-value="modelValue"
    :persistent="persistent"
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <v-card>
      <v-card-title class="text-h6">{{ title }}</v-card-title>
      <v-card-text>
        <slot>{{ message }}</slot>
      </v-card-text>
      <v-card-actions class="justify-end">
        <v-btn variant="text" @click="$emit('update:modelValue', false)">取消</v-btn>
        <v-btn
          :color="confirmColor"
          :loading="confirmLoading"
          :variant="confirmVariant"
          @click="$emit('confirm')"
        >
          {{ confirmText }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  message: {
    type: String,
    default: '',
  },
  confirmText: {
    type: String,
    default: '確認',
  },
  confirmColor: {
    type: String,
    default: 'primary',
  },
  confirmVariant: {
    type: String as PropType<'text' | 'flat' | 'outlined' | 'plain' | 'elevated' | 'tonal'>,
    default: 'flat',
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  },
  maxWidth: {
    type: [String, Number],
    default: 420,
  },
  persistent: {
    type: Boolean,
    default: true,
  },
})

defineEmits<{
  (event: 'update:modelValue', value: boolean): void
  (event: 'confirm'): void
}>()
</script>
