$(function () {
  //加载动画
  if (__M.cssanimations) {
      new KYAnimate().init();
  } else {
      $('.ky'), css("visibility", "visible");
  }
  $('.headerNav').hover(
      function () {
          let this_ = $(this);
          this_.children().eq(0).addClass("header_nav_red");
          this_.children('.menu').stop().slideDown(500);
      },
      function () {
          let this_ = $(this);
          this_.children().eq(0).removeClass("header_nav_red");
          // console.log($(this).index());
          this_.children('.menu').stop().hide();
      }
  )
    $(".menu .box-right .list .item").hover(
        function () {
            var index = $(this).index();
            $(".menu .box-right .list .item-bg").css({
                'top': index * 0.525 + 'rem'
            });
        },
        function () {
            $(".menu .box-right .list .item-bg").css({
                'top': '-0.525rem'
            });
        }
    );
    $('.language-box').hover(
      function () {
          let $this = $(this);
          $this.children('.down-box').stop(true, false).slideDown(500);
      },
      function () {
          let $this = $(this);
          $this.children('.down-box').stop(true, false).slideUp(200);
      }
  )
  $('.links .text-show').click(function () {
    $('.links .link').stop(false, true).slideToggle(388);
})
$__W.click(function (e) {
    $this = $(e.target);
    if (!$(".links .link").is(":hidden") && !$this.hasClass("text-show") && !$this.hasClass("text") && !$this.hasClass("icon")) {
        $(".links .link").stop(false, true).hide(388, "easeInQuart");
    }
});
  //pcheader搜索框
  $('.glass').on('click', function () {
      $('.search_box').slideDown(500);
  })
  $('.close').on('click', function () {
      $('.search_box').slideUp(500);
  })
  //m_herader样式
  var flag = false;
  $('#menus').on('click', function () {
      if (!flag) {
          $('#menus').removeClass("fa-bars").addClass("fa-times");
          $('.mhead_li').slideDown()
          flag = true;
      } else {
          $('#menus').removeClass("fa-times").addClass("fa-bars");
          $('.mhead_li').slideUp()
          flag = false;
      }
  })
  $('.li_left li').on('click', function () {
      let index = $(this).index();
      $(this).addClass('li_active').siblings().removeClass('li_active');
      $('.li_right>ul').eq(index).addClass("ul_active").siblings().removeClass("ul_active")
  })
  //手机搜索框
  $('#search').on('click', function () {
      $('.m_search').slideDown(200);
  })
  $('.m_close').on('click', function () {
      $('.m_search').slideUp(200);
  })
  //m_footer
  $('.foot').on('click', function () {
      let this_ = $(this);
      // console.log(this_.siblings('ul'));
      this_.children('ul').slideToggle();
      this_.find('i').toggleClass("i_rotate");
  })


  $(window).scroll(function () {
    var bei = $('.list-banner');
    var nav = $('.detail-nav');
    var header = $('.header_p').outerHeight();
    var Mhreader = $('.header_m').outerHeight();
    var Shreader = $('.serve').outerHeight();
    var PTop = $('.product').offset().top;
    var P1Top = $('.photo').offset().top;
    var CTop = $('.case').offset().top;
    var Nheight = nav.outerHeight();
    var beiPos = bei.outerHeight();
    var Top = $(document).scrollTop();
    var li = $('.detail-nav .left ul li');
    if(Top > PTop - Nheight - header){
        li.eq(0).addClass('active');
        li.eq(0).siblings().removeClass('active');
    }
    if(Top > P1Top - Nheight - header){
        li.eq(1).addClass('active');
        li.eq(1).siblings().removeClass('active')
    }
    if(Top > CTop - Nheight - header){
        li.eq(2).addClass('active');
        li.eq(2).siblings().removeClass('active')
    }
    if($(window).width() > 1004){
        if (Top >= beiPos + Shreader) {
            if (nav.css("position") == "relative") {
              nav.css({
                'position':'fixed',
                'top':header - 1
              });
              if(!nav.hasClass('top')){
                  nav.addClass('top')
              }
              $('.bei').show();
              $('.bei').addClass('top')
            }
          }else{
            if (nav.css("position") == "fixed") {
              nav.css({
                'position':'relative',
                'top':'0'
              });
              if(nav.hasClass('top')){
                  nav.removeClass('top')
              }
              $('.bei').hide();
              $('.bei').removeClass('top')
            }
          }
    }else{
        if (Top >= beiPos + Shreader) {
            if (nav.css("position") == "relative") {
              nav.css({
                'position':'fixed',
                'top':Mhreader - 1
              });
              if(!nav.hasClass('top')){
                  nav.addClass('top')
              }
              $('.bei').show();
            }
          }else{
            if (nav.css("position") == "fixed") {
              nav.css({
                'position':'relative',
                'top':'0'
              });
              if(nav.hasClass('top')){
                  nav.removeClass('top')
              }
              $('.bei').hide();
            }
          }
    }
  })


  $(".list .item .top").click(function(){
    $this = $(this);
    $this.parent('.item').children('.bottom').stop(true,true).slideToggle();
    $this.find('.open').toggleClass('active');
    $this.find('.close').toggleClass('active');
  })
    if ($(window).width()>1004) {
        $('.detail-nav .left ul li').eq(0).click(function(){
            var Hheight = $('.header_p').outerHeight();
            var Nheight = $('.detail-nav').outerHeight();
            var target_top = $("#product").offset().top - Hheight - Nheight - 30;
            $("html,body").animate({scrollTop: target_top}, 1000);
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
        })
        $('.detail-nav .left ul li').eq(1).click(function(){
            var Hheight = $('.header_p').outerHeight();
            var Nheight = $('.detail-nav').outerHeight();
            var target_top = $("#photo").offset().top - Hheight - Nheight;
            $("html,body").animate({scrollTop: target_top}, 1000);
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
        })
        $('.detail-nav .left ul li').eq(2).click(function(){
            var Hheight = $('.header_p').outerHeight();
            var Nheight = $('.detail-nav').outerHeight();
            var target_top = $("#case").offset().top - Hheight - Nheight;
            $("html,body").animate({scrollTop: target_top}, 1000);
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
        })
    } else {
        $('.detail-nav .left ul li').eq(0).click(function(){
            var Hheight = $('.header_m').outerHeight();
            var Nheight = $('.detail-nav').outerHeight();
            var target_top = $("#product").offset().top - Hheight - Nheight - 10;
            $("html,body").animate({scrollTop: target_top}, 1000);
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
        })
        $('.detail-nav .left ul li').eq(1).click(function(){
            var Hheight = $('.header_m').outerHeight();
            var Nheight = $('.detail-nav').outerHeight();
            var target_top = $("#photo").offset().top - Hheight - Nheight + 2;
            $("html,body").animate({scrollTop: target_top}, 1000);
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
        })
        $('.detail-nav .left ul li').eq(2).click(function(){
            var Hheight = $('.header_m').outerHeight();
            var Nheight = $('.detail-nav').outerHeight();
            var target_top = $("#case").offset().top - Hheight - Nheight + 2;
            $("html,body").animate({scrollTop: target_top}, 1000);
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
        })
    }




   var mySwiper1 = new Swiper ('.swiper1', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    slidesPerView : 2,
    spaceBetween : '3.009%',
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination1',
      type : 'progressbar',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next1',
      prevEl: '.swiper-button-prev1',
    },
    breakpointsBase: 'container',
    breakpoints: {
        320: { //当屏幕宽度大于等于320
          slidesPerView: 1,
          spaceBetween: 10
        },
        1004: { //当屏幕宽度大于等于1280
          slidesPerView: 2,
          spaceBetween : '3.009%',
        },
      }
  })  
  var mySwiper2 = new Swiper ('.swiper2', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    speed:1000,
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next2',
      prevEl: '.swiper-button-prev2',
    },
  })
  $('.photo .content .swiper1 .swiper-slide').on("click",function () {
        $('.popups1').fadeIn(300);
        Top = $(window).scrollTop();
        var num = $(this).data('num');
        mySwiper2.slideTo(num,0,true);
        $('body').css("top", -Top + "px");
        $('body').addClass('fixed');
    })
    $('body').on("click",'.popups1 .close',function () {
        $('.popups1').fadeOut(300);
        $('body').removeClass('fixed');
        $('body').removeAttr("style");
        $(window).scrollTop(Top);
    })

    var mySwiper3 = new Swiper ('.swiper3', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        speed:1000,
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next3',
            prevEl: '.swiper-button-prev3',
        },
        on:{
            init: function(){
              swiperAnimateCache(this); //隐藏动画元素 
              swiperAnimate(this); //初始化完成开始动画
            }, 
            slideChangeTransitionEnd: function(){ 
              swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
              //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
            } 
        }
    })  
})