<template>
  <!-- 帮助菜单 -->
  <el-dropdown class="box-item" trigger="click" @command="handleCommand">
    <el-button :icon="LucideHelpCircle" link color="#333333" plain> 帮助 </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="about" :icon="LucideInfo" class="global-play-click-sound">
          <span> 关于我们 </span>
        </el-dropdown-item>
        <el-dropdown-item command="checkUpdate" :icon="SolarRocketLinear" class="global-play-click-sound">
          <span> 检测更新 </span>
        </el-dropdown-item>
        <el-dropdown-item command="exit" :icon="LucidePower" class="global-play-click-sound">
          <span>退出应用程序</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <!-- 关于我们对话框 -->
  <dialog-about ref="aboutDialogRef"></dialog-about>
</template>

<script setup lang="ts">
  import DialogAbout from './dialog-about.vue';
  import LucideHelpCircle from '~icons/lucide/help-circle';
  import LucideInfo from '~icons/lucide/info';
  import LucidePower from '~icons/lucide/power';
  import SolarRocketLinear from '~icons/solar/rocket-linear';
  import { exit } from '@tauri-apps/plugin-process';
  import { checkUpdate } from '@/utils/tauri/updater-app';

  const aboutDialogRef = useTemplateRef('aboutDialogRef');
  /**
   * 处理菜单命令
   * @param command - 命令类型
   */
  function handleCommand(command: string) {
    switch (command) {
      case 'about':
        aboutDialogRef.value?.show();
        break;
      case 'checkUpdate':
        checkUpdate(true);
        break;
      case 'exit':
        exit(0);
        break;
      default:
        break;
    }
  }
</script>
