import { saveViewApi } from "@/api";
import { globalLookup } from "@/hook/global";
import { reactive } from "vue";

export const controlPanel = reactive({
    sections: [
        {
            iconClass: 'iconfont icon-collections'
        },
        {
            iconClass: 'iconfont icon-setting'
        },
        {
            iconClass: 'iconfont icon-about'
        }
    ],
    currentIndex: -1,
    click(index) {
        if (this.currentIndex === index) {
            this.currentIndex = -1;
        } else {
            if (horizontalResizer.width < 5) {
                horizontalResizer.width = 440;
            }
            this.currentIndex = index;
        }

        // 保存
        saveViewApi({ rightNavIndex: true });
    }
});

export const horizontalResizer = reactive({
    active: false,
    hover: false,
    width: 440,
    mousedown() {
        this.active = true;
        document.addEventListener('mousemove', resize);
    }
});

export function resize(event) {
    // 50 是 --right-nav-width
    const computedWidth = window.innerWidth - event.clientX - 50;
    if (computedWidth >= 0 && computedWidth <= 2000) {
        horizontalResizer.width = computedWidth;
    }
}