import { dom, doms, listener, getStyle, screenWidth, getQuery, onScroll } from '../js/utils.js'

(function () {
    let W = 0
    W = getStyle(dom('.w1200'), 'width').slice(0, -2)
    onresize = () => W = getStyle(dom('.w1200'), 'width').slice(0, -2)

    function setTableNode(node, triangle, getNode) {
        const newNode = dom(getNode, node)
        if (newNode) {
            const flexColumn = doms('tbody tr', newNode)
            const height = W > screenWidth ? 60 : 55
            if (newNode.style.height == '0px' || !newNode.style.height) {
                newNode.style.height =  `${flexColumn.length * height + height}px`
                newNode.style.marginTop = '30px'
                triangle.style.transform = 'rotate(-90deg)'
            } else {
                newNode.style.height = 0
                newNode.style.marginTop = 0
                triangle.style.transform = 'rotate(0)'
            }
        }
    }

    const setSonNode = (index) => {
        doms('.information-detail-item').forEach((item, i) => {
            if (index == i) item.style.display = 'block'
            else item.style.display = 'none'

            // if (index == 0) dom('.pc-footer').style.marginTop = '-135px'
            // else dom('.pc-footer').style.marginTop = 0
        })
    }

    setSonNode(getQuery('index') || 0)

    // doms('.tag-view li').forEach((tag, index) => {
    //     listener(tag, () => {
    //         doms('.tag-view li').forEach(tag => tag.classList.remove('active'))
    //         tag.classList.add('active')
    //         setSonNode(index)
    //     })
    // })

    doms('.list-item-info-view').forEach(item => {
        for (let index = 0; index < item.children.length; index++) {
            const length = item.children.length
            if (length % 2 == 0 && length > 2 && index != length - 1 && index != length - 2) item.children[index].classList.add('list-item-info-bb')
            if (length % 2 != 0) {
                length > 2 && index != length - 1 && item.children[index].classList.add('list-item-info-bb')
                index == length - 1 && item.children[index].classList.add('w100')
            }
            if (W < screenWidth && length > 1 && index != length - 1) item.children[index].classList.add('list-item-info-bb')
        }
    })

    doms('.supervision li').forEach(item => {
        listener(item, ({ target }) => {
            const supervisions = dom('.supervision-user-view', item)
            const triangle = dom('i', item)
            const height = W >= screenWidth ? 87 : 52
            const parnetNode = (index) => !index ? target.parentNode : target.parentNode.parentNode
            if ((target.nodeName == 'LI' || parnetNode(0).nodeName == 'LI' || parnetNode(1).nodeName == 'LI') && supervisions) {
                if (supervisions.style.height == '0px' || !supervisions.style.height) {
                    supervisions.style.height =
                        `${supervisions.children.length * height + (supervisions.children.length <= 4 ? 20 : 0)}px`
                    item.style.borderColor = 'transparent'
                    item.style.paddingBottom = '0'
                    triangle.style.transform = 'rotate(-90deg)'
                } else {
                    supervisions.style.height = 0
                    item.style.borderColor = '#EEEEEE'
                    item.style.paddingBottom = '40px'
                    triangle.style.transform = 'rotate(0)'
                }
            }

            const supervisionInfo = dom('.supervision-info', item)
            if (supervisionInfo) {
                if (supervisionInfo.style.display == 'block') {
                    supervisionInfo.style.display = 'none'
                    item.style.borderColor = '#EEEEEE'
                    supervisionInfo.style.marginTop = '0'
                    item.style.paddingBottom = '40px'
                    triangle.style.transform = 'rotate(0)'
                } else {
                    supervisionInfo.style.marginTop = '40px'
                    item.style.borderColor = 'transparent'
                    supervisionInfo.style.display = 'block'
                    item.style.paddingBottom = '0'
                    triangle.style.transform = 'rotate(-90deg)'
                }
            }

            setTableNode(item, triangle, '.bank')
            setTableNode(item, triangle, '.company')
        })
    })

    // doms('.chart-view span').forEach(item => listener(item, () => {
    //     dom('.popup').style.display = 'block'
    //     document.body.style.overflow = 'hidden'
    // }))
    // listener(dom('.popup_close'), () => {
    //     dom('.popup').style.display = 'none'
    //     document.body.style.overflow = 'auto'
    // })

    doms('.assets-year span').forEach(item => {
        listener(item, () => {
            doms('.assets-year span').forEach(item => item.classList.remove('assets-year-active'))
            item.classList.add('assets-year-active')
        })
    })

    dom('.consult-expansion') && listener(dom('.consult .consult-expansion'), () => {
        if (!dom('.consult-table').style.height || dom('.consult-table').style.height == '0px') {
            dom('.consult .consult-table').style.height = 'auto';
            dom('.consult .consult-expansion').innerHTML = '点击收起'
        } else {
            dom('.consult-table').style.height = 0
            dom('.consult .consult-expansion').innerHTML = '点击展开'
        }
    })
})()