var nav = {
    firIdx: 0,
    subIdx: 0,
    firNavEle: null,
    secNavEle: null,
    picsEle: null,
    init: function (data) {
        this.data = data;
        this.initEle()
        this._setFirNavHtml()
        this.bindEvents()
    },
    initEle: function() {
        this.firNavEle = $('#qlserviceList1')
        this.secNavEle = $('#qlserviceList2')
        this.picsEle = $('#qlserviceList3')
    },
    bindEvents: function () {
        var self = this;
        this.firNavEle.on('click', '.qlserviceList1Mode1', function () {
            var $this = $(this)
            self.firIdx = $this.index()
            $this.addClass('on').siblings('.qlserviceList1Mode1').removeClass('on');
            self._setSubNavHtml(self.firIdx)
        })
        this.secNavEle.on('click', '.qlserviceList2Mode1', function () {
            var $this = $(this)
            var idx = $this.index()
            self.subIdx = idx
            $this.addClass('on').siblings('.qlserviceList2Mode1').removeClass('on');
            self._setPics(self.data[self.firIdx].children[idx].ar_list)
        })
    },
    _setFirNavHtml: function () {
        this.firIdx = 0
        this.firNavEle.html(this.data.map(function (v, k) {
            return '<div class="qlserviceList1Mode1 ' + (k === 0 ? 'on' : '') + '">' + v.name + '</div>'
        }))
        this._setSubNavHtml(this.firIdx)
    },
    _setSubNavHtml: function (idx) {
        this.subIdx = 0
        var children = this.data[idx].children
        this.secNavEle.html(children.map(function (v, k) {
            return '<div class="qlserviceList2Mode1 ' + (k === 0 ? 'on' : '') + '">' + v.name + '</div>'
        }))
        this._setPics(children[this.subIdx].ar_list)
    },
    _setPics: function (pics) {
        this.picsEle.html(`<div class="row m10">
  <div class="col-xs-12 col-sm-4 col-md-4col-lg-4">
    <div style="background: url(${pics[0].pic}) no-repeat center center;" id="service1" class="qlservice">
    </div>
    <div style="background: url(${pics[1].pic}) no-repeat center center;" id="service2" class="qlservice">
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div style="background: url(${pics[2].pic}) no-repeat center center;" id="service3" class="qlservice">
    </div>
    <div style="background: url(${pics[3].pic}) no-repeat center center;" id="service4" class="qlservice">
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div style="background: url(${pics[4].pic}) no-repeat center center;" id="service5" class="qlservice">
    </div>
    <div style="background: url(${pics[5].pic}) no-repeat center center;" id="service6" class="qlservice">
    </div>
  </div>
</div>`)
    }
}
$(function(){
  // var indexImg = ''
	var swiper = new Swiper('.swiper-container1', {
      spaceBetween: 0,
      centeredSlides: true,
      effect: "fade",
      loop : true,
      autoplay: {
        delay: 6000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
  });
  
  var swiper3 = new Swiper('.swiper-video', {
        slidesPerView: 6,
        // loop : true,
        autoplay: false,
        paginationClickable: true,
        spaceBetween: 35,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            //当宽度小于等于480
            767: {
                slidesPerView: 2.5,
                spaceBetween: 10
            },
            //当宽度小于等于640
            1023: {
                slidesPerView:3.5,
                spaceBetween: 15
            }
        }
  });

  var swiper2 = new Swiper('.swiper-container2', {
        slidesPerView: 3.3,
        // loop : true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        paginationClickable: true,
        spaceBetween: 25,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            //当宽度小于等于480
            767: {
                slidesPerView: 1.1,
                spaceBetween: 10
            },
            //当宽度小于等于640
            1023: {
                slidesPerView:3,
                spaceBetween: 15
            }
        }
  });

  var swiper4 = new Swiper('.swiper-container4', {
        slidesPerView: 6,
        // loop : true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        paginationClickable: true,
        spaceBetween: 25,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            //当宽度小于等于480
            767: {
                slidesPerView:2.5,
                spaceBetween: 10
            },
            //当宽度小于等于640
            1023: {
                slidesPerView:4,
                spaceBetween: 15
            }
        }
  });

  var swiper5 = new Swiper('.swiper-container5', {
        slidesPerView: 4,
        // loop : true,
        autoplay: false,
        paginationClickable: true,
        spaceBetween: 25,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            //当宽度小于等于480
            767: {
                slidesPerView: 1.5,
                spaceBetween: 10
            },
            //当宽度小于等于640
            1023: {
                slidesPerView:3,
                spaceBetween: 15
            }
        }
  });

  var swiper6 = new Swiper('.swiper-container6', {
        slidesPerView: 4,
        // loop : true,
        paginationClickable: true,
        spaceBetween: 25,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            //当宽度小于等于480
            767: {
                slidesPerView: 2.5,
                spaceBetween: 10
            },
            //当宽度小于等于640
            1023: {
                slidesPerView:3,
                spaceBetween: 15
            }
        }
  });

  /*首页视频*/
  $(".banner-video-list li").click(function(){
    var src=$(this).attr("data-video");
    $("#videoQThome").attr("src",src);
    $("#videoQThome").trigger('play');
    $(".video-layer-box").show();
  });
  $(".closeQT").click(function(){
    $("#videoQThome").trigger('pause');
    $(".video-layer-box").hide();
  });
  
  $(".id-about-video").click(function(){
      $(this).hide();
    var src=$(this).attr("data-video");
    $(this).siblings("video").attr("src",src);
    $(this).siblings("video").show();
    $(this).siblings("video").trigger('play');
  });
  // $( '[rel=fancybox-thumb]').fancybox({
  //           showCloseButton:'true',
  //           showNavArrows:'true',
  // });
   
  if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
  }
  
  $(".suspension-qq, .suspension-tel, .suspension-email,.suspension-code").hover(function () {
    $(this).children(".pop-detail").fadeIn(300);
  }, function () {
    $(this).children(".pop-detail").fadeOut(100);
  });

//  $(document).bind("contextmenu",function(e){
//         return false;
//   });
  
//  $('body').bind("selectstart",function(){
// 	return false;
// });
  var $toTop = $("#toTop");
  $toTop.hide();
  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      if ($toTop.is(":hidden")) {
        $toTop.stop().fadeIn(1000);
      }
    }
    else {
      if ($toTop.is(":visible")) {
        $toTop.stop().fadeOut(1000);
      }
    }
  });
   
  $toTop.click(function () {
    $('body,html').stop().animate({scrollTop: 0}, 300);
    return false;
  });

  $(".subject-item h3").click(function(){
    $(this).siblings(".subject-item-info").toggle();
    $(this).find("span").toggleClass("on");
  });

  $(".id-shcol li").click(function(){
    $(this).addClass("on").siblings("li").removeClass("on");
    var src=$(this).find(".pic").attr("src")
    var name=$(this).find(".name").text();
    var text=$(this).attr("data-text");
    var enname=$(this).attr("data-enname");
    var people=$(this).attr("data-people");
    var defaul=$(this).attr("data-defaul");
    var type=$(this).attr("data-type");
    
    $(".school-info h3").text(name);
    $(".school-info h5").text(enname);
    $(".school-info .type").text(type);
    $(".school-info .number").text(defaul);
    $(".school-info .people").text(people);
    $(".school-info .text").text(text);
    $(".school-info img").attr("src",src);
  })

  $(".menu-btn").click(function(){
    $(".nav").toggle();
  });

  $(".faq-list li h3").click(function(){
     $(this).siblings(".faq-text").toggle();
    $(this).toggleClass("on");
  });
  
  $(".video,.video-btn").click(function(){
    $(".layer div video").show();
    $(".layer").css("visibility","visible");
  });
  
  $(".sv-btn,.big-sevice-pic").click(function(){
    $(".sevice-video").show();
    $(".sevice-video").trigger('play');
    $(".big-sevice-pic").hide();
  });

  $(".close-btn").click(function(){
    $(".layer").css("visibility","hidden");
  }); 
  
  $(".services-list li").hover(function(){
      $(this).addClass('on').siblings('li').removeClass('on');
  });
  
//   $(".qlserviceList1Mode1").click(function(){
//       $(this).addClass('on').siblings('.qlserviceList1Mode1').removeClass('on');
//   });
  
  
  
  togglePic($(".sevice-pic li"),$(".big-sevice-pic"));



function togglePic(pics,togglePic){//参数：要的切换图片集，要切换的目标图片
    pics.bind("click",function() {
      $(".sevice-video").hide();
      $(".sevice-video").trigger('pause');
      $(".big-sevice-pic").show();
      var toggleImg = $(this).children('img')
      $(this).addClass('on').siblings('li').removeClass('on');
      togglePic.children('img')[0].src = toggleImg[0].src;
    }); 
}


});