import 'core-js'
import 'regenerator-runtime/runtime'
import Vue, { PluginObject } from 'vue'
import Component from 'vue-class-component'
import App from './App.vue'
import config from './config' // 导入全局的管道
import { createRouter } from '@/route'
import store from '@/store'
import './directives' // 全局指令注入
import './filter' // 导入全局的管道
import './style' // 导入全局样式
import './public-path'
import { GlobalActions } from '@/util/enum'

Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate'])
Vue.config.productionTip = false

const plugins = require.context(
  // 其组件目录的相对路径
  './plugins',
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /\w+\.tsx?$/,
)

plugins.keys().map((fileName) => {
  const plugin = plugins(fileName)?.default as PluginObject<unknown>
  const options: { [key: string]: unknown } = plugins(fileName)?.options || {}
  if (typeof plugin.install === 'function') {
    Vue.use(plugin, options)
  }
})
store.commit('app/appName', { name: config.name })

let instance: any
async function render(props: any = {}) {
  createRouter().then((router) => {
    const { container } = props
    instance = new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount(container ? container.querySelector('#app') : '#app')
  })
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

const log = (...info) => {
  // eslint-disable-next-line no-console
  console.log('%c[system]', 'color: #fff;background-color:#87d068; padding: 2px;', ...info)
}

function setStore(props) {
  try {
    store.commit('menu/init', { menus: props.menuStore.menu, buttons: props.menuStore.buttons })
    store.commit('user/setInfo', props.userStore.info)
  } catch (e) {
    log(e)
  }
}
// eslint-disable-next-line import/no-unused-modules
export async function bootstrap() {
  log('bootstrap')
}
// eslint-disable-next-line import/no-unused-modules
export async function mount(props) {
  log('props from main framework', props)
  setStore(props)
  const { parentRouter, setGlobalState, lodingStore, reuseTabStore, settingStore, appStore } = props
  Vue.prototype.$parentRouter = parentRouter
  Vue.prototype.$setGlobalState = setGlobalState
  Vue.prototype.$parentLodingStore = lodingStore
  Vue.prototype.$parentReuseTabStore = reuseTabStore
  Vue.prototype.$settingStore = settingStore
  Vue.prototype.$appStore = appStore
  props.onGlobalStateChange((state) => {
    // state: 变更后的状态; prev 变更前的状态
    log('onGlobalStateChange:', state)
    switch (state.action) {
      case GlobalActions.SignIn:
        log('SignIn')
        store.commit('user/setInfo', state.userInfo)
        store.commit('user/setToken', state.token)
        break
      case GlobalActions.SignOut:
        log('SignOut')
        store.dispatch('user/logout', {})
        break
      case GlobalActions.SetReuseTab:
        store.commit('reuseTab/changeSource', { source: state.reuseTabSource })
        break
    }
  })
  render(props)
}
// eslint-disable-next-line import/no-unused-modules
export async function unmount() {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}