import { Local } from './storage';
import { getLightColor } from './color-transform'
/**
 * 设置html根标签全局颜色
 * @param colorType 类型
 * @param color 目标颜色
 */
export const setHtmlGlobalThemeColor = (colorType: string, color: string) => {
    const key = `--color-${colorType}`
    document.documentElement.style.setProperty(key, color);
    for (let i = 1; i <= 9; i++) {
        const lightColor = getLightColor(color, i / 10);
        // 设置基本色的浅色系
        if (lightColor) {
            document.documentElement.style.setProperty(
                `${key}-light-${i}`,
                lightColor
            );
        }
    }
}
/**
 * 设置html根标签全局背景颜色
 * @param bgColorType 类型或name
 * @param color 目标颜色
 */
export const setHtmlGlobalBgThemeColor = (bgColorType: string, color: string) => {
    const key = `--bg-${bgColorType}`
    document.documentElement.style.setProperty(key, color);
}
/**
 * 存储store里面的主题配置数据
 * @param key 存储的key值
 * @param themeConfig  store里面的themeConfig配置数据
 */
export const setLocalThemeConfig = (themeConfig: any, key = 'themeConfig') => {
    Local.remove('themeConfig');
    Local.set(key, JSON.stringify(themeConfig))
}
/**
 * 获取本地存储的主题配置的数据
 * @param key 
 * @returns 
 */
export const getLocalThemeConfig = (key = 'themeConfig') => {
    return JSON.parse(Local.get(key))
}
/**
 * 存储html标签上的全局主题数据
 * @param key 存储的key值
 * @param themeConfigStyle  html标签上的全局主题数据
 */
export const setLocalThemeConfigStyle = (key = 'themeConfigStyle') => {
    const themeConfigStyle = document.documentElement.style.cssText
    Local.set(key, JSON.stringify(themeConfigStyle))
}
/**
 * 获取本地存储的html标签上的全局主题数据
 * @param key 
 * @returns 
 */
export const getLocalThemeConfigStyle = (key = 'themeConfigStyle') => {
    return JSON.parse(Local.get(key))
}
/**
 * 设置全局的背景颜色渐变
 * 主要包括：顶栏背景渐变、菜单背景渐变、分栏菜单背景渐变
 * @param themeConfig 主题配置数据
 */
export const setGlobalBgColorGradual = (themeConfig: any) => {
    const { isTopBarColorGradual, topBar, isMenuBarColorGradual, menuBar, isColumnsMenuBarColorGradual, columnsMenuBar } = themeConfig
    setGraduaFun('.breadcrumb-index', isTopBarColorGradual, topBar)
    setGraduaFun('.layout-aside', isMenuBarColorGradual, menuBar)
    setGraduaFun('.layout-columns-aside', isColumnsMenuBarColorGradual, columnsMenuBar)
}

/**
 * 背景渐变函数（包含取消渐变）
 * @param el 目标元素
 * @param bool 是否需要渐变
 * @param color 渐变的颜色
 * @returns void
 */
const setGraduaFun = (el: string, bool: boolean, color: string) => {
    const els = document.querySelector(el);
    if (!els) return false;
    if (bool) els.setAttribute('style', `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)})`);
    else els.setAttribute('style', `background-image:${color}`);
};
/**
 * 设置菜单选中的背景状态
 * @param bool true为充满背景色  false只是文字颜色发生变化
 */
export const setMenuHighlight = (isMenuColorHighlight: boolean) => {
    let elsItems = document.querySelectorAll('.el-menu-item');
    let elActive = document.querySelector('.el-menu-item.is-active');
    if (!elActive) return false;
    if (isMenuColorHighlight) {
        elsItems.forEach((el: any) => el.setAttribute('id', ``));
        elActive.setAttribute('id', `add-is-active`);
    } else {
        elActive.setAttribute('id', ``);
    }
}