<template>
  <el-dropdown trigger="click" @command="onCommand">
    <div class="user-icon">
      <i
        class="iconfont"
        :class="value === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
        title="语言切换"
      ></i>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn" :disabled="value === 'zh-cn'"
          >简体中文</el-dropdown-item
        >
        <el-dropdown-item command="en" :disabled="value === 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "I18N",

  props: {
    value: {
      type: String,
      required: true,
    },
  },

  emits: ["update:value", "change"],

  setup(_, { emit }) {
    const onCommand = (i18n: string) => {
      emit("update:value", i18n);
      emit("change", i18n);
    };

    return {
      onCommand,
    };
  },
});
</script>
