import { isNumber } from '@/utils/is';
import { useThrottleFn } from '@vueuse/shared';
import { ref, reactive, unref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';

/**
 * 显示与隐藏搜索框
 * @param domClass 搜索框的父节点
 */
function useDisplayExpansion(itemDomClass: string, heightItem: number) {
    // 是否挂着状态
    let mounted: boolean;
    const stateDisplayExpansion = reactive({
        isDisplay: false,//默认折叠
        expansionContentHeight: 0,//左侧容器默认高度
    })
    const expansionContainerRef = ref()
    // 显示与隐藏容器
    const displayColRef = ref()

    // 获取元素的宽度
    const gettWidthWithMargin = (formItem) => {
        // 获取DOM元素的样式
        const elementStyle = window.getComputedStyle(formItem);
        // 获取DOM元素的宽度（包括margin）
        const elementWidthWithMargin = parseInt(elementStyle.width) + parseInt(elementStyle.marginLeft) + parseInt(elementStyle.marginRight);
        // console.log('元素宽度（包括margin）:', elementWidthWithMargin);
        return elementWidthWithMargin
    }
    const throttledFn = useThrottleFn(() => {
        stateDisplayExpansion.isDisplay = false
        // 折叠容器的宽度
        if (!unref(expansionContainerRef)) return
        const expansionContainerDom = unref(expansionContainerRef)
        const expansionContentDom = expansionContainerDom.querySelector(`.expansion-content`)
        const expansionButtonsDom = expansionContainerDom.querySelector(`.expansion-buttons`)
        // 输入框的容器宽度
        expansionContentDom.style.width = expansionContainerDom.clientWidth - expansionButtonsDom.clientWidth + 'px'
        // 输入框列表
        const formItem = expansionContentDom.querySelectorAll(`.${itemDomClass}`)
        let totalWidth = 0
        let totalHeightNum = 1
        const contentClientWidth = expansionContentDom.clientWidth
        Array.from(formItem).forEach(item => {
            const width = gettWidthWithMargin(item)
            totalWidth += width
            // 判断是否大于当前容器就累计一行高度数
            if (totalWidth > contentClientWidth) {
                totalHeightNum += 1
                totalWidth = width
            }
        })
        stateDisplayExpansion.expansionContentHeight = isNumber(totalHeightNum) ? totalHeightNum * heightItem : 0
        // 初始化隐藏对应的dom节点
        if (!stateDisplayExpansion.isDisplay) isDisplay()
    }, 800, true)

    // 展开
    const displayOpen = () => {
        if (!unref(displayColRef)) return
        // 初始化隐藏对应的dom节点
        unref(displayColRef).$el.style.height = `${stateDisplayExpansion.expansionContentHeight}px`
    }
    // 折叠
    const isDisplay = () => {
        unref(displayColRef).$el.style.height = `${heightItem}px`
        unref(displayColRef).$el.style.overflow = "hidden"
    }

    const initColWidth = () => {
        throttledFn()
        window.addEventListener('resize', throttledFn)
        mounted = true
    }
    // 隐藏
    const hanleDisplayNone = () => {
        stateDisplayExpansion.isDisplay = !stateDisplayExpansion.isDisplay
        // 展开与折叠
        stateDisplayExpansion.isDisplay ? displayOpen() : isDisplay()
    }

    // 初始化高度、销毁事件
    onMounted(() => {
        initColWidth()
    })
    onUnmounted(() => {
        window.removeEventListener('resize', throttledFn)
    })
    onActivated(() => {
        if (mounted) {
            initColWidth()
        }
    })
    onDeactivated(() => {
        window.removeEventListener('resize', throttledFn)
    })

    return {
        expansionContainerRef,
        displayColRef,
        stateDisplayExpansion,
        hanleDisplayNone
    }
}

export {
    useDisplayExpansion
}