import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import axios from 'axios'
import App from './App.vue'
import pinia from './store'
import router from './router'
import useSettingsStore from './store/modules/settings'

// 自定义指令
import directive from '@/utils/directive'
// 加载 svg 图标
import 'virtual:svg-icons-register'
// 全局样式
import '@/assets/styles/globals.scss'
// 加载 iconify 图标（element plus）
import { downloadAndInstall } from '@/iconify-ep'
import { hasPermission } from '@/utils/composables/permission'
import buttonPerm from '@/utils/buttonPerm'
import VueAMap from '@/components/aMap/aMap'
import request from '@/api/index'
import { setIsOffLine, setWsUrl } from '@/utils/auth'

// 引入打印插件
if (useSettingsStore().app.iconifyOfflineUse) {
  downloadAndInstall()
}

axios.get('./config/config.json').then((res) => {
  console.log('get config')
  request.defaults.baseURL = res.data.baseUrl
  setWsUrl(`ws://${res.data.baseUrl.split('://')[1]}/websocket/`)
  setIsOffLine(res.data.isOffLine)
  const app = createApp(App)
  app.config.globalProperties.baseURL = res.data.baseUrl
  app.config.globalProperties.rtspServer = res.data.rtspServer
  app.config.globalProperties.NVR = res.data.NVR
  app.config.globalProperties.$position = {
    lat: res.data.lat,
    lng: res.data.lng,
  }
  app.config.globalProperties.$zoom = {
    minZoom: res.data.minZoom,
    maxZoom: res.data.maxZoom,
    zoom: res.data.zoom,
  }
  app.use(VueAMap)
  // app.use($)
  app.config.globalProperties.hasPerm = hasPermission
  app.config.globalProperties.buttonPerm = buttonPerm
  app.config.globalProperties.dayjs = dayjs
  app.use(ElementPlus)
  app.use(pinia)
  app.use(router)
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  directive(app)

  app.mount('#app')
})