<template>
  <el-dropdown trigger="click" class="lang-select" @command="handleSetLanguage">
    <div>
      <svg-icon class="lang-icon" icon-class="i18n" />
      <span class="lang-text">{{ $t("language." + language) }}</span>
      <i class="el-icon-arrow-down" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language === 'zh'" command="zh">
        {{ $t("language.zh") }}
      </el-dropdown-item>
      <el-dropdown-item :disabled="language === 'en'" command="en">
        {{ $t("language.en") }}
      </el-dropdown-item>
      <el-dropdown-item :disabled="language === 'ja'" command="ja">
        {{ $t("language.ja") }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "LangSelect",
  computed: {
    ...mapGetters(["language"]),
  },
  methods: {
    /**
     * 处理语言切换
     * @param {string} language - 语言代码
     */
    handleSetLanguage(language) {
      this.$i18n.locale = language;
      this.$store.dispatch("language/setLanguage", language);
      this.$message({
        message: this.$t("message.success"),
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.lang-select {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #606266;
  font-size: 14px;

  &:hover {
    color: #409eff;
  }

  .lang-icon {
    margin-right: 6px;
    font-size: 18px;
  }

  .lang-text {
    margin-right: 4px;
    font-size: 14px;
  }
}
</style>
