// banner轮播
let bannerSwiper;
// 最新资讯滚动
let newsListSwiper;
// 导航分类
let navListProps = document.querySelectorAll(".hover-wrapper>ul>li")
// 导航分类子菜单
let subMenuList = document.querySelectorAll(".submenu-content-wrapper>div")
// 商品模块分类
let productList = document.querySelectorAll(".mall-product-list")
let productAllActive = document.querySelectorAll(".product-active")

// banner轮播
bannerSwiper = new Swiper('.banner-swiper', {
    autoplay: true,//可选选项，自动滑动
    loop: true,
    allowTouchMove: false,
    wrapperClass: "banner-swiper-wrapper",
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        bulletClass: 'banner-bullet',//需设置.my-bullet样式
        bulletActiveClass: 'banner-bullet-active',
    }
})

// 最新资讯滚动
newsListSwiper = new Swiper('.news-list-swiper', {
    autoplay: true,//可选选项，自动滑动
    loop: true,
    allowTouchMove: false,
    wrapperClass: "news-list-swiper-wrapper",
    direction: 'vertical',
    delay: 800,//1秒切换一次
})

// 导航分类交互
for (let i = 0, j = navListProps.length; i < j; i++) {
    navListProps[i].onmouseenter = function () {
        let index = this.getAttribute('data-index');
        for (let i = 0; i < subMenuList.length; i++) {
            subMenuList[i].style.display = 'none';
        }
        subMenuList[index].style.display = "block"
        document.querySelector(".submenu-content-wrapper").style.display = "block"
        document.querySelector(".hover-wrapper").onmouseleave = function () {
            subMenuList[index].style.display = "none"
            document.querySelector(".submenu-content-wrapper").style.display = "none"
        }
    }
}

// 计算商品模块高度
function productHeight() {
    for (let i = 0, j = productList.length; i < j; i++) {
        let ulHeight = productList[i].querySelector(".product-active").nextElementSibling.clientHeight
        let titleHeight = productList[i].querySelector(".mall-product-list h3").clientHeight
        let listHeight = productList[i].querySelector(".product-list-wrapper").clientHeight
        productList[i].style.height = ulHeight / 10 + titleHeight / 10 + listHeight / 10 + 8 + 'rem'
    }
}

//  商品模块分类切换交互
for (let i = 0, j = productList.length; i < j; i++) {
    let productClassification = productList[i].querySelectorAll(".mall-product-list .classification-title")
    for (let i = 0, j = productClassification.length; i < j; i++) {
        productClassification[i].onclick = function () {
            for (let i = 0; i < productClassification.length; i++) {
                productClassification[i].classList.remove("product-active")
                productClassification[i].nextElementSibling.style.display = "none"
            }
            this.classList.add("product-active")
            this.nextElementSibling.style.display = "flex"
            productHeight()
        }
    }
}

// 页面加载时执行
window.onload = function () {
    for (let i = 0, j = productAllActive.length; i < j; i++) {
        productAllActive[i].nextElementSibling.style.display = "flex"
    }
    productHeight()
}