(function () {
  // 1. 初始化 glide 轮播图插件
  const glide = new Glide('.glide');

  // 2. 设置文字出现的动画
  // 获取到的是3个大的 text 文件框
  const texts = document.querySelectorAll('.glide__slide .text');

  // 使用 glide 监听轮播图的 创建前，轮播前 状态；
  glide.on(['mount.after', 'run.after'], () => {
    // 根据 轮播图的索引，得到当前文字框
    const caption = texts[glide.index];
    // 配置 anime 动画参数
    anime({
      targets: caption.children,  // 目标
      opacity: [0, 1],            // 变化的样式
      duration: 500,              // 过渡时间
      easing: 'linear',           // 线性动画
      delay: anime.stagger(400, { start: 300 }),  // 延迟，逐级叠加时间
      translateY: [anime.stagger([40, 10], 0)]   // 逐级叠加距离
    });
  });

  // 在轮播前，设置 文字 的透明度为 0
  glide.on('run.before', () => {
    const nodes = document.querySelectorAll('.text > *');
    nodes.forEach(item => {
      item.style.opacity = 0;
    });
  });

  glide.mount();
})();

// 筛选功能
// 1. 获取想要添加功能模块
const caseGrid = document.querySelector('.case-grid');
// 2. 给 每项 排列
const isotope = new Isotope(caseGrid, {
  itemSelector: '.case-item',
  layoutMode: 'fitRows'
});
// 3. 给按钮添加筛选的关键字
// 4. 给要筛选的 元素 的 class 添加自己的身份标志
// 5. 给按钮添加点击事件, 利用事件冒泡，绑定父元素
// 给按钮绑定点击事件, 事件委托，在点击空白处会触发点击事件；
const button = document.querySelectorAll('.bat');
Array.prototype.slice.call(button).forEach(item => {
  
  item.addEventListener('click', (e) => {
    // 获取点击按钮的  data-filter 值
    const batData = e.target.getAttribute('data-filter');
    // 取消其他按钮的 active 类
    document.querySelector('.bat.active').classList.remove('active');
    // 给点击的按钮添加 active 类
    item.classList.add('active');
    // 进行筛选
    isotope.arrange({
      filter: batData
    });
  })
})

/**** 屏幕滚动到一定位置显示顶部 
 * - 可以在还没有到顶部，就删除 样式名，这样就看不到还原的样子，就不用添加一个还原样式。
****/
// 获取头部元素
const header = document.querySelector('header');
// 获取返回顶部
const toTop = document.querySelector('.to-top');
document.addEventListener('scroll', function() {

  // 获取窗口卷去的Y轴数
  const s = window.pageYOffset;

  if (s >= 400) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }

  if (s >= 800) {
    toTop.style.display = 'block';
  } else {
    toTop.style.display = 'none';
  }
});


/****  屏幕滚动，元素动画显示  ****/
const slideUp = {
  distance: '50px',
  delay: 300,        // 延迟
  duration: 500,     // 持续
  origin: 'bottom',  // 起源
  // reset: true,        // 重复
  easing: 'ease-in-out'
};

// 关于我们动画
ScrollReveal().reveal('.about-us .item', { ...slideUp, interval: 350 });

// 服务流程
ScrollReveal().reveal('.service .service-item', { ...slideUp, interval: 350 });

// 数据增加: ScrollReveal(滚动) 和 anime(动画) 合作；
ScrollReveal().reveal('.record .record-list', {  // 获取数据增加框
  beforeReveal: () => {
    anime({
      targets: ".record-item h4",  // 获取想要增加的数字 
      innerHTML: el => {           // 内容真机的内容访问
        return [0, el.innerHTML];
      },
      easing: 'easeInExpo',            // 速度曲线
      round: 1,                    // 自增数
    });
  }
})

// 视差效果
// 获取底部图片
const bjImg = document.querySelector('.record-img');

window.addEventListener('scroll', () => {
  /**
   * bottom: 元素的底部到屏幕顶部的距离；
   * top: 元素的顶部到屏幕顶部的距离；
   * window.innerHeight： 屏幕可见区域的高度；
   * 
   * 元素显示在屏幕： bottom > 0 && top <= window.innerHeight 就显示在可见屏幕中。
   */
  const bottom = bjImg.getBoundingClientRect().bottom;
  const top = bjImg.getBoundingClientRect().top;

  if (bottom > 0 && top <= window.innerHeight) {
    /**背景图片本来是 左右上下 居中的，我们调整图片的y坐标，
     * bottom： 屏幕下拉，图片是上升；（bottom变大，50% - 增大 = 值小（图片上升）。
     *          屏幕上拉，图片上的下降；(bottom 变小，50% - 变小 = 值大 (图片下降)。
     */
    bjImg.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)`;
  }
});


/*
  锚点调整动画
  1. 给个 区域添加 id 属性；
  2. 添加锚点链接；
  3. 引入 smooth-scroll.polyfills.min.js
*/
// 给 nav 和 返回顶部 添加动画。
const scroll = new SmoothScroll('nav a[href*="#"], .to-top a[href*="#"]', {
  header: 'header',
  speed: 1000
});

// 给探索按钮添加
// 1. 获取按钮，循环添加点击
const buttons = document.querySelectorAll('.go');
buttons.forEach(item => {
  item.addEventListener('click', function() {
    // 2. 调用动画函数，传递跳转到的锚点
    scroll.animateScroll(document.querySelector('#about-us'));
  })
})

/** 点击汉堡按钮，出现 或 隐藏 */
const burger = document.querySelector('.burger');
burger.addEventListener('click', function() {
  header.classList.toggle('open');
})

// 当点击折叠的导航时，取消 open 状态, 监听文档的滚动
document.addEventListener('scrollStart', function() {
  if(header.classList.contains('open')) {
    header.classList.remove('open');
  }
})