const headerEl = document.querySelector("header");
const scrollToTop = document.querySelector(".scrollToTop");
const mobileHeaderWidth = document.documentElement.clientWidth;
// ************ 手机端
if (mobileHeaderWidth < 768) { 
  // 移动端 手机下滑 导航栏的显示与隐藏
  let previousTop=0;
  $(window).scroll(function () {
      let currentTop = $(window).scrollTop();
      if (currentTop < previousTop) {
        // $("#header2").show();
        $("#header2").css("display", "block");
        $(".mobile-nav-toggle").css("display", "block");
        // $(".mobile-nav-toggle").show();
        // 案例展示
        $("#caseShow #header2").css("background", "#fff");
        $("#caseShow .mobileLogo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
        $("#caseShow .mobile-nav-toggle i").css("color", "#333");
        // 联系我们
        $("#contactUs #header2").css("background", "#fff");
        $("#contactUs .mobileLogo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
        $("#contactUs .mobile-nav-toggle i").css("color", "#333");
        if (currentTop == 0) {
          // 案例展示
          $("#caseShow #header2").css("background", "none");
          $("#caseShow .mobileLogo").css("background", "url('./images/logo.png') no-repeat center/cover");
          $("#caseShow .mobile-nav-toggle i").css("color", "#fff");
          // 联系我们
          $("#contactUs #header2").css("background", "none");
          $("#contactUs .mobileLogo").css("background", "url('./images/logo.png') no-repeat center/cover");
          $("#contactUs .mobile-nav-toggle i").css("color", "#fff");
          // event.preventDefault();
          // $("header").css("position","relative")
          window.addEventListener('touchstart', function (e) { e.preventDefault(); });
          window.addEventListener('touchmove', function(e) {e.preventDefault(); });
        }
      } else {
        // $("#header2").hide();
        $("#header2").css("display", "none");
        $(".mobile-nav-toggle").css("display", "none");
        // $(".mobile-nav-toggle").hide();
      }
      previousTop = currentTop;
  })
} else {

}
// ************
//  监听窗口滑动事件
window.addEventListener("scroll", () => {
  let height = headerEl.getBoundingClientRect().height;    // 获取所占屏幕空间的矩形区域高度
  // 向下滑动距离超过800
  if (window.pageYOffset - height > 800) {
    if (!headerEl.classList.contains("sticky")) {    // 先判断是否有这个属性，有就不添加，没有就添加
      headerEl.classList.add("sticky");
    }
    // 导航栏样式改变 Logo黑色
    $("header .logo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
    // 文字改变颜色
    $("#cssmenu > ul > li > a").css("color", "#333");
    $(".topTel").css("color", "#333");
  } else {
    headerEl.classList.remove("sticky");
    // 导航栏样式改变 Logo白色
    $("header .logo").css("background", "url('./images/logo.png') no-repeat center/cover");
    $("#APFBody header .logo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
    $("#SVGBody header .logo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
    $("#capacitorBody header .logo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
    $("#highPressureSVGBody header .logo").css("background", "url('./images/logoDark.png') no-repeat center/cover");
    // 文字改变颜色
    $("#cssmenu > ul > li > a").css("color", "#fff");
    $(".topTel").css("color", "#fff");
    $("#capacitorBody .topTel").css("color", "#333");
    $("#highPressureSVGBody .topTel").css("color", "#333");
    $("#APFBody #cssmenu > ul > li > a").css("color", "#333");
    $("#SVGBody #cssmenu > ul > li > a").css("color", "#333");
    $("#capacitorBody #cssmenu > ul > li > a").css("color", "#333");
    $("#highPressureSVGBody #cssmenu > ul > li > a").css("color", "#333");
  }
  // 向下滑动超过2000像素 就显示
  // if (window.pageYOffset > 2000) {
  //   scrollToTop.style.display = "block";
  // } else {
  //   scrollToTop.style.display = "none";
  // }
})

const glide = new Glide(".glide");
// **********
const captionsEL = document.querySelectorAll(".slide-caption");
// 获取轮播执行前后 状态值
// glide.on(["mount.after", "run.after"], () => {
//   const caption = captionsEL[glide.index]; // 返回当前轮播的下标来获取captionsEL对应的标题
//   anime({
//     targets: caption.children,
//     opacity: [0, 1],
//     duration: 400, // 动画执行时间 执行函数-线性 
//     easing: "linear",
//     delay: anime.stagger(400, { start: 300 }),
//     translateY: [anime.stagger([40, 10]), 0]  // 从下方移动到上方
//   });
// });
// // 轮播前还原透明度为0 这样每次轮播时都有动画效果
// glide.on("run.before", () => {
//   document.querySelectorAll(".slide-caption > *").forEach(el => {
//     el.style.opacity = 0;
//   });
// });
// glide.mount();
// *********
// 成功案例 调用isotope.js 添加动画效果
// const isotope = new Isotope(".cases", {
//   layoutMode: "fitRows",    // 行模式布局，占满一行才到下一行
//   itemSelector: ".case-item"    // 指定每个案例的元素
// });
// // 获取筛选按钮 实例
// const filterBtns = document.querySelector(".filter-btns");
// // 给筛选按钮的容器设置监听事件
// filterBtns.addEventListener("click", e => {
//   let { target } = e;   // 获取target
//   const filterOption = target.getAttribute("data-filter");   // 获取点击的按钮筛选的类别
//   if (filterOption) {
//     // 把已经有了 active 属性按钮取消 把点中的按钮加上 active 属性  forEach 取消所有按钮属性
//     document
//       .querySelectorAll(".filter-btn.active")
//       .forEach(btn => btn.classList.remove("active"));
//     target.classList.add("active");
//     isotope.arrange({ filter: filterOption });    // 把 filterOption 传进去
//   }
// })
// 定义一个通用的配置项 
const staggeringOption = {
  // 延迟300毫秒出现 从下到上 有50像素的移动 动画执行500毫秒 动画函数
  delay: 300,
  distance: "50px",
  duration: 500,
  easing: "ease-in-out",
  origin: "bottom"
}
// 滑动时动画效果 引入配置项 把所有属性都拿出来 加上一个新的属性 
// 再返回一个新的对象--有6个属性（下一个对象延迟350毫秒出现）// 关于我们 服务流程
ScrollReveal().reveal(".feature", { ...staggeringOption, interval: 350 });
ScrollReveal().reveal(".service-item", { ...staggeringOption, interval: 350 });
// *******
const staggeringOptionLeft = {
  // 延迟300毫秒出现 从下到上 有50像素的移动 动画执行500毫秒 动画函数
  delay: 300,
  distance: "90px",
  duration: 500,
  easing: "ease-in-out",
  origin: "left"
}
ScrollReveal().reveal(".goLeft", { ...staggeringOptionLeft, interval: 350 });
// &&&&&&&&&&
const staggeringOptionRight = {
  // 延迟300毫秒出现 从下到上 有50像素的移动 动画执行500毫秒 动画函数
  delay: 300,
  distance: "90px",
  duration: 500,
  easing: "ease-in-out",
  origin: "right"
}
ScrollReveal().reveal(".goRight", { ...staggeringOptionRight, interval: 350 });
// 数据增长 设置背景视差效果 获取实例  把对象传进来 
const dataSectionEl = document.querySelector(".data-section");
ScrollReveal().reveal(".data-section", {
  // 对属性的内容进行动画 用函数把当前内容传进来 
  // 从0到内部定义好的数字 动画执行时间2秒 按1增长 越来越快的动画效果
  beforeReveal: () => {
    anime({
      targets: ".data-piece .num",
      innerHTML: el => {
        return [0, el.innerHTML];
      },
      duration: 2000,
      round: 1,
      easing: "easeInExpo"
    });
    dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom / 5}px)`;
  }
});
// 监听window滚动事件
window.addEventListener("scroll", () => {
  // 获取bottom和top 当前容器到浏览器底部和顶部的距离 来判断是否在可见范围内
  // const bottom = dataSectionEl.getBoundingClientRect().bottom;
  //const top = dataSectionEl.getBoundingClientRect().top;
  // 判断出现 X轴不动 移动Y轴 
  // if (bottom >= 0 && top <= window.innerHeight) {
  //   dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)`;
  // }
});
// 初始化scroll实例 传递选择器并对其进行监听 配置固定的导航 并向下滚动多80px
const scroll = new SmoothScroll('nav a[href*="#"], .scrollToTop a[href*="#"]', {
  header: "header",
  offset: 80
});
// 添加监听事件 当开始滚动时 全屏导航打开状态 就取消这个状态
document.addEventListener("scrollStart", () => {
  if (headerEl.classList.contains("open")) {
    headerEl.classList.remove("open");
  }
});
// 监听探索更多--关于我们 注册点击事件 利用上面初始化好的scroll 调用函数 把参数传递进来
const exploreBtnEls = document.querySelectorAll(".explore-btn");
exploreBtnEls.forEach(exploreBtnEl => {
  exploreBtnEl.addEventListener("click", () => {
    scroll.animateScroll(document.querySelector("#about-us"));
  });
});
// 折叠按钮 获取实例 添加点击事件
const burgerEl = document.querySelector(".burger");
burgerEl.addEventListener("click", () => {
  headerEl.classList.toggle("open");
  $("#cssmenu ul").css("display","block")
})

// 导航交互

$.fn.menumaker = function(options) {
    
    var cssmenu = $(this), settings = $.extend({
      title: "Menu",
      format: "dropdown",
      sticky: false
    }, options);

    return this.each(function() {
      cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
      $(this).find("#menu-button").on('click', function(){
        $(this).toggleClass('menu-opened');
        var mainmenu = $(this).next('ul');
        if (mainmenu.hasClass('open')) { 
          mainmenu.hide().removeClass('open');
        }
        else {
          mainmenu.show().addClass('open');
          if (settings.format === "dropdown") {
            mainmenu.find('ul').show();
          }
        }
      });

      cssmenu.find('li ul').parent().addClass('has-sub');

      multiTg = function() {
        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
        cssmenu.find('.submenu-button').on('click', function() {
          $(this).toggleClass('submenu-opened');
          if ($(this).siblings('ul').hasClass('open')) {
            $(this).siblings('ul').removeClass('open').hide();
          }
          else {
            $(this).siblings('ul').addClass('open').show();
          }
        });
      };

      if (settings.format === 'multitoggle') multiTg();
      else cssmenu.addClass('dropdown');

      if (settings.sticky === true) cssmenu.css('position', 'fixed');

      resizeFix = function() {
        if ($( window ).width() > 768) {
          cssmenu.find('ul').show();
        }

        if ($(window).width() <= 768) {
          cssmenu.find('ul').hide().removeClass('open');
        }
      };
      resizeFix();
      return $(window).on('resize', resizeFix);

    });
};

$(document).ready(function() {
  $("#cssmenu").menumaker({
    // title: "Menu",
    format: "multitoggle"
  });

  $("#cssmenu").prepend("<div id='menu-line'></div>");

var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;

$("#cssmenu > ul > li").each(function() {
  if ($(this).hasClass('active')) {
    activeElement = $(this);
    foundActive = true;
  }
});

if (foundActive === false) {
  activeElement = $("#cssmenu > ul > li").first();
}

defaultWidth = lineWidth = activeElement.width();

defaultPosition = linePosition = activeElement.position().left;

menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);

$("#cssmenu > ul > li").hover(function() {
  activeElement = $(this);
  lineWidth = activeElement.width();
  linePosition = activeElement.position().left;
  menuLine.css("width", lineWidth);
  menuLine.css("left", linePosition);
}, 
function() {
  menuLine.css("left", defaultPosition);
  menuLine.css("width", defaultWidth);
});

});

// 单位换算
function Rem() {
	var docEl = document.documentElement,
		oSize = docEl.clientWidth / 7.2;

	if (oSize > 100) {
		oSize = 100; // 限制rem值750 / 7.5 =100
	}

	docEl.style.fontSize = oSize + 'px';
}
window.addEventListener('resize', Rem, false);
Rem();


// 移动端 X icon
!(function($) {
  "use strict";
  // Preloader
  $(window).on('load', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(100).fadeOut('slow', function() {
        $(this).remove();
      });
    }
  });
  // Smooth scroll for the navigation menu and links with .scrollto classes
  var scrolltoOffset = $('#header2').outerHeight() - 2;
  $(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      e.preventDefault();
      var target = $(this.hash);
      if (target.length) {

        var scrollto = target.offset().top - scrolltoOffset;

        if ($(this).attr("href") == '#header2') {
          scrollto = 0;
        }

        $('html, body').animate({
          scrollTop: scrollto
        }, 1500, 'easeInOutExpo');

        if ($(this).parents('.nav-menu, .mobile-nav').length) {
          $('.nav-menu .active, .mobile-nav .active').removeClass('active');
          $(this).closest('li').addClass('active');
        }

        if ($('body').hasClass('mobile-nav-active')) {
          $('body').removeClass('mobile-nav-active');
          $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
          $('.mobile-nav-overly').fadeOut();
        }
        return false;
      }
    }
  });

  // Activate smooth scroll on page load with hash links in the url
  $(document).ready(function() {
    if (window.location.hash) {
      var initial_nav = window.location.hash;
      if ($(initial_nav).length) {
        var scrollto = $(initial_nav).offset().top - scrolltoOffset;
        $('html, body').animate({
          scrollTop: scrollto
        }, 1500, 'easeInOutExpo');
      }
    }
  });

  // Mobile Navigation
  if ($('.nav-menu').length) {
    var $mobile_nav = $('.nav-menu').clone().prop({
      class: 'mobile-nav d-lg-none'
    });
    $('body').append($mobile_nav);
    $('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
    $('body').append('<div class="mobile-nav-overly"><a class="mobileLogo1" href="./index.html"></a></div>');
    // $('body').append('<a class="mobileLogo1" href="./index.html"></a>');

    $(document).on('click', '.mobile-nav-toggle', function(e) {
      $('body').toggleClass('mobile-nav-active');
      $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
      $('.mobile-nav-overly').toggle();
    });

    $(document).on('click', '.mobile-nav .drop-down > a', function(e) {
      e.preventDefault();
      $(this).next().slideToggle(300);
      $(this).parent().toggleClass('active');
    });

    $(document).click(function(e) {
      var container = $(".mobile-nav, .mobile-nav-toggle");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('body').hasClass('mobile-nav-active')) {
          $('body').removeClass('mobile-nav-active');
          $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
          $('.mobile-nav-overly').fadeOut();
        }
      }
    });
  } else if ($(".mobile-nav, .mobile-nav-toggle").length) {
    $(".mobile-nav, .mobile-nav-toggle").hide();
  }
})(jQuery);