<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-btn :label="textOk" :color="color" @click="onOKClick" /> -->
      </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([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits,
])

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent()
// dialogRef      - Vue ref to be applied to QDialog
// onDialogHide   - Function to be used as handler for @hide on QDialog
// onDialogOK     - Function to call to settle dialog with "ok" outcome
//                    example: onDialogOK() - no payload
//                    example: onDialogOK({ /*...*/ }) - with payload
// onDialogCancel - Function to call to settle dialog with "cancel" outcome

// this is part of our example (so not required)
function onOKClick() {
  // on OK, it is REQUIRED to
  // call onDialogOK (with optional payload)
  onDialogOK()
  // or with payload: onDialogOK({ ... })
  // ...and it will also hide the dialog automatically
}
</script>
