<template>
  <q-dialog ref="dialog" @hide="onDialogHide">
      <q-card class="bg-primary text-white">
          <q-bar>
            <div class="flex-center">{{titleText}}</div>
            <q-space />
            <q-btn dense flat icon="close" v-close-popup>
              <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
            </q-btn>
          </q-bar>
          <q-card-section class="q-pa-lg" >
            {{msgText}}
          </q-card-section>
          <q-item dense class="flex-center">
            <q-btn
              class="q-ma-sm"
              color="white"
              text-color="primary"
              label="Ok"
             @click="onOKClick"
            />
          </q-item>
        </q-card>
  </q-dialog>
</template>

<script>
export default {
  props:['titleText','msgText'],
  methods: {
    // following method is REQUIRED
    // (don't change its name --> "show")
    show () {
      this.$refs.dialog.show()
    },

    // following method is REQUIRED
    // (don't change its name --> "hide")
    hide () {
      this.$refs.dialog.hide()
    },

    onDialogHide () {
      // required to be emitted
      // when QDialog emits "hide" event
      this.$emit('hide')
    },

    onOKClick () {
      // on OK, it is REQUIRED to
      // emit "ok" event (with optional payload)
      // before hiding the QDialog
      this.$emit('ok')
      // or with payload: this.$emit('ok', { ... })

      // then hiding dialog
      this.hide()
    },

    onCancelClick () {
      // we just need to hide dialog
      this.hide()
    }
  }
}
</script>