import { ref, computed, onMounted, nextTick } from 'vue';

// 定义 GridHelper 类
class GridHelper {
    // 静态方法，用于获取和设置附加属性
    static getShowBorder(el: HTMLElement): boolean {
        return el.dataset.showBorder === 'true';
    }

    static setShowBorder(el: HTMLElement, value: boolean) {
        el.dataset.showBorder = value.toString();
    }

    static getGridLineThickness(el: HTMLElement): number {
        return parseFloat(el.dataset.gridLineThickness || '1');
    }

    static setGridLineThickness(el: HTMLElement, value: number) {
        el.dataset.gridLineThickness = value.toString();
    }

    static getGridLineBrush(el: HTMLElement): string {
        return el.dataset.gridLineBrush || 'lightgray';
    }

    static setGridLineBrush(el: HTMLElement, value: string) {
        el.dataset.gridLineBrush = value;
    }

    // 模拟 GridLoaded 方法 TODO 这里Grid.rows 报错 需要重构
    static gridLoaded(grid: HTMLElement) {
        const children = Array.from(grid.children) as HTMLElement[];
        const rowCount = 1;//grid.rows ? grid.rows.length : 1;
        const columnCount = 1;//grid.columns ? grid.columns.length : 1;

        children.forEach((item, index) => {
            const row = parseInt(item.dataset.row || '0', 10);
            const column = parseInt(item.dataset.column || '0', 10);
            const rowSpan = parseInt(item.dataset.rowSpan || '1', 10);
            const columnSpan = parseInt(item.dataset.columnSpan || '1', 10);

            const settingThickness = this.getGridLineThickness(grid);
            let thicknessLeft = settingThickness / 2;
            let thicknessTop = settingThickness / 2;
            let thicknessRight = settingThickness / 2;
            let thicknessBottom = settingThickness / 2;

            if (row === 0) thicknessTop = settingThickness;
            if (row + rowSpan === rowCount) thicknessBottom = settingThickness;
            if (column === 0) thicknessLeft = settingThickness;
            if (column + columnSpan === columnCount) thicknessRight = settingThickness;

            const border = document.createElement('div');
            border.style.border = `${thicknessTop}px ${this.getGridLineBrush(grid)} solid`;
            border.style.borderLeftWidth = `${thicknessLeft}px`;
            border.style.borderRightWidth = `${thicknessRight}px`;
            border.style.borderBottomWidth = `${thicknessBottom}px`;
            border.style.padding = '0.5px';

            grid.removeChild(item);
            border.appendChild(item);
            grid.insertBefore(border, grid.children[index]);
        });
    }
}

// 定义 Vue 组合函数
export function useGridHelper(elRef: any) {
    const isShowBorder = ref(false);
    const gridLineThickness = ref(1);
    const gridLineBrush = ref('lightgray');

    const applyGridBorder = () => {
        if (elRef.value && isShowBorder.value) {
            GridHelper.setShowBorder(elRef.value, isShowBorder.value);
            GridHelper.setGridLineThickness(elRef.value, gridLineThickness.value);
            GridHelper.setGridLineBrush(elRef.value, gridLineBrush.value);
            GridHelper.gridLoaded(elRef.value);
        }
    };

    onMounted(() => {
        nextTick(() => {
            applyGridBorder();
        });
    });

    return {
        isShowBorder,
        gridLineThickness,
        gridLineBrush,
        applyGridBorder
    };
}
