<template>
    <el-tooltip effect="dark" :content="t('head.changeStyle')" placement="left">
        <el-dropdown class="head-icon" :size="state.size.size" trigger="click" :teleported="false">
            <el-button :size="state.size.size" icon="Opportunity" circle></el-button>
            <template #dropdown>
                <el-dropdown-menu>

                    <!-- <el-dropdown-item v-for="item in Styles" @click="changeStyle(item.name)">
                        <el-tooltip effect="dark" :content="t(item.i18n)" placement="left">
                            <component class="icon" :is="item.icon"></component>
                        </el-tooltip>
                    </el-dropdown-item> -->

                    <el-dropdown-item @click="changeStyle('plainb')">
                        <el-tooltip effect="dark" :content="t('styles[3]')" placement="left">
                            <el-icon class="dropdown-icon">
                                <Sunset />
                            </el-icon>
                        </el-tooltip>
                    </el-dropdown-item>
                    <el-dropdown-item @click="changeStyle('plain')">
                        <el-tooltip effect="dark" :content="t('styles[0]')" placement="left">
                            <el-icon class="dropdown-icon">
                                <Sunset />
                            </el-icon>
                        </el-tooltip>
                    </el-dropdown-item>
                    <el-dropdown-item @click="changeStyle('light')">
                        <el-tooltip effect="dark" :content="t('styles[1]')" placement="left">
                            <el-icon class="dropdown-icon">
                                <Sunny />
                            </el-icon>
                        </el-tooltip>
                    </el-dropdown-item>
                    <el-dropdown-item @click="changeStyle('dark')">
                        <el-tooltip effect="dark" :content="t('styles[2]')" placement="left">
                            <el-icon class="dropdown-icon">
                                <MoonNight />
                            </el-icon>
                        </el-tooltip>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-tooltip>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onMounted } from "vue";
import { Styles } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

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

const changeStyle = type => {
    commit('updateState', ['style', Styles[type]]);
}

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