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

<script>
import {enquireScreen} from './utils/util'
import {mapState, mapMutations} from 'vuex'
import themeUtil from '@/utils/themeUtil';
import {getI18nKey} from '@/utils/routerUtil'

export default {
  name: 'App',
  data() {
    return {
      locale: {}
    }
  },

  created () {
    this.setLanguage(this.lang) // 设置语言
    enquireScreen(isMobile => this.setDevice(isMobile)) // 监听屏幕变化 设置设备类型
  },
  mounted() {
   this.setWeekModeTheme(this.weekMode) // 设置主题
  },
  watch: {
    weekMode(val) { // 监听色弱模式变化
      this.setWeekModeTheme(val) // 设置色弱模式主题
    },
    lang(val) { // 监听语言变化
      this.setLanguage(val) // 设置语言
      this.setHtmlTitle() // 设置html标题
    },
    $route() { // 监听路由变化
      this.setHtmlTitle() // 设置html标题
    },
    'theme.mode': function(val) { // 监听主题变化
      let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`) // 显示切换主题提示
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage) // 切换主题
    },
    'theme.color': function(val) { // 监听主题颜色变化
      let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`) // 显示切换主题提示
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage) // 切换主题
    },
    'layout': function() { // 监听布局变化
      window.dispatchEvent(new Event('resize')) // 触发resize事件
    }
  },
  computed: {
    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang']),
  },
  methods: {
    ...mapMutations('setting', ['setDevice']), 
    ...mapState('account', ['project']) ,
    setWeekModeTheme(weekMode) { // 设置色弱模式主题
      if (weekMode) { // 如果是色弱模式
        document.body.classList.add('week-mode') // 添加色弱模式样式
      } else {
        document.body.classList.remove('week-mode') // 移除色弱模式样式
      }
    },
    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() { // 设置html标题
      const project = JSON.parse(localStorage.getItem(process.env.VUE_APP_PROJECT_KEY))
      const route = this.$route // 获取当前路由
      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path) // 获取当前路由的i18n keywords  如果是首页则设置为home.name 否则获取当前路由的i18n keywords
      document.title = project.project_name + ' | ' + this.$t(key) // 设置html标题 process.env.VUE_APP_NAME 为项目名称 this.$t(key) 为当前路由的i18n keywords
    },
    popContainer() { // 弹出层容器
      return document.getElementById("popContainer") // 返回弹出层容器
    }
  }
}
</script>

<style lang="less" scoped>
  #id{
  }
</style>
