import { createApp } from 'vue'
import './style.css'
import './global.scss'
import App from './App.vue'
import { getAssetsFile } from '@/utils/imgResolve'
import router from './router'
import store from './store/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'vant/lib/index.css'
import '@vant/touch-emulator'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const setHtmlFontSize = () => {
  //   store.commit('screenChange');
  const htmlDom = document.getElementsByTagName('html')[0]
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  console.log(htmlWidth)
  if (htmlWidth >= 750) {
    htmlWidth = 750
  }
  if (htmlWidth <= 450) {
    htmlWidth = 450 // 12px
  }
  htmlDom.style.fontSize = `${htmlWidth / 37.5}px`
}

window.onresize = setHtmlFontSize
setHtmlFontSize()

const app = createApp(App)

app.provide('img', getAssetsFile)
app.use(store)
app.use(router)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus, {
  locale: zhCn,
  size: 'large', zIndex: 3000
})
app.mount('#app')