<template>
    <el-tooltip effect="dark" :content="t('head.language')" placement="left">
        <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
            <el-button icon="Flag" :size="state.size.size" circle></el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="changeLang('zh')">{{ t('head.zh') }}</el-dropdown-item>
                    <el-dropdown-item @click="changeLang('en')">{{ t('head.en') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-tooltip>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
const { t, setLocale } = useI18n();

const { state, commit, dispatch } = useStore();

const changeLang = type => {
    setLocale(type);
}

onMounted(() => { });
</script>
<style lang="scss" scoped></style>