<template>
  <v-card border class="d-flex flex-column h-100 rounded-0" :class="cardClass" flat :width="width">
    <v-card-title class="dialog-title d-flex align-center ga-2">
      <div>
        <div class="text-h6">{{ dialogTitle }}</div>
        <div v-if="dialogSubtitle" class="text-body-2 text-medium-emphasis">{{ dialogSubtitle }}</div>
      </div>
      <v-spacer />
      <v-chip v-if="isViewMode" color="info" size="small" variant="tonal">檢視中</v-chip>
      <v-chip v-else-if="isEditMode" color="primary" size="small" variant="tonal">編輯中</v-chip>
      <v-chip v-else color="secondary" size="small" variant="tonal">新增中</v-chip>
    </v-card-title>

    <v-card-subtitle class="dialog-toolbar d-flex align-center py-2 ga-2">
      <slot name="toolbar" />
    </v-card-subtitle>

    <v-divider />

    <v-card-text :class="contentClass">
      <slot name="content" />
    </v-card-text>

    <v-divider />

    <v-card-actions class="dialog-actions">
      <slot name="actions" />
    </v-card-actions>
  </v-card>
</template>

<script setup lang="ts">
defineProps({
  dialogTitle: {
    type: String,
    required: true,
  },
  dialogSubtitle: {
    type: String,
    default: '',
  },
  isViewMode: {
    type: Boolean,
    required: true,
  },
  isEditMode: {
    type: Boolean,
    required: true,
  },
  width: {
    type: [String, Number],
    default: '100%',
  },
  cardClass: {
    type: String,
    default: '',
  },
  contentClass: {
    type: String,
    default: 'pa-2 flex-grow-1 overflow-y-auto',
  },
})
</script>
