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 mitt from "mitt"
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination' // 分页器样式

import BtnBack from '@/components/BtnBack.vue'
import BtnClickMe from '@/components/BtnClickMe.vue'
import OperationTip from '@/components/OperationTip.vue'
import HotspotComp from '@/components/HotspotComp.vue'
import HotspotForHomepage from '@/components/HotspotForHomepage.vue'
import SerialFrames from '@/components/LongImageSerialFrames.vue'
import BtnSkip from '@/components/BtnSkip.vue'
import PaginationComp from '@/components/PaginationComp.vue'

import Vue3TouchEvents from "vue3-touch-events"

console.log(`version: ${process.env.VUE_APP_VERSION}`)
console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)

const app = createApp(App)

// 挂载配置信息
app.provide('$config', config)
app.provide('$env', process.env)

// 挂载消息发布订阅中心
app.provide('$mitt', mitt())

// 解析、挂载浏览器信息
const uaParser = new UAParser()
const uaInfo = uaParser.getResult()
console.log('uaInfo: ', uaInfo)
app.provide('$uaInfo', uaInfo)
if (uaInfo.browser && uaInfo.browser.name === 'WeChat') {
  app.provide('$isWeChat', true)
}
if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
  app.provide('$isSafari', true)
}
if (uaInfo.device.type === 'mobile') {
  app.provide('$isMobile', true)
}

// 处理resize事件
let windowWidthLast = window.innerWidth
let windowHeightLast = window.innerHeight
function onResize() {
  if (window.innerWidth === windowWidthLast) {
    // 发生了高度变化，认为发生了软键盘显隐
    if (uaInfo.os.name === 'Android') {
      if (window.innerHeight < windowHeightLast) {
        // ...
      } else if (window.innerHeight > windowHeightLast) {
        // ...
      }
    }
  }
  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(VueViewer)
  .use(ElementPlus)
  .use(Vue3TouchEvents)
  .component('BtnBack', BtnBack)
  .component('BtnClickMe', BtnClickMe)
  .component('OperationTip', OperationTip)
  .component('HotspotComp', HotspotComp)
  .component('HotspotForHomepage', HotspotForHomepage)
  .component('Swiper', Swiper)
  .component('SwiperSlide', SwiperSlide)
  .component('SerialFrames', SerialFrames)
  .component('BtnSkip', BtnSkip)
  .component('PaginationComp', PaginationComp)
  .mount('#app')

//  you can reset the default options at any other time
VueViewer.setDefaults({
  inline: false,
  button: true,
  navbar: false,
  title: false,
  toolbar: false,
  tooltip: false,
  movable: true,
  zoomable: true,
  rotatable: false,
  // "scalable": true,
  transition: true,
  fullscreen: true,
  keyboard: true,
})

// 必须在vue根组件挂载之后执行
if (uaInfo.device.type === 'mobile') {
  document.getElementById('app').classList.add('mobile')
}