// 商品大图轮播
let goodsImgSwiper;
// 商品缩略图切换
let imgListSwiper;
// 产品参数下拉框
let selectInput = document.querySelectorAll(".select-input")
let selectionList = document.querySelectorAll(".select-list")
// 商品购买数量加减
let plusBtn = document.querySelector(".plus-btn")
let minusBtn = document.querySelector(".minus-btn")
let numberInput = document.querySelector(".number-input")

// 商品缩略图切换
imgListSwiper = new Swiper(".img-list-swiper", {
    spaceBetween: 10,
    slidesPerView: 3,
    freeMode: true,
    watchSlidesProgress: true,
});

// 商品大图轮播
goodsImgSwiper = new Swiper(".goods-img-swiper", {
    spaceBetween: 10,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    thumbs: {
        swiper: imgListSwiper,
    },
});

// 产品参数下拉框交互
function selectFun() {
    for (let i = 0, j = selectInput.length; i < j; i++) {
        selectInput[i].onfocus = function () {
            for (let i = 0; i < selectInput.length; i++) {
                selectInput[i].previousElementSibling.style.display = "none"
            }
            this.previousElementSibling.style.display = "block"
            let selectionList = this.previousElementSibling.querySelectorAll("li")
            for (let i = 0, j = selectionList.length; i < j; i++) {
                selectionList[i].onclick = function () {
                    for (let i = 0; i < selectionList.length; i++) {
                        selectionList[i].classList.remove("select-active")
                    }
                    this.classList.add("select-active")
                    this.parentNode.nextElementSibling.value = this.innerHTML
                    this.parentNode.nextElementSibling.nextElementSibling.innerHTML = "&#xe903;"
                    this.parentNode.nextElementSibling.nextElementSibling.style.fontSize = "1.2rem"
                    let delBtn = this.parentNode.nextElementSibling.nextElementSibling
                    delBtn.onclick = function () {
                        delBtn.previousElementSibling.value = ""
                        delBtn.innerHTML = "&#xe608;"
                        delBtn.style.fontSize = "1.8rem"
                        document.querySelector(".product-model div").innerHTML = "--"
                        document.querySelector(".product-model div").style.fontSize = "2rem"
                        document.querySelector(".product-model button").style.display = "none"
                    }
                    let parentDiv = this.parentNode.parentNode.parentNode.parentNode
                    if (parentDiv.getAttribute('class') === "product-selection") {
                        document.querySelector(".product-model div").innerHTML = this.innerHTML
                        document.querySelector(".product-model div").style.fontSize = "1.4rem"
                        document.querySelector(".product-model button").style.display = "block"
                    }
                    this.parentNode.style.display = "none"
                    this.parentNode.nextElementSibling.blur()
                }
            }
        }
        selectInput[i].onblur = function () {
            this.previousElementSibling.style.display = "none"
        }
    }
}

// 点击下拉框内容，input不会失去焦点
for (let i = 0, j = selectionList.length; i < j; i++) {
    selectionList[i].addEventListener("mousedown", (e) => {
        e.preventDefault()
    })
}

// 商品购买数量加减
plusBtn.onclick = function () {
    let productNum = parseInt(numberInput.value) + 1
    if (productNum === 0) {
        return false
    }
    numberInput.value = productNum
}
minusBtn.onclick = function () {
    let productNum = parseInt(numberInput.value) - 1
    if (productNum === 0) {
        return false
    }
    numberInput.value = productNum
}

// 收藏
document.querySelector(".collection").onclick=function (){
    if (this.classList.contains("collection-active")){
        this.classList.remove("collection-active")
    }else {
        this.classList.add("collection-active")
    }
}

// 页面加载时执行
window.onload = function () {
    selectFun()
}