<script setup>
import { useDialogPluginComponent } from 'quasar';
import ICON from 'src/config/icons';

defineProps({
  // ...your custom props
  text: {
    type: String,
    default: '',
  },
  // Color name for component from the Quasar Color Palette
  color: {
    type: String,
    default: 'primary',
  },
  showActions: {
    type: Boolean,
    default: true,
  },
});

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>
<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <!--
        ...content
        ... use q-card-section for it?
      -->
      <q-card-section class="my-card-section">
        <div class="text-h6">
          <q-icon :name="ICON.info" :color="color" />提示
        </div>
      </q-card-section>

      <q-card-section
        class="my-card-content"
        :style="{ minHeight: showActions ? '40px' : '70px' }"
      >
        {{ text }}
      </q-card-section>

      <!-- buttons example -->
      <q-card-actions align="right" v-if="showActions">
        <q-btn :color="color" flat label="取消" @click="onDialogCancel" />
        <q-btn :color="color" unelevated label="确定" @click="onOKClick" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<style lang="scss" scoped>
.q-dialog-plugin {
  //   border: 1px solid red;
}
.my-card-section {
  padding: 16px;
  i {
    font-size: 22px;
    margin-right: 6px;
  }
}
.my-card-content {
  padding: 16px;
  padding-top: 0;
}
</style>