<template>
  <div :style="{ width: `${size}px`, height: `${size}px` }">
    <base-button :size="size" :image="quitImg" @click="handleOpPubble"></base-button>
    <bubble-affirm-popup ref="bubbleAffirmPopupRef"></bubble-affirm-popup>
  </div>
</template>

<script setup lang="ts">
  import quitImg from '@/assets/images/icon/quit.png';
  import { closeCurrentWindow } from '@/utils/tauri/windows-action';

  const {
    size = undefined,
    msg = undefined,
    affirmCallBack = undefined,
  } = defineProps<{
    /** 按钮大小 */
    size?: number;
    /** 提示语 */
    msg?: string;
    /** 确认回调 */
    affirmCallBack?: (hide: () => void) => void;
  }>();

  const bubbleAffirmPopupRef = useTemplateRef('bubbleAffirmPopupRef');

  /**
   * 退出应用程序
   */
  function handleOpPubble(event: MouseEvent) {
    bubbleAffirmPopupRef.value?.show({
      eventElement: event,
      title: '温馨提示',
      message: msg || '您确定要关闭此窗口吗？',
      async affirmCallBack(hide) {
        try {
          await affirmCallBack?.(hide);
          hide();
          await closeCurrentWindow();
        } catch (error) {}
      },
    });
  }
</script>
