<template>
    <div style="cursor: pointer;">
        <el-dropdown @command="doChange" placement="bottom-end" size="large" >
            <div class="i18n-wrap">
                <svg-icon v-if="showIcon" class="i18n-icon" icon-class="i18n" />
                <span class="i18n-text">{{ t('caption') }}</span> 
                <el-icon ><arrow-down /></el-icon>
            </div>
            
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(item, index) in list" :key="index" :command="item.code">
                        <template #default>
                            <div style="font-size: 18px;">{{ item.name }}</div>
                        </template>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { inject, computed } from "vue";
import { useLocale } from 'element-plus'
import Locales from '@/locales/index'

const { t } = useLocale()
const changeLanguage = inject('changeLanguage')
const emit = defineEmits(['change'])

const doChange = (data) => {
    changeLanguage(data)
    emit('change', data)
}

const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: Object.keys(Locales)
  },
  showIcon: {
    type: Boolean,
    default: true
  }
});

const list = computed(() => {
    return props.options.map(i => {
        return {
            name: Locales[i].caption,
            code: i
        }
    })
})
</script>

<style lang="scss" scoped>
.i18n-wrap {
    font-size: 20px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    color: #000;
    .i18n-icon {
        width: 20px;
        height: 20px;
    }

    .i18n-text {
        margin: 0 5px 0 5px;
    }
}

:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
    background-color: rgba(0, 0, 0, 0.119);
    color: rgba(0, 0, 0, 1);
}
</style>