<script setup>
const { $toast } = useNuxtApp();

const notifyAll = () => {
  $toast('这是一条默认消息', { type: 'default' });
  $toast.info('这是一条 info 消息');
  $toast.success('这是一条 success 消息');
  $toast.warning('这是一条 warning 消息');
  $toast.error('这是一条 error 消息');
  $toast.loading('加载中...');
};

const notifyDefault = () => $toast('默认消息 default');
const notifyInfo = () => $toast.info('Info 消息');
const notifySuccess = () => $toast.success('Success 消息');
const notifyWarning = () => $toast.warning('Warning 消息');
const notifyError = () => $toast.error('Error 消息');
</script>

<template>
  <div class="p-8 flex flex-col gap-4 max-w-md">
    <h1 class="text-2xl font-semibold mb-4">Toast 测试</h1>

    <button
      class="px-4 py-2 bg-[#cc785c] text-white rounded-lg hover:bg-[#a9583e] transition-colors"
      @click="notifyAll"
    >
      全部类型
    </button>

    <div class="flex gap-2 flex-wrap">
      <button
        class="px-4 py-2 bg-[#efe9de] border border-[#e6dfd8] rounded-lg hover:bg-[#e8e0d2] transition-colors"
        @click="notifyDefault"
      >
        Default
      </button>
      <button
        class="px-4 py-2 bg-[#5db8a6] text-white rounded-lg hover:opacity-90 transition-opacity"
        @click="notifyInfo"
      >
        Info
      </button>
      <button
        class="px-4 py-2 bg-[#5db872] text-white rounded-lg hover:opacity-90 transition-opacity"
        @click="notifySuccess"
      >
        Success
      </button>
      <button
        class="px-4 py-2 bg-[#e8a55a] text-white rounded-lg hover:opacity-90 transition-opacity"
        @click="notifyWarning"
      >
        Warning
      </button>
      <button
        class="px-4 py-2 bg-[#c64545] text-white rounded-lg hover:opacity-90 transition-opacity"
        @click="notifyError"
      >
        Error
      </button>
      <button
        class="px-4 py-2 bg-[#181715] text-white rounded-lg hover:opacity-90 transition-opacity"
        @click="$toast.loading('加载中...')"
      >
        Loading
      </button>
    </div>
  </div>
</template>