// import './reset.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import pinia from './store'
import Vant from 'vant'
import 'vant/lib/index.css'
import Vue3Lazyload from 'vue3-lazyload'
import { Post } from './utils/https'
import xss from 'xss'
import '@/assets/font/iconfont.css'

const shouldEnableVConsole = import.meta.env.VITE_ENABLE_TEST === 'true'

// 根据域名判断是否启用 VConsole
const enableVConsoleDomains = ['aioblu-sit.trace.com.cn', 'aioblu-dev.trace.com.cn']
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
  window.navigator.userAgent,
)
const currentHostname = window.location.hostname
const shouldShowVConsole = enableVConsoleDomains.includes(currentHostname)
if (shouldShowVConsole || (shouldEnableVConsole && isMobile)) {
  import('vconsole').then(({ default: VConsole }) => {
    new VConsole()
  })
}

// 根据rem单位适配
window.onload = function () {
  // 750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写1是
  // 为了以后好算,比如，你测量的一个宽度是100px,就可以写为100rem,即1px=1rem
  getRem(375, 1)
}

function getRem(pwidth, prem) {
  var html = document.getElementsByTagName('html')[0]
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth

  // 设置最大宽度限制（例如 750px，与聊天框最大宽度保持一致）
  var maxWidth = 430
  if (oWidth > maxWidth) {
    oWidth = maxWidth
  }

  // 可选：设置最小宽度限制
  var minWidth = 320
  if (oWidth < minWidth) {
    oWidth = minWidth
  }

  console.log('计算 rem - 屏幕宽度:', oWidth, '基准宽度:', pwidth, '基准字号:', prem)
  html.style.fontSize = (oWidth / pwidth) * prem + 'px'
}

const app = createApp(App)
app.use(Vue3Lazyload, {
  // loading: '/path/to/loading.gif', // 加载中占位图
  // error: '/path/to/error.png', // 加载失败占位图
  preLoad: 1.3, // 提前加载距离
  attempt: 3, // 失败重试次数
})
app.use(router)
app.use(createPinia())
app.use(Vant)

// Vue2 全局挂载的 this.$post / this.$xss，迁移后在 globalProperties 上注册
app.config.globalProperties.$post = Post
app.config.globalProperties.$xss = (val) => xss(val)

app.mount('#app')