<template>
  <div class="lang-switch flex-center">
    <!-- <el-button @click="switchToZh" :type="langStore.currentLang === 'zh-CN' ? 'primary' : 'text'">中文</el-button>
    <el-button @click="switchToEn" :type="langStore.currentLang === 'en' ? 'primary' : 'text'">English</el-button> -->
    <el-dropdown @command="handleClick" type="primary" round>
      <span class="el-dropdown-link">
        <el-button size="small" round>{{ langStore.currentLang === 'zh-CN' ? 'ZN' : 'EN' }}</el-button>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh-CN" v-if="langStore.currentLang !== 'zh-CN'">
            <el-icon><Switch /></el-icon>
            中文
          </el-dropdown-item>
          <el-dropdown-item command="en" v-if="langStore.currentLang !== 'en'">
            <el-icon><Switch /></el-icon>
            English
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { useLangStore } from '@/pinia/langStore'

const langStore = useLangStore()

// 点击切换语言
const handleClick = (command) => {
  if (command === 'zh-CN') {
    switchToZh()
  } else if (command === 'en') {
    switchToEn()
  }
  window.location.reload();
}

// 切换到中文
const switchToZh = () => {
  langStore.changeLang('zh-CN')
}

// 切换到英文
const switchToEn = () => {
  langStore.changeLang('en')
}
</script>

<style scoped>
.lang-switch {

}
</style>