oxygen-ui/src/utils/common.tsx

import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
import moment from 'moment'
import ReactDOM from 'react-dom/client'
import LoadingMask from '@/components/common/LoadingMask.tsx'

export const getQueryVariable = (variable: string) => {
    const query = window.location.search.substring(1)
    const vars = query.split('&')
    for (const value of vars) {
        const pair = value.split('=')
        if (pair[0] === variable) {
            return decodeURIComponent(pair[1].replace(/\+/g, ' '))
        }
    }
    return null
}

export const setCookie = (
    name: string,
    value: string,
    daysToLive: number | null,
    path: string | null
) => {
    let cookie = `${name}=${encodeURIComponent(value)}`

    if (typeof daysToLive === 'number') {
        cookie = `${cookie}; max-age=${daysToLive * 24 * 60 * 60}`
    }

    if (typeof path === 'string') {
        cookie = `${cookie}; path=${path}`
    }

    document.cookie = cookie
}

export const setLocalStorage = (name: string, value: string) => {
    localStorage.setItem(name, value)
}

export const setToken = (token: string) => {
    setLocalStorage(STORAGE_TOKEN_KEY, token)
}

export const getCookie = (name: string) => {
    const cookieArr = document.cookie.split(';')

    for (const cookie of cookieArr) {
        const cookiePair = cookie.split('=')
        if (cookiePair[0].trim() === name) {
            return decodeURIComponent(cookiePair[1])
        }
    }

    return null
}

export const getLocalStorage = (name: string) => {
    return localStorage.getItem(name)
}

export const getToken = () => {
    return getLocalStorage(STORAGE_TOKEN_KEY)
}

export const removeCookie = (name: string) => {
    document.cookie = `${name}=; max-age=0`
}

export const removeLocalStorage = (name: string) => {
    localStorage.removeItem(name)
}

export const removeToken = () => {
    removeLocalStorage(STORAGE_USER_INFO_KEY)
    removeLocalStorage(STORAGE_TOKEN_KEY)
}

export const clearLocalStorage = () => {
    localStorage.clear()
}

export const getCaptcha = (width: number, high: number, num: number) => {
    const CHARTS = '23456789ABCDEFGHJKLMNPRSTUVWXYZabcdefghijklmnpqrstuvwxyz'.split('')

    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D

    ctx.rect(0, 0, width, high)
    ctx.clip()

    ctx.fillStyle = randomColor(200, 250)
    ctx.fillRect(0, 0, width, high)

    for (let i = 0.05 * width * high; i > 0; i--) {
        ctx.fillStyle = randomColor(0, 256)
        ctx.fillRect(randomInt(0, width), randomInt(0, high), 1, 1)
    }

    ctx.font = `${high - 4}px Consolas`
    ctx.fillStyle = randomColor(160, 200)
    let value = ''
    for (let i = 0; i < num; i++) {
        const x = ((width - 10) / num) * i + 5
        const y = high - 12
        const r = Math.PI * randomFloat(-0.12, 0.12)
        const ch = CHARTS[randomInt(0, CHARTS.length)]
        value += ch
        ctx.translate(x, y)
        ctx.rotate(r)
        ctx.fillText(ch, 0, 0)
        ctx.rotate(-r)
        ctx.translate(-x, -y)
    }

    const base64Src = canvas.toDataURL('image/jpg')
    return {
        value,
        base64Src
    }
}

const randomInt = (start: number, end: number) => {
    if (start > end) {
        const t = start
        start = end
        end = t
    }
    start = Math.ceil(start)
    end = Math.floor(end)
    return start + Math.floor(Math.random() * (end - start))
}

const randomFloat = (start: number, end: number) => {
    return start + Math.random() * (end - start)
}

const randomColor = (start: number, end: number) => {
    return `rgb(${randomInt(start, end)},${randomInt(start, end)},${randomInt(start, end)})`
}

export const getRedirectUrl = (path: string, redirectUrl: string): string => {
    return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
}

export const getLocalTime = (utcTime: string, format: string = 'yyyy-MM-DD HH:mm:ssZ') => {
    return moment.utc(utcTime).local().format(format)
}

export const floorNumber = (num: number, digits: number) => {
    if (digits > 0) {
        return Math.floor(num / Math.pow(10, digits - 1)) * Math.pow(10, digits - 1)
    } else {
        const regExpMatchArray = num.toString().match(new RegExp('^\\d\\.\\d{' + -digits + '}'))
        if (regExpMatchArray !== null) {
            return parseFloat(regExpMatchArray[0]).toFixed(-digits)
        } else {
            return num
        }
    }
}

export const powerListToPowerTree = (
    modules: ModuleVo[],
    menus: MenuVo[],
    elements: ElementVo[],
    operations: OperationVo[]
): _DataNode[] => {
    const menuMap = new Map<number, _DataNode[]>()
    const elementMap = new Map<number, _DataNode[]>()
    const operationMap = new Map<number, _DataNode[]>()

    operations.forEach((operation) => {
        if (
            operationMap.has(operation.elementId) &&
            operationMap.get(operation.elementId) !== null
        ) {
            operationMap.get(operation.elementId)?.push({
                title: operation.name,
                fullTitle: operation.name,
                key: operation.powerId,
                value: operation.powerId
            })
        } else {
            operationMap.set(operation.elementId, [
                {
                    title: operation.name,
                    fullTitle: operation.name,
                    key: operation.powerId,
                    value: operation.powerId
                }
            ])
        }
    })

    elements.forEach((element) => {
        if (elementMap.has(element.menuId) && elementMap.get(element.menuId) !== null) {
            elementMap.get(element.menuId)?.push({
                title: element.name,
                fullTitle: element.name,
                key: element.powerId,
                value: element.powerId,
                children: operationMap.get(element.id)?.map((value) => {
                    value.fullTitle = `${element.name}-${value.fullTitle}`
                    return value
                })
            })
        } else {
            elementMap.set(element.menuId, [
                {
                    title: element.name,
                    fullTitle: element.name,
                    key: element.powerId,
                    value: element.powerId,
                    children: operationMap.get(element.id)?.map((value) => {
                        value.fullTitle = `${element.name}-${value.fullTitle}`
                        return value
                    })
                }
            ])
        }
    })

    menus.forEach((menu) => {
        if (menuMap.has(menu.moduleId) && menuMap.get(menu.moduleId) !== null) {
            menuMap.get(menu.moduleId)?.push({
                title: menu.name,
                fullTitle: menu.name,
                key: menu.powerId,
                value: menu.powerId,
                children: elementMap.get(menu.id)?.map((value) => {
                    value.fullTitle = `${menu.name}-${value.fullTitle}`
                    value.children?.forEach((value1) => {
                        value1.fullTitle = `${menu.name}-${value1.fullTitle}`
                    })
                    return value
                })
            })
        } else {
            menuMap.set(menu.moduleId, [
                {
                    title: menu.name,
                    fullTitle: menu.name,
                    key: menu.powerId,
                    value: menu.powerId,
                    children: elementMap.get(menu.id)?.map((value) => {
                        value.fullTitle = `${menu.name}-${value.fullTitle}`
                        value.children?.forEach((value1) => {
                            value1.fullTitle = `${menu.name}-${value1.fullTitle}`
                        })
                        return value
                    })
                }
            ])
        }
    })

    return modules.map((module) => ({
        title: module.name,
        fullTitle: module.name,
        key: module.powerId,
        value: module.powerId,
        children: menuMap.get(module.id)?.map((value) => {
            value.fullTitle = `${module.name}-${value.fullTitle}`
            value.children?.forEach((value1) => {
                value1.fullTitle = `${module.name}-${value1.fullTitle}`
                value1.children?.forEach((value2) => {
                    value2.fullTitle = `${module.name}-${value2.fullTitle}`
                })
            })
            return value
        })
    }))
}

export const showLoadingMask = (id: string) => {
    if (document.querySelector(`#${id}`)) {
        return
    }

    const container = document.createElement('div')
    document.body.appendChild(container)
    container.id = id
    container.setAttribute(
        'style',
        'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
    )

    return ReactDOM.createRoot(container).render(<LoadingMask />)
}

export const removeLoadingMask = (id: string) => {
    document.querySelectorAll(`#${id}`).forEach((value) => {
        value.parentNode?.removeChild(value)
    })
}