<template>
  <div>
    <main>
      <RouterView />
    </main>
    <Toaster
      position="top-center"
      :toast-options="{
        style: {
          background: '#ddd',
          color: '#000',
          border: '1px solid rgba(255, 255, 255)',
        },
        classes: {
          title: 'text-[20px] font-bold',
          toast: 'rounded-[20px]', // 顺便统一一下你 Dialog 的圆角风格
        },
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { onMounted } from 'vue'
import 'vue-sonner/style.css'
import { Toaster } from '@/components/ui/sonner'
import { Crisp } from 'crisp-sdk-web'

const WEBSITE_ID = '47fcc1ac-9674-4ab1-9e3c-6b5666f59a38'

onMounted(() => {
  // 定义加载逻辑
  const loadCrisp = () => {
    console.log('页面资源已就绪，开始初始化 Crisp...')
    Crisp.configure(WEBSITE_ID)

    // 可选：初始化后自动隐藏或执行其他逻辑
    // Crisp.chat.hide();
  }

  // 如果页面已经加载完成（或者是从其他路由跳转过来的）
  if (document.readyState === 'complete') {
    loadCrisp()
  } else {
    // 否则等待 window load 事件，确保图片、CSS等资源全部加载完毕
    window.addEventListener('load', loadCrisp, { once: true })
  }
})
</script>

<style scoped></style>
