/**
 * @Description: 
 * @Author: MaXueWei
 * @Date: 2024-1-2 16:38:27
 * @LastEditors: MaXueWei
 * @LastEditTime: 2024-1-2 16:38:27
 */
// ==================== 通过宽度判断使用PC还是mobile样式 start ====================
// 是否是PC
let isPC = true;
// 屏幕可视宽度
let clientWidth = document.body.clientWidth;
/**
 * 通过宽度判断显示pc样式，还是移动端样式
 */
function checkWidth() {
  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
  let $el = document.querySelector("html");
  let isPcClass = $el.classList.contains("pc-style");
  let isMobileClass = $el.classList.contains("mobile-style");
  //
  // PC端
  if (clientWidth > (1099 - scrollbarWidth)) {
    if (!isPcClass) {
      $el.classList.remove("mobile-style");
      $el.classList.add("pc-style");
    }
    isPC = true;
  }
  // 移动端
  else if (clientWidth <= 1099) {
    if (!isMobileClass) {
      $el.classList.remove("pc-style");
      $el.classList.add("mobile-style");
    }
    isPC = false;
  }
  return isPC;
}
window.isPC = checkWidth();
/**
 * 监听页面尺寸发生变化
 */
window.addEventListener("resize", function () {
  // 实时监听浏览器窗口宽度
  clientWidth = document.body.clientWidth;
  window.isPC = checkWidth();
  AOS?.refresh();
});
// ==================== 通过宽度判断使用PC还是mobile样式 end ====================

// ==================== 基于Jq的锚点平滑过渡 start ====================
$('a[href*="#"]:not([href="#"])').click(function () {
  if (
    location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") &&
    location.hostname == this.hostname
  ) {
    var target = $(this.hash);
    target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
    const headerHeight = isPC
      ? $("header").height() + ($(".ny-category").height() || 0)
      : $("header .head").height() + ($(".ny-category").height()) || 0;
    if (target.length) {
      $("html, body").stop().animate(
        {
          scrollTop: target.offset().top - headerHeight,
        },
        700
      );
      return false;
    }
  }
});

// ==================== 基于Jq的锚点平滑过渡 end ====================

// ==================== 禁止IOS双击放大网页 start ====================
// 缩放
try {
  // 禁用双击缩放
  document.addEventListener("touchstart", function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  var lastTouchEnd = 0;
  document.addEventListener(
    "touchend",
    function (event) {
      var now = new Date().getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    },
    false
  );
  // 禁用双指手势操作
  document.addEventListener("gesturestart", function (event) {
    event.preventDefault();
  });
} catch (error) {}
// ==================== 禁止IOS双击放大网页 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 height = $(window).height();
  let scrollTop = $(window).scrollTop();
  if (scrollTop >= height) {
    $("#goto-top").addClass("show");
  } else {
    $("#goto-top").removeClass("show");
  }
});
//
if ($(window).scrollTop() >= $(window).height()) {
  $("#goto-top").addClass("show");
}
// ==================== 置顶按钮 end ====================
// ==================== 滚动图帧实现 Start ====================
class InitScroll {
  /**
   *
   * @param {String} id 初始化的元素id
   * @param {String} source 图帧资源路径（文件夹路径）
   * @param {Number} number 图帧数量
   * @param {String} type 图帧类型(png/jpg/webp)
   * @param {number} scrollDuration - 滚动的距离/可以理解成动画持续时间（默认为6000px）
   * @param {Object} scrollConfig - 滚动的插件配置项
   */
  constructor(id, source, number, type, scrollDuration = 6000, scrollConfig) {
    // 元素对象
    this.element = document.getElementById(id);
    // 图帧资源路径
    this.source = source;
    // 图帧数量
    this.number = number;
    // 画布元素
    this.canvas = document.createElement("canvas");
    this.context = this.canvas.getContext("2d");
    //
    this.canvas.width = this.element?.offsetWidth;
    this.canvas.height = this.element?.offsetHeight;
    this.progress = {
      el: null,
      // 进度条文案
      text: null,
      // 进度条位置
      width: null,
    };
    // 文件类型
    this.type = type;
    // 滚动距离
    this.scrollDuration = scrollDuration;
    // 滚动的插件配置项
    this.scrollConfig = scrollConfig;
  }
  /**
   * 初始化进度条
   */
  initProgress() {
    // 进度条容器
    this.progress.el = document.createElement("div");
    this.progress.el.classList.add("mxw-loading");
    // 进度条
    this.progress.width = document.createElement("div");
    this.progress.width.classList.add("mxw-progress-bar");
    // 进度条数字
    this.progress.text = document.createElement("span");
    this.progress.width.append(this.progress.text);
    //
    this.progress.el.append(this.progress.width);
    this.element.append(this.progress.el);
  }
  /**
   * 初始化
   */
  init() {
    return new Promise(resolve => {
      // 获取图帧的长度
      const length = this.number.toString().length;
      // 图帧路径
      const currentFrame = index =>
        `${this.source}/img${(index + 1).toString().padStart(length, "0")}.${
          this.type
        }`;
      this.initProgress();
      // 实例化一个加载对象
      const loader = new PxLoader();
      // 图帧数组
      const images = [];
      // 视频当前帧
      const video = {frame: 0};
      const canvas = this.canvas;
      const context = this.context;
      //
      for (let i = 0; i < this.number; i++) {
        images[i] = loader.addImage(currentFrame(i));
      }
      // 监听下载进度
      loader.addProgressListener(obj => {
        const {width, text} = this.progress;
        // 通过图帧总数求出百分比基数
        let num = 100 / obj.totalCount;
        let progressWidth = (obj.completedCount * num).toFixed(0);
        // 设置进度条长度
        width.style.width = progressWidth + "%";
        // 设置进度条文本
        text.textContent = progressWidth + "%";
      });
      // 监听下载完成的回调
      loader.addCompletionListener(() => {
        // 隐藏占位图
        this.element.getElementsByTagName("img")[0].style.display = "none";
        // 将画布插入到元素中
        this.element.append(this.canvas);
        // 隐藏加载时的占位
        this.progress.el.remove();
        let scrollTrigger = {
          trigger: this.element,
          scrub: 0.5,
          // markers: true,
          start: `top top`,
          end: `+=${this.scrollDuration}`,
          pin: true,
        };
        scrollTrigger = this.scrollConfig
          ? {...scrollTrigger, ...this.scrollConfig}
          : scrollTrigger;
        let tl = gsap.timeline({
          scrollTrigger,
        });

        tl.to(video, {
          frame: this.number - 1,
          snap: "frame",
          ease: "none",
          onUpdate: render, // use animation onUpdate instead of scrollTrigger's onUpdate
        });

        // 绘制图片
        function render() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.drawImage(
            images[video.frame],
            0,
            0,
            canvas.width,
            canvas.height
          );
        }
        render();
        resolve();
      });
      // 开始加载
      loader.start();
    });
  }
}
// ==================== 滚动图帧实现 End ====================