<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
    <q-card class="q-pa-sm">
      <q-card-section class="row">
        <div class="q-pr-md">
          <q-avatar :icon="icon" size="lg" font-size="25px" color="blue-1" :text-color="color" />
        </div>
        <div class="col text-dark">
          <span class="text-bold">{{ title }}</span>
          <br />
          <span>{{ message }}</span>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-teal" v-if="onlycancel">
        <q-btn label="ตกลง" flat color="grey-8" @click="onDialogCancel" />
      </q-card-actions>
      <q-card-actions align="right" class="bg-white text-teal" v-else>
        <q-btn label="ยกเลิก" flat color="grey-8" @click="onDialogCancel" />
        <q-btn :label="textOk" :color="color" @click="onOKClick" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useDialogPluginComponent } from 'quasar'

const props = defineProps({
  color: {
    type: String,
    default: 'primary'
  },
  textOk: {
    type: String,
    default: 'ตกลง'
  },
  title: {
    type: String,
    default: 'หัวข้อ?'
  },
  message: {
    type: String,
    default: 'ข้อความ'
  },
  icon: {
    type: String,
    default: 'question_mark'
  },
  onlycancel: {
    type: Boolean,
    default: false
  }
})

defineEmits([...useDialogPluginComponent.emits])

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
function onOKClick() {
  onDialogOK()
}
</script>
