/**
 * 公共 js
 */

// ==================== 移动端导航相关js事件 start ====================
// 移动端菜单
let $mobNav = $('.mxw-mob-nav')
// 开启导航
$mobNav.find('.menu-btn').on('click', function() {
  $mobNav.find('.menus-box').addClass('active')
})
// 关闭导航
$mobNav.find('.mxw-close').on('click', function() {
  $mobNav.find('.menus-box').removeClass('active')
})
// 点击遮罩关闭导航
$mobNav.find('.menus-box').on('click', function() {
  $(this).removeClass('active')
})
// 阻止子元素事件冒泡
$mobNav.find('.menus').on('click', function(e) {
  e.stopPropagation();
})
// 点击菜单事件
$mobNav.find('ul>li').on('click', function() {
  // 记录当前点击的元素子菜单是否展开
  let isActive = $(this).is('.active')
  // 先将所有子菜单收起
  $mobNav.find('ul>li').removeClass('active')
  // 如果当前点击的元素没有展开，则展开，否则收起
  isActive ? '' : $(this).addClass('active')
})
// 遍历所有菜单，如果菜单下有二级菜单，取消一级菜单的默认事件（点击一级菜单不跳转，展开二级菜单）
$mobNav.find('ul>li').each(function() {
  if ($(this).children('ul').length > 0) {
    $(this).children('a').addClass('sub')
  }
})
// 取消默认事件
$mobNav.find('.sub').on('click', function(e) {
  e.preventDefault();
})
// ==================== 移动端导航相关js事件 end ====================

// ==================== 侧边栏相关js事件 start ====================
$('#aside-btn-menu').on('click', function() {
  $('.aside-box').addClass('active')
  $('aside .aside-itembox').addClass('active')
  // $('html').addClass('active')
  $('.aside-box').append('<div class="cloes"></div>')
})
$('.aside-box').delegate('.cloes', 'click', function() {
  $('.aside-box').removeClass('active')
  $('aside .aside-itembox').removeClass('active')
  // $('html').removeClass('active')
  $(this).remove();
})
$('aside .aside-nav > li>a').on('click', function() {
  $(this).parent('li').toggleClass('active')
})

// ==================== 侧边栏相关js事件 end ====================

// ==================== 置顶按钮 start ====================
$('#goto-top').click(function() {
  $("html,body").animate({
    scrollTop: 0
  }, 500);
})
$('#goto-top2').click(function() {
  $("html,body").animate({
    scrollTop: 0
  }, 500);
})
$(document).scroll(function() {
  let scroH = $(document).scrollTop();  //滚动高度
  // let viewH = $(window).height();  //可见高度
  // let contentH = $(document).height();  //内容高度

  if (scroH > 800) {  //距离顶部大于100px时
    $('#goto-top').addClass('active');
  }
  else if (scroH < 800) {
    $('#goto-top').removeClass('active');
  }
});
// ==================== 置顶按钮 end ====================

// ==================== 通用数字滚动 start ====================
// 判断是否有要滚动的数字，有的话给每个元素添加 data-scroll 属性
// 该属性用于判断元素是否滚动过
if ($('.scrolling-numbers').length > 0) {
  // jq设置属性如果是布尔值的话，需要使用prop不能使用attr
  $('.scrolling-numbers').prop('data-scroll', true)
}
// 窗口滚动事件
$(window).scroll(function() {
  // 当前滚动条距离顶部的距离
  let scrollTop = $(window).scrollTop()
  // 如果有要滚动的数字
  if ($('.scrolling-numbers').length > 0) {
    // 遍历滚动的数字元素
    $('.scrolling-numbers').each(function() {
      // 如果屏幕滚动到该元素可视范围，且该元素 data-scroll 属性为true(数字未滚动过)，则执行滚动数字动画
      if (scrollTop > ($(this).offset().top - 824) && $(this).prop('data-scroll')) {
        let num = parseInt($(this).text());
        $(this).animateNumber({ number: num }, 5000);
        // 数字只滚动一次，执行过滚动动画后，把元素 data-scroll 属性设置为 false
        $(this).prop('data-scroll', false)
      }
    })
  }
});
// ==================== 通用数字滚动 end ====================

// ==================== 基于Jq的锚点平滑过渡 start ====================
$('a[href*=#],area[href*=#]').click(function() {
  if ($(this).parents('#joinus').length === 0) {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = $target.offset().top - 84;
        $('html,body').animate({
          scrollTop: targetOffset
        },
          1000);
        return false;
      }
    }
  }
});
// ==================== 基于Jq的锚点平滑过渡 end ====================

/**
 * 通用切换方法，传入鼠标移入后要切换的swiper元素，和对应的index值，则可实现选项卡切换
 * @param {Number|Boolean} itemIndex index值
 * @param {Object} item 鼠标移入的元素（jq选择器对象）
 * @param {Object} swiper 要操作的swiper实例
 * @param {String} bind 事件名称，可选，默认鼠标移入（mouseover)
 * @param {String} el index元素
 */
function setSwiperCurrent (itemIndex, item, swiper, bind, el) {
  // swiper实例
  let $swiper = swiper
  // item实例
  let $elItem = item
  // 事件名称
  let $bind
  // index元素
  let $el = el
  if (typeof (bind) == 'undefined') {
    $bind = 'mouseover'
  } else {
    $bind = bind

  }
  if (itemIndex === false) {
    $elItem.on($bind, function() {
      let index = $el ? $(this).index($el) : $(this).index()
      setCurrent(index)
      $swiper.slideTo(index)
    })
  } else {
    setCurrent(itemIndex)
  }

  function setCurrent (index) {
    $elItem.removeClass('active');
    $elItem.eq(index).addClass('active');
  }
}

/**
 * 通用标签页初始化方法
 * 初始化标签页（如果新添加一个标签模块，都需要调用一下这个方法初始化）
 * @param {*} obj tab容器的类名
 * @param {*} event tab切换事件（默认是鼠标点击切换）
 * @param {*} swiper swiper的实例
 * @returns swiper实例
 */
function initTab (obj, event, swiper) {
  //  默认事件为click（鼠标点击切换）
  if (!arguments[1]) event = 'click';
  // 
  if (!$(obj).length) return undefined;
  // 
  $(obj + ' .mxw-tabs-item').eq(0).addClass('active')
  // 通用标签页
  let $ab_tabs_item = $(obj + ' .mxw-tabs-item')
  let $ab_tabs_wrap = $(obj + ' .mxw-tabs-wrap')
  if (swiper) {
    $ab_tabs_item.on(event, function() {
      let index = $(this).index();
      $ab_tabs_item.removeClass("active");
      $(this).addClass("active");
      swiper.slideTo(index);
      // 标签页自动居中
      autoCenter($ab_tabs_wrap, this);
    });
  } else {
    let $swiper = new Swiper(obj + ' .mxw-tabs-swiper', {
      clickable: true,
      spaceBetween: 10, // swiper-solid 间距
      autoHeight: true, //高度随内容变化
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      // allowTouchMove: false,// 禁止滑动
      preventClicks: false,//默认true
      on: {
        slideChangeTransitionStart: function() {
          $ab_tabs_item.removeClass("active");
          $ab_tabs_item.eq(this.activeIndex).addClass("active");
          // 标签页自动居中
          autoCenter(
            $ab_tabs_wrap,
            $ab_tabs_item.eq(this.activeIndex)
          );
        },
      },
    });
    // 点击标签页切换下方swiper
    $ab_tabs_item.on(event, function() {
      let index = $(this).index();
      $ab_tabs_item.removeClass("active");
      $(this).addClass("active");
      $swiper.slideTo(index);
      // 标签页自动居中
      autoCenter($ab_tabs_wrap, this);
    });
    return $swiper
  }
}

/**
* 标签页自动居中
* @param {*} obj 
* @param {*} that 
*/
function autoCenter (obj, that) {
  let $itembox = obj;
  // 思路：当前滚动条滚动的距离+（当前点击的标签页距离容器左边的距离-容器宽度的一半）+标签页的宽度的一半。
  // 1.获取当前滚动条滚动的距离
  var $scroll = $itembox.scrollLeft();
  // 2.获取当前点击的元素距离容器左边的距离
  var $itemLeft = $(that).position().left;
  // 3.获取容器的宽度
  var $itemboxWidth = $itembox.width();
  // 4.计算移动的距离
  var $moveSize =
    $scroll +
    ($itemLeft - $itemboxWidth / 2) +
    $(that).outerWidth(true) / 2;
  // 5.设置滚动条滚动距离
  $itembox.stop().animate({ scrollLeft: $moveSize }, { duration: 300 });
}



$(function() {

  $(".list_link").hover(function() {
    $(this).addClass("hover");
  },
    function() {
      $(this).removeClass("hover");
    });

  $('.mxw-about video').each(function() {
    $('.mxw-about video').on('click', function() {
      if (this.paused) { this.play(); } else { this.pause(); }
    })
  })

  // 首页 - 轮播图
  if ($('.banner-swiper').length > 0) {
    var banner = new Swiper(".banner-swiper", {
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      loop: true,
      speed: 500,
      watchSlidesProgress: true,
      watchSlidesVisibility: true,
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      preventClicks: true,//默认true
      pagination: {
        el: '.mxw-banner .swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.mxw-banner .swiper-button-next',
        prevEl: '.mxw-banner .swiper-button-prev',
      },
    });
  }

  // 首页 - 产品中心
  if ($('.mxw-product').length > 0) {
    $('.mxw-product .pro_swp').each(function() {
      initTab('.product-tabs', 'mouseover')
      let index = $(this).index()
      $(this).addClass('swiper-slide' + index)
      var products = new Swiper(".mxw-product .swiper-slide" + index + " .mxw-con-swiper", {
        speed: 500,
        autoplay:false,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        preventClicks: true,//默认true
        slidesPerView: 5,
        slidesPerColumn: 2,
        slidesPerColumnFill: 'row',
        spaceBetween: 32,
        navigation: {
          nextEl: '.mxw-product .swiper-slide' + index + ' .mxw-swiper-next',
          prevEl: '.mxw-product .swiper-slide' + index + ' .mxw-swiper-prev',
        },
        pagination: {
          el: '.mxw-product .swiper-pagination',
          clickable: true,
        },
        breakpoints: {
          640: {
            slidesPerView: 2,
            spaceBetween: 10,
          },
          320: {
            slidesPerView: 1,
          }
        }
      });
    })
  }

  // 首页 - 工程案例
  if ($('.mxw-cases .cases-swiper').length > 0) {
    var cases = new Swiper(".cases-swiper", {
      autoplay: {
        delay: 5000,//5秒切换一次
        pauseOnMouseEnter: true,
        disableOnInteraction: false,
      },
      speed: 500,
      autoHeight: true,
      preventClicks: false,//默认true
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      spaceBetween: 14,
      slidesPerView: 4,
      pagination: {
        el: '.mxw-cases .swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 10,
        },
        320: {
          slidesPerView: 1,
        }
      }
    });
  }

  // 首页 - 关于我们 - 证书
  if ($('.cooperation-swiper').length > 0) {
    var cooperation = new Swiper(".cooperation-swiper", {
      speed: 500,
      slidesPerView: 6,
      spaceBetween: 0,
      watchSlidesProgress: true,
      watchSlidesVisibility: true,
      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
      preventClicks: false,//默认true
      navigation: {
        nextEl: '.mxw-cooperation .swiper-button-next',
        prevEl: '.mxw-cooperation .swiper-button-prev',
      },
      breakpoints: {
        640: {
          slidesPerView: 3,
          spaceBetween: 10,
        },
        320: {
          slidesPerView: 2,
        }
      }
    });
  }

  // 首页 - 新闻资讯
  if ($('.mxw-news').length > 0) {
    initTab('.news-tabs', 'mouseover')
  }

  /*PC左侧二级分类右侧弹出*/
  $(function() {
    $("#pro_type2 ul li").hover(
      function() { $(this).addClass("current"); },
      function() { $(this).removeClass("current") })
  })


  /*PC左侧二级分类下拉*/
  $(function() {
    $("#pro_type>ul>li .more").click(function() {
      if ($(this).parent().find(".subclass").is(':hidden')) {
        $(this).parent().addClass("current");
        //$("#pro_type>ul>li .more").html("&#xe639;");
        $(this).html("&#xe61d;");
        $(this).parent().find(".subclass").show();
      } else {
        $(this).parent().find(".subclass").hide();
        //$("#pro_type>ul>li .more").html("&#xe668;");
        $(this).parent().removeClass("current");
        $(this).html("&#xe61c;");
      }

    })
  })

  // 详情页面 相关产品滚动特效
  if($(".relate-product-slick").length != 0) {
    $(".relate-product-slick").owlCarousel({
        margin: 14,
        dots:false,
        autoplay: true,
        responsive:{
            0:{
                items:2
            },
            600:{
                items:3
            },
            1000:{
                items: 4
            }
        }
    });
}

});