import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "@/assets/style/reset.css"
import "@/assets/style/my-reset.css"
import UAParser from "@/libs/ua-parser.min.js"
import clickOutside from "@/directives/v-click-outside.js"
import mitt from "mitt"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// import 'viewerjs/dist/viewer.css'
// import VueViewer from 'v-viewer'

console.log(`version: ${process.env.VUE_APP_VERSION}`)
console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
if (
  localStorage.getItem('useDarkTheme') === '1' ||
  (!localStorage.getItem('useDarkTheme') && gConfigInfo.defaultDarkTheme)
) {
  store.commit('setIsDarkTheme', true)
} else {
  store.commit('setIsDarkTheme', false)
}

const app = createApp(App)

// 挂载配置信息
app.config.globalProperties.$config = config
app.config.globalProperties.$gConfigInfo = gConfigInfo
app.config.globalProperties.$gConfigDesc = gConfigDesc
app.config.globalProperties.$env = process.env

// 挂载消息发布订阅中心
app.config.globalProperties.$mitt = mitt()

// 解析、挂载浏览器信息
const uaParser = new UAParser()
const uaInfo = uaParser.getResult()
console.log(uaInfo)
app.config.globalProperties.$uaInfo = uaInfo
if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
  app.config.globalProperties.$isWeChat = true
}
if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
  app.config.globalProperties.$isSafari = true
}
if (uaInfo.device.type === 'mobile') {
  app.config.globalProperties.$isMobile = true
  document.body.classList.add('mobile')
} else {
  app.config.globalProperties.$isMobile = false
}

// // 处理resize事件
// let windowWidthLast = window.innerWidth
// let windowHeightLast = window.innerHeight
// function onResize() {
//   windowWidthLast = window.innerWidth
//   windowHeightLast = window.innerHeight
// }
// window.addEventListener('resize', () => {
//   onResize()
// })

// // 禁用上下文菜单
// document.oncontextmenu = function(e) {
//   e.preventDefault()
// }

// // safari里只能在交互行为的回调中成功地首次调用audio的play方法，所以需要一个全局的audio元素来播放随时可能需要自发播放的音频。
// const audioNode = document.createElement("audio")
// audioNode.id = 'global-audio'
// audioNode.style.display = 'none'
// audioNode.loop = true
// document.body.appendChild(audioNode)

app.use(store)
  .use(router)
  .use(clickOutside)
  .use(ElementPlus)
  // .use(VueViewer)
  // .component('HotSpot', HotSpot)
  .mount('#app')

// 必须在vue根组件挂载之后执行
if (app.config.globalProperties.$isMobile) {
  document.getElementById('app').classList.add('mobile')
}