<template>
  <el-popover
    popper-class="header-popper"
    :visible-arrow="false"
    trigger="hover"
  >
    <span slot="reference" class="lang-text"
      >{{ $i18n.locale | langValue
      }}<i class="icon-nav-user-unfold triangle-icon"></i
    ></span>
    <template>
      <ul class="i18n-select-ul">
        <li
          v-show="$i18n.locale != 'zh-CN'"
          @click="handleSetLanguage('zh-CN', '简体中文')"
        >
          简体中文
        </li>
        <li
          v-show="$i18n.locale != 'zh-TW'"
          @click="handleSetLanguage('zh-TW', '繁體中文')"
        >
          繁體中文
        </li>
        <li
          v-show="$i18n.locale != 'en'"
          @click="handleSetLanguage('en', 'English')"
        >
          English
        </li>
      </ul>
    </template>
  </el-popover>
</template>

<script>
export default {
  name: 'lang-select',
  computed: {
    language() {
      return localStorage.getItem('lang') || 'zh-CN'
    }
  },
  methods: {
    handleSetLanguage(lang, Language) {
      this.$i18n.locale = lang
      this.$validator.locale = lang

      // 日期控件格式化
      if ('zh-CN' == lang) {
        // moment.locale('zh-cn');
      } else {
        // moment.locale('en');
      }

      localStorage.setItem('lang', lang)
      let message = this.$t('eip.selectLang.switchLangMsg')
      this.$message({
        message: message,
        type: 'success'
      })
    }
  },
  filters: {
    langValue: val => {
      let resultVal = val
      if ('zh-CN' == val) {
        resultVal = '简体中文'
      }
      if ('zh-TW' == val) {
        resultVal = '繁體中文'
      }
      if ('en' == val) {
        resultVal = 'English'
      }
      return resultVal
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.el-link {
  margin-right: 20px;
  font-size: 13px;
  width: 52px;
}
.lang-text {
  color: $base-color;
  font-size: 16px;
  padding-left: 8px;
  .triangle-icon {
    padding-left: 10px;
  }
  &:hover {
    .triangle-icon {
      padding-left: 0;
      padding-right: 10px;
      transform: rotateZ(180deg);
    }
  }
}
.i18n-select-ul {
  list-style: none;
  padding: 0;
}
.i18n-select-ul > li {
  padding: 10px;
  cursor: pointer;
}
.i18n-select-ul > li:hover {
  background: #f7f7f7;
}
</style>
