<template>
    <el-color-picker v-model="theme" :predefine="['#409EFF', '#67C23A', '#E6A23C', '#f5222d', '#11a983', '#13c2c2', '#6959CD', '#434f5d']" class="theme-picker" popper-class="theme-picker-dropdown" title="换肤" @change="changeColor" />
</template>

<script>
import { hexToRGBA } from '@/tool/func';
import { setStorage, getStorage } from '@/tool/storage';
import { Loading } from 'element-ui';
import { applyTheme } from '@/tool/themeFunc';

export default {
    name: 'ThemePicker',
    data() {
        return {
            chalk: '', // content of theme-chalk css
            theme: getStorage({ name: 'themeColorObj' })?.themeColor || '#1677FF',
            loadingInstance: null
        };
    },
    computed: {
        defaultTheme() {
            return this.$store.state.setting.theme;
        }
    },
    watch: {
        defaultTheme: {
            handler: function(val, oldVal) {
                this.theme = val;
                const themeColorObj = { themeColor: val, subThemeColor: hexToRGBA(val, 0.1), litterThemeColor: hexToRGBA(val, 0.05), middleThemeColor: hexToRGBA(val, 0.3) };
                setStorage({ name: 'themeColorObj', content: themeColorObj, needListener: true });
            },
            immediate: true
        },
        async theme(val) {
            this.loadingInstance = Loading.service({
                lock: true,
                text: '新主题加载中，请稍后', // 加载动画的文字
                spinner: 'el-icon-loading', // 加载动画的图标
                background: 'rgba(0, 0, 0, 0.7)' // 加载动
            });
            applyTheme(val);
            this.loadingInstance.close();
        }
    },

    methods: {
        changeColor() {

        }
    }
};
</script>

<style>
.theme-picker {
	float: left;
	margin-top: 10px;
}

.theme-message,
.theme-picker-dropdown {
	z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
	height: 26px !important;
	width: 26px !important;
	padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
	display: none;
}
</style>
