<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <router-view/>
  </a-config-provider>
</template>

<script>
import { enquireScreen } from '@vue2-client/utils/util'
import { mapState, mapMutations } from 'vuex'
import themeUtil from '@vue2-client/utils/themeUtil'
import { getI18nKey } from '@vue2-client/utils/routerUtil'
import { setSystemVersion } from '@vue2-client/utils/request'
import waterMark from '@vue2-client/utils/waterMark'
import { isMicroAppEnv } from '@vue2-client/utils/microAppUtils'

export default {
  name: 'App',
  data () {
    return {
      locale: {}
    }
  },
  created () {
    this.setHtmlTitle()
    this.setLanguage(this.lang)
    enquireScreen(isMobile => this.setDevice(isMobile))
  },
  mounted () {
    this.setWeekModeTheme(this.weekMode)
    const configStr = localStorage.getItem(process.env.VUE_APP_WEB_CONFIG_KEY)
    if (configStr) {
      const config = JSON.parse(configStr)
      if (config?.$globalProp?.environment === 'dev') {
        // 设置水印
        waterMark('开发环境')
      }
    }
    // 设置系统版本
    setSystemVersion(this.compatible)
    // 获取基座应用的信息进行初始化
    this.setMicroApp()
  },
  watch: {
    weekMode (val) {
      this.setWeekModeTheme(val)
    },
    lang (val) {
      this.setLanguage(val)
      this.setHtmlTitle()
    },
    $route () {
      this.setHtmlTitle()
    },
    'theme.mode': {
      immediate: true,
      handler: function (val) {
        this.changeThemeMode(val)
      }
    },
    'theme.color': {
      immediate: true,
      handler: function (val) {
        this.changeThemeColor(val)
      }
    },
    layout: function () {
      window.dispatchEvent(new Event('resize'))
    }
  },
  computed: {
    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang', 'compatible'])
  },
  methods: {
    ...mapMutations('setting', ['setDevice']),
    changeThemeColor (val) {
      if (process.env.NODE_ENV === 'production') {
        const closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
        themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
      } else {
        console.info('为保证构建性能，关闭开发环境下的主题色切换')
      }
    },
    changeThemeMode (val) {
      if (process.env.NODE_ENV === 'production') {
        const closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
        themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
      } else {
        console.info('为保证构建性能，关闭开发环境下的主题模式切换')
      }
    },
    setWeekModeTheme (weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    },
    setMicroApp () {
      let baseApp = '/login'
      let queryData = {}
      const that = this
      if (isMicroAppEnv()) {
        const data = window.microApp.getData() // 获取主应用下发的data数据
        if (data.baseroute) {
          baseApp = data.baseroute
        } // 获取主应用下发的data数据
        if (data.queryData) {
          queryData = data.queryData
        }
        this.setMicroAppTheme(data.themeStore)
        window.microApp.addDataListener((_data) => {
          if (_data.baseroute) {
            baseApp = _data.baseroute
          }
          that.setMicroAppTheme(_data.themeStore)
        })
        this.$router.replace({ path: baseApp, query: queryData })
      }
    },
    setMicroAppTheme (themeStore) {
      try {
        let themeScheme = 'dark'
        if (themeStore && themeStore.themeColor && themeStore.themeScheme) {
          if (themeStore.themeScheme === 'dark') {
            themeScheme = 'night'
          }
          themeUtil.changeThemeColor(themeStore.themeColor, themeScheme)
        }
      } catch (e) {
      }
    },
    setLanguage (lang) {
      this.$i18n.locale = lang
      switch (lang) {
        case 'CN':
          this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
          break
        case 'HK':
          this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
          break
        case 'US':
        default:
          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
          break
      }
    },
    setHtmlTitle () {
      // 微应用下不设置title
      if (window.__MICRO_APP_ENVIRONMENT__) {
        return
      }
      const route = this.$route
      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
    },
    popContainer () {
      return document.getElementById('popContainer')
    }
  }
}
</script>

<style lang="less" scoped>
#id {
}
</style>
<style lang="less">
@import "./font-style/font.css";

body {
  font-family:
    Inter,
    'PingFangSC',
    'Microsoft YaHei UI',
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji",
    sans-serif !important;}

.water-mark-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}

.water-word {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(8, 8, 8, 0.1);
  transform: rotate(-45deg);
  user-select: none;
}
</style>
