<template>
    <el-dropdown trigger="click">
        <div class="el-dropdown-link" :title="$t('message.languare')">
            <el-tooltip :content="$t('message.languare')">
                <div>
                    <img :src="languareIcon" alt="" class="header_right_icon left">
                    <span class="header_right_title_span">{{$t('message.languare')}}</span>
                </div>
            </el-tooltip>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item class="header_menu_li" style="color: #26a69a;" @click="switchLanguare('en')">Englsh</el-dropdown-item>
                <el-dropdown-item class="header_menu_li" style="color: #26a69a;" @click="switchLanguare('zhHant')">中文繁體</el-dropdown-item>
                <el-dropdown-item class="header_menu_li" style="color: #26a69a;" @click="switchLanguare('zhHans')">中文简体</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<script setup>
import { ref } from 'vue'
import languareIcon from '../../assets/img/language2.png'
import '../../assets/css/header.css'
// import { useI18n } from 'vue-i18n'
// const { locale } = useI18n()

const switchLanguare = (type) => {
    localStorage.setItem('lang', type)
    // locale.value = type
    window.location.reload()
}
</script>
<style scoped lang="sass">

</style>