<template>
  <div class='user-wrapper'>
    <div class='content-box'>
      <a-dropdown>
				<span class='action ant-dropdown-link user-dropdown-menu'>
					<i style='font-size:23px; color:#1890FF' class="iconfont iconyuyan"></i>
				</span>
        <a-menu slot='overlay' :selectedKeys=[currentLang] class='user-dropdown-menu-wrapper'>
          <a-menu-item
              v-for='item in languageLabels'
              :key='item.key'
              @click='changeLang(item.key)'>
            <a href='javascript:'>
							<span>
								{{ item.icon }}
							</span>
              {{ item.name }}
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>
<script>

import i18nMixin from '@/store/i18n-mixin';

export default {
  name: 'GlobalMenu',
  mixins: [i18nMixin],
  data() {
    return {
      /** 国际化语言 */
      languageLabels: [
        {key: 'zh-CN', name: '简体中文', icon: '🇨🇳'},
        {key: 'en-US', name: 'English', icon: '🇺🇸'}
      ]
    };
  },
  methods: {
    /**
     * 修改国际化
     * @param key
     */
    changeLang(key) {
      let _that = this;
      let lang = JSON.parse(localStorage.getItem('lang')) || 'zh-CN';
      if (lang === key) return;
      _that.setLang(key);
      _that.$api.changeLocale({
        lang: key
      }).then((res) => {
        if (!res.flag) {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
      location.reload();
    }
  }
};
</script>
<style>
.ant-pro-drop-down > i {
  font-size: 16px !important;
  -webkit-transform: none !important;
  transform: none !important;
}
</style>
