<template>
    <el-dropdown size="large" trigger="click">
        <div class="header-icon-bar">
            <el-tooltip content="主题皮肤" placement="top">
                <hc-icon name="t-shirt" class="header-icon" />
            </el-tooltip>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="themeChange('default')">默认主题</el-dropdown-item>
                <el-dropdown-item @click="themeChange('vip')">VIP主题</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { userConfigSave } from '~api/other'

const store = useAppStore()

//主题
const theme = ref(store.getTheme)

//渲染完成
onMounted(() => {
    setThemeStyle()
})

//主题改变
const themeChange = (val) => {
    theme.value = val
    store.setTheme(val)
    setThemeStyle()
    userConfigSave({ theme: val })
}

//设置主题样式
const setThemeStyle = () => {
    document.documentElement.setAttribute('class', `theme-${theme.value}`)
}
</script>
