<template>
    <div class="header-icon-bar" @click="tapClick">
        <el-tooltip content="主色调" placement="top">
            <hc-icon name="palette" class="header-icon" />
        </el-tooltip>
        <i class="color-dot" :style="`background: ${color};`" />
        <el-color-picker ref="colorRef" v-model="color" size="small" :predefine="colors" @change="colorChange" />
    </div>
</template>

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

const store = useAppStore()

//主题色
const colorRef = ref(null)
const color = ref(store.getColor)
const colors = ['#4980F7', '#1ECC95', '#37c0fe', '#8044de', '#b745cb', '#e03997', '#e54d42', '#f37b1d', '#a5673f']

//渲染完成
onMounted(() => {
    setElementMainColor(color.value)
})

//点击事件
const tapClick = () => {
    colorRef.value?.show()
}

//颜色改变
const colorChange = (val) => {
    store.setColor(val)
    setElementMainColor(val)
    userConfigSave({ color: val })
}
</script>

<style lang="scss" scoped>
.header-icon-bar .color-dot {
    position: absolute;
    width: 8px;
    height: 5px;
    bottom: 11.5px;
    right: 0;
}
</style>

<style lang="scss">
.header-icon-bar .el-color-picker {
    width: 0;
    height: 0;
    margin-top: 44px;
    z-index: -1;
}
</style>
