<template>
  <!--this is a language component-->
  <el-dropdown trigger="hover" @command="handleLanguageChange">
    <div>
      <!-- <svg-icon icon-class="language" class-name="language-icon" style="width: 36px;" /> -->
      <span>{{ changeChinese(appStore.language) }}</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="(item, index) in definition"
          :key="index"
          :disabled="appStore.language === item.value"
          :command="item.value"
        > {{ item.label }} </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup name="Language">
import useAppStore from '@/store/modules/app'
import { useI18n } from 'vue-i18n'

const appStore = useAppStore()
const { locale } = useI18n()

const definition = [
  { label: '中文', value: 'zh_CN'},
  { label: '英文', value: 'en_US'},
  { label: '俄文', value: 'ru_RU'},
]
  function handleLanguageChange(lang) {
    locale.value = lang
    appStore.changeLanguage(lang)
    if (lang == 'en') {
      ElMessage.success('Switch Language Successfully!')
    } else {
      ElMessage.success('切换语言成功！')
    }
  }
  function changeChinese(en) {
  return definition.find(i => i.value == en)?.label || definition[0].label
}
</script>

<style lang='scss' scoped>

</style>