<script setup>
import { computed } from "vue";
const props = defineProps({
  modelValue: { type: Boolean, required: false },
  title: { type: String, required: false },
  message: { type: String, required: false },
  type: { type: String, required: false },
  width: { type: [Number, String], required: false }
});
const emit = defineEmits(["update:modelValue"]);
const dialogIcon = computed(() => {
  switch (props.type) {
    case "success":
      return "mdi mdi-check-circle";
    case "error":
      return "mdi mdi-alert-circle";
    case "warning":
      return "mdi mdi-alert";
    case "info":
      return "mdi mdi-information-variant-circle";
    default:
      return "";
  }
});
</script>

<template>
  <VDialog
    :model-value="modelValue"
    :width="width"
    max-width="800"
    @update:model-value="emit('update:modelValue', false)"
  >
    <VCard>
      <VToolbar :color="type">
        <VToolbarTitle>
          <VIcon :icon="dialogIcon" />
          {{ title }}
        </VToolbarTitle>
        <VBtn
          icon="mdi mdi-close"
          size="x-small"
          @click="emit('update:modelValue', false)"
        />
      </VToolbar>
      <VCardText>
        <slot>
          {{ message }}
        </slot>
      </VCardText>
      <VDivider />
      <VCardActions>
        <VBtn
          :color="type"
          block
          class="ma-auto"
          @click="emit('update:modelValue', false)"
        >
          ตกลง
        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
</template>
