$(function(){
    $('.product-list-ul').eq(0).css({display:'grid'})
    $('.classify-title').click(function(){
        $(this).addClass('classify-title-active')
        $(this).siblings().removeClass('classify-title-active')
        $('.product-list-ul').eq($(this).index()).css({display:'grid'})
        $('.product-list-ul').eq($(this).index()).siblings().css({display:'none'})
    })

    // productSwiper
    const productThumbsSwiper = new Swiper(".productThumbsSwiper", {
        spaceBetween: 10,
        slidesPerView: 3,
        freeMode: true,
        watchSlidesProgress: true,
    });
    const productSwiper = new Swiper(".productSwiper", {
        navigation: {
            nextEl: ".productSwiper-next",
            prevEl: ".productSwiper-pre",
        },
        thumbs: {
            swiper: productThumbsSwiper,
        }
    });
    $('.productSwiper-btn').mouseenter(function(){
        $(this).find('img').eq(0).hide()
        $(this).find('img').eq(1).show()
    })
    $('.productSwiper-btn').mouseleave(function(){
        $(this).find('img').eq(0).show()
        $(this).find('img').eq(1).hide()
    })

    $('.menu-first .menu-first-title').click(function(){
        if($(this).closest('.menu-first').hasClass('active')) {
            $(this).parent().removeClass('active')
            $(this).siblings('.menu-second-box').slideUp()
        } else {
            removeAcitve(1)
            $(this).closest('.menu-first').addClass('active')
            $(this).siblings('.menu-second-box').slideDown()
        }
    })
    $('.menu-second-product ').click(function(){
        removeAcitve(2)
        if($(this).hasClass('active')){
            $(this).removeClass('active')
            $(this).find('.menu-third-box').slideUp()
        } else {
            $(this).addClass('active')
            $(this).find('.menu-third-box').slideDown()
        }
    })
    $('.menu-third').click(function(event){
        event.stopPropagation();
        removeAcitve(3)
        $(this).parent().css({display:'block'})
        $(this).addClass('active')
    })
    function removeAcitve(classify) {
        $('.menu-box .menu-first').each(function(){
            if(classify == 1) {
                $(this).removeClass('active')
                $(this).siblings().find('.menu-second-box').slideUp()
            }
            $(this).find('.menu-second-box .menu-second-product').each(function(){
                if(classify == 2) {
                    $(this).removeClass('active')
                    $(this).siblings().find('.menu-third-box').slideUp()
                }
                $(this).find('.menu-third-box').each(function(){
                    $(this).find('.menu-third').each(function(){
                        $(this).removeClass('active')
                    })
                })
            })
        })
    }

    // 初始化
    $('.menu-second-product').each(function (index) {
        if($(this).find('.menu-third-box').length == 0){
            $(this).find('.menu-second-title img').css({display:'none'})
        }
    })
    function initProduct() {
        $('.menu-box .menu-first').each(function (index) {
            if($('.menu-box .menu-first').eq(index).hasClass('active')) {
                $('.menu-box .menu-first').eq(index).find('.menu-second-box').slideDown()
                return false
            } else {
                $('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').each(function(index2) {
                    if($('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').eq(index2).hasClass('active')){
                        $('.menu-box .menu-first').eq(index).addClass('active')
                        $('.menu-box .menu-first').eq(index).find('.menu-second-box').slideDown()
                        return false
                    } else {
                        $('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').eq(index2).find('.menu-third-box .menu-third').each(function(index3){
                            if($('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').eq(index2).find('.menu-third-box .menu-third').eq(index3).hasClass('active')){
                                $('.menu-box .menu-first').eq(index).addClass('active')
                                $('.menu-box .menu-first').eq(index).find('.menu-second-box').slideDown()

                                $('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').eq(index2).addClass('active')
                                $('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').eq(index2).find('.menu-third-box').slideDown()

                                $('.menu-box .menu-first').eq(index).find('.menu-second-box .menu-second-product').eq(index2).find('.menu-second-title').css({color:'#2361ae'})
                                $('.menu-box .menu-first').eq(index).find('.menu-second-box  .menu-second-product').eq(index2).find('.menu-second-title .menu-top-show').css({display:'none'})
                                $('.menu-box .menu-first').eq(index).find('.menu-second-box  .menu-second-product').eq(index2).find('.menu-second-title .menu-top').css({display:'block'})
                            }
                        })
                    }
                })
            }
        });
    }
    initProduct()
    let language = location.search.split('=')
    let lang = language[location.search.split('=').length-1]
    let hasEn = location.pathname.split('/').includes('en')
    let material = lang=='en'||hasEn? 'Material':'材质'
    let usage = lang=='en'||hasEn? 'Usage process':'使用工艺'
    $('.menuClick').click(function(){
        total = 0
        currentPages = 1 //当前页数
        tid = $(this).attr('data-id')
        const json = {
            page:currentPages, // 页码
            pagesize:pageData, // 每页大小
            typeid:tid,
            channel:2
          }
        $.ajax({
            url:"/index.php?m=api&c=Ajax&a=get_products&_ajax=1",
            contentType: "application/json",
            data:JSON.stringify(json),
            type:"POST",
            success:function (data) {
              let strArr = [] // 更新列表数据
              const list = data.data.list
              for(let i=0; i < list.length; i++) {
                strArr.push(`
                    <li>
                        <div class="product-list-img">
                        <img src="${list[i]['litpic']}" class="" alt="${list[i]['title']}">
                        </div>
                        <div class="product-list-left">
                        <p class="product-list-title">${list[i]['title']}</p>
                        <p class="product-list-title-secondary">
                            <span>${material}：</span>
                            <span>${list[i]['material']}</span>
                        </p>
                        <p class="product-list-title-secondary">
                            <span>${usage}：</span>
                            <span>${list[i]['technology']}</span>
                        </p>
                        </div>
                    </li>
                `)
              }
              total = data.data.count
              $('.product-list-ul').empty();
              $('.product-content-description').text(data.data.menuinfo.seo_description);
              $('.product-list-ul').append(strArr);
              initTitle()
              total = data.data.count
              $("#pager").zPager({
                totalData: total,
                // htmlBox: $('#wraper'),
                btnShow: true,
                ajaxSetData: false,
                dataRender: function(data) {
                  console.log(data + '---data-2');
                },
              });
			  let hasEn = location.pathname.split('/').includes('en')
              let firstPage = lang=='en'||hasEn? 'Home':'首页'
              let endPage = lang=='en'||hasEn? 'Last':'末页'
              let prePage = lang=='en'||hasEn? 'Previous':'上一页'
              let nextPage = lang=='en'||hasEn? 'Next':'下一页'
              $('.pg-first').text(`${firstPage}`)
              $('.pg-prev').text(`${prePage}`)
              $('.pg-next').text(`${nextPage}`)
              $('.pg-last').text(`${endPage}`)
            },
            dataType : "json"
        })
    })
})