<!--
 * @Date: 2025-03-20 19:53:12
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-10-15 10:02:51
 * @FilePath: /mlaj/src/App.vue
 * @Description: 入口文件
-->
<script setup>
import { RouterView } from "vue-router";
import { provideAuth } from "@/contexts/auth";
import { provideCart } from "@/contexts/cart";
import { ConfigProvider as VanConfigProvider } from 'vant';
import { themeVars } from './vant.config';
// 会根据配置判断是否显示调试控件
// eslint-disable-next-line no-unused-vars
import vConsole from "@/utils/vconsole";
// 初始化WX环境
import wx from "weixin-js-sdk";
import { wxJsAPI } from "@/api/wx/config";
import { apiList } from "@/api/wx/jsApiList.js";
import { wxInfo } from "@/utils/tools";

import { Updater } from '@/utils/versionUpdater';

import 'vant/es/toast/style'

provideAuth(); // 提供全局认证状态
provideCart('single'); // 提供全局购物车状态，单一商品模式

// 初始化微信配置
const initWxConfig = async () => {
  const raw_url = encodeURIComponent(location.pathname + location.hash);
  try {
    const wxJs = await wxJsAPI({ url: raw_url })
    wxJs.data.jsApiList = apiList
    wx.config(wxJs.data)
    wx.ready(() => {
      wx.showAllNonBaseMenuItem()
    })
    wx.error((err) => {
      console.warn('微信配置初始化失败:', err)
    })
  } catch (error) {
    console.error('初始化微信配置失败:', error)
  }
}

// 在非开发环境下初始化微信配置
if (!import.meta.env.DEV && wxInfo().isWeiXin) {
  initWxConfig()
}

// TAG：检查是否更新
let upDater = null;
if (import.meta.env.PROD) {
  upDater = new Updater({
    time: 30000
  })
  upDater.on('no-update', () => {
    // console.log('还没更新')
  })
  upDater.on('update', () => {
    showConfirmDialog({
      title: '温馨提示',
      message: '检测到新版本，是否刷新页面!',
      confirmButtonColor: styleColor.baseColor
    }).then(() => {
      window.location.reload();
    });
  })
}

// 组件卸载时清理定时器
onUnmounted(() => {
  if (upDater) {
    upDater.destroy();
  }
});
</script>

<template>
  <van-config-provider :theme-vars="themeVars">
    <!-- 通过v-slot获取当前路由组件。使用component是为了实现动态组件渲染和加载状态的控制：当Component存在时渲染路由组件，不存在时显示加载动画。直接使用 -->
    <router-view v-slot="{ Component }">
      <div v-if="Component">
        <component :is="Component" />
      </div>
      <div v-else class="flex items-center justify-center h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50">
        <div class="bg-white/20 backdrop-blur-md rounded-xl p-6 shadow-lg">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div>
          <p class="mt-4 text-gray-700">加载中...</p>
        </div>
      </div>
    </router-view>
  </van-config-provider>
</template>

<style lang="less">
#app {
  width: 100%;
  min-height: 100vh;

  ol {
    list-style-type: decimal;
    padding: 0.25rem 1rem;
    li {
      margin-bottom: 0.25rem;
    }
  }
}

</style>