import { defineStore } from 'pinia'
import {nextTick} from "vue";
import {ElMessage} from "element-plus";

/**
 * 定义主题参数信息 
 */
export const useThemeStore = defineStore({
    id: 'theme',
    state: () => {
        // 声明默认主题配置   --- 注意：从这里改动主题配置后，需要手动刷新页面才会生效
        const defaultTheme = {
            theme: 'blue',      // 主题颜色  --- 可选值：blue, green, red, purple, tit, ash, dark-green, white
            switchMode: 'opacity',  // 页面切换动画类型  --- 可选值：opacity、right-jump-right、left-jump-left
            tabStyle: 'block',       // 卡片栏样式   --- 可选值：block、mellow、mask、mask-light
            layoutMode: 'classic',        // 整体布局方式   --- 可选值：classic、column
            isShowRefresh: true,       // 是否显示 [刷新视图] 按钮
            isShowDateTime: false,       // 是否显示 [当前时间] 按钮
            isShowBreadcrumb: true,     // 是否显示面包屑栏
            greyMode: false,             // 是否灰色模式
            weakMode: false,             // 是否色弱模式
        };
        const defaultThemeString = JSON.stringify(defaultTheme);

        // 如果开发者改动过的配置
        const cacheTheme = JSON.parse(localStorage.getItem('cache-layout-theme') || defaultThemeString);

        // 用户改动过的配置
        const userTheme = JSON.parse(localStorage.getItem('user-layout-theme') || defaultThemeString);
        
        // 优先级：开发者改动 > 用户改动 > 默认配置
        for (const key in defaultTheme) {
            // 默认配置的有改动时，以改动为准 
            if(defaultTheme[key] !== cacheTheme[key]) {
                userTheme[key] = defaultTheme[key];      // user 配置同步更新 
            }
            // 如果用户配置有改动时，以用户配置为准 
            else if(defaultTheme[key] !== userTheme[key]) {
                defaultTheme[key] = userTheme[key];
            } 
            // 否则，以默认主题配置为准 
            else {
                
            }
        }

        // 记录下本次默认 Theme，以便下次比对
        localStorage.setItem('cache-layout-theme', defaultThemeString);
        localStorage.setItem('user-layout-theme', JSON.stringify(userTheme));

        // 构建部分配置项
        nextTick(function (){
            const themeStore = useThemeStore();
            themeStore.greyModeChange(defaultTheme.greyMode);
            themeStore.weakModeChange(defaultTheme.weakMode);
        })

        // 返回
        return defaultTheme;
    },
    actions: {
        // 灰色模式调整
        greyModeChange: function (value){
            if (value) {
                document.body.classList.add('gray-mode');
            } else {
                document.body.classList.remove('gray-mode');
            }
        },
        // 色弱模式调整
        weakModeChange: function (value){
            if (value) {
                document.body.classList.add('weak-mode');
            } else {
                document.body.classList.remove('weak-mode');
            }
        },
        // 恢复默认
        resetTheme: function () {
            const cacheThemeString = localStorage.getItem('cache-layout-theme');
            if(!cacheThemeString) {
                return ElMessage({type:'warning', message: '未能读取到缓存数据，请尝试刷新页面'})
            }
            const cacheTheme = JSON.parse(cacheThemeString);
            for (const key in this.$state) {
                this.$state[key] = cacheTheme[key];
            }
            this.greyModeChange(this.greyMode);
            this.weakModeChange(this.weak);
        }
    }
})
