<!--
 * @FileDescription: Dialog Tip
 * @Date: 2023-08-11
 * @LastEditTime: 2023-08-11
-->
<script setup lang="ts">
// import { reactive } from 'vue';
import { useQuasar } from 'quasar';
import { ComDialogTip } from 'src/components';
import ICON from 'src/config/icons';

const $q = useQuasar();

function onClike(name: string) {
  $q.dialog({
    component: ComDialogTip,
    componentProps: {
      persistent: true,
      text: '这是一条提示信息',
      // Color name for component from the Quasar Color Palette
      color: name || 'primary',
      icon: ICON.question,
      // title: '标题',
      // showActions: false,
      // ...more..props...
    },
  }).onOk(() => {
    //
  });
  // .onCancel(() => {
  //   console.log('Cancel');
  // })
  // .onDismiss(() => {
  //   console.log('Called on OK or Cancel');
  // });
}
</script>
<template>
  <div class="q-pa-md">
    <div class="q-gutter-xs">
      <q-btn color="primary" label="Primary" @click="onClike('primary')" />
      <q-btn
        color="secondary"
        label="Secondary"
        @click="onClike('secondary')"
      />
      <q-btn color="amber" label="Amber" @click="onClike('amber')" />
      <q-btn color="brown-5" label="Brown 5" @click="onClike('brown-5')" />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>