// ==================== 閫氳繃瀹藉害鍒ゆ柇浣跨敤PC杩樻槸mobile鏍峰紡 start ====================
// 鏄惁鏄疨C
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 > (749 - scrollbarWidth)) {
    if (!isPcClass) {
      $el.classList.remove("mobile-style");
      $el.classList.add("pc-style");
    }
    isPC = true;
  }
  // 绉诲姩绔
  else if (clientWidth <= 749) {
    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();
});
// ==================== 閫氳繃瀹藉害鍒ゆ柇浣跨敤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 = window.isPC
      ? $("header .pc-nav").height() + 50 || 0
      : $("header .head").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 ====================
// 鍒ゆ柇鏄惁鏈夎婊氬姩鐨勬暟瀛楋紝鏈夌殑璇濈粰姣忎釜鍏冪礌娣诲姞 data-scroll 灞炴€
// 璇ュ睘鎬х敤浜庡垽鏂厓绱犳槸鍚︽粴鍔ㄨ繃
if ($(".scrolling-numbers").length > 0) {
  // jq璁剧疆灞炴€у鏋滄槸甯冨皵鍊肩殑璇濓紝闇€瑕佷娇鐢╬rop涓嶈兘浣跨敤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 ====================
// ==================== 缃《鎸夐挳 start ====================
$("#goto-top").click(function () {
  $("html,body").animate(
    {
      scrollTop: 0,
    },
    500
  );
});
$("#goto-top2").click(function () {
  $("html,body").animate(
    {
      scrollTop: 0,
    },
    500
  );
});
// 鐩戝惉椤甸潰婊氬姩
$(document).scroll(function () {
  //
  if ($(window).scrollTop() >= $(window).height()) {
    $("#goto-top").addClass("show");
  } else {
    $("#goto-top").removeClass("show");
  }
});
// ==================== 缃《鎸夐挳 end ====================
// ==================== 閫氱敤swiper鍒囨崲鍒濆鍖 start ====================
function initSwiperTab(id, el, pagination, option) {
  this.id = id;
  this.el = $(el);
  this.isPC = window.isPC;
  this.spaceBetween = this.isPC ? 20 : 10;
  this.pagination = pagination;
  this.option = option ? option : {};
  this.even = "mouseover";

  this.init = function () {
    const option = this.option;
    const id = this.id;
    const el = this.el;
    const spaceBetween = this.spaceBetween;
    const pagination = this.pagination;
    const even = this.even;

    let swiperObj;

    if (!$(id).length) return this;

    if (Object.keys(option).length) {
      if (!option.on) {
        option.on = {
          slideChange: function () {
            el.removeClass("active");
            el.eq(this.activeIndex).addClass("active");
          },
          init: function () {
            el.eq(0).addClass("active");
          },
        };
      }
      swiperObj = new Swiper(id, option);
    } else {
      swiperObj = new Swiper(id, {
        preventClicks: false,
        allowTouchMove: false,
        observer: true,
        observeParents: true,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        autoHeight: true,
        spaceBetween: spaceBetween,
        speed: 1000,
        on: {
          slideChange: function () {
            el.removeClass("active");
            el.eq(this.activeIndex).addClass("active");
          },
          init: function () {
            el.eq(0).addClass("active");
          },
        },
        pagination: {
          el: pagination || "",
          clickable: true,
        },
      });
    }

    el.off();
    el.on(even, function () {
      el.removeClass("active");
      $(this).addClass("active");
      swiperObj.slideTo($(this).index());
    });

    return { data: this, swiper: swiperObj };
  };
}
// ==================== 閫氱敤swiper鍒囨崲鍒濆鍖 end ====================

// ==================== 閫氱敤鏃犵紳婊氬姩 start ====================
/**
 * 浼犲叆 swiper 鍒濆鍖栫殑瀹瑰櫒瀵硅薄锛屽嵆鍙疄鐜版棤缂濇粴鍔
 * @param {*} el 闇€瑕佹粴鍔ㄧ殑鐖剁骇瀹瑰櫒
 * @param {*} step 绉诲姩鐨勮窛绂伙紝瓒婂ぇ閫熷害瓒婂揩
 * @param {*} direction 婊氬姩鏂瑰悜锛岄粯璁alse锛堝悜鍙虫粴鍔級
 */
function autoSwiper(el, step, direction) {
  this.el = $(el);
  this.moveEl = $(el).find(".swiper-wrapper");
  this.child = $(el).find(".swiper-slide");
  this.direction = direction;
  this.step = step || 1;
  this.moveDistance = this.child.outerWidth(true) * this.child.length;
  this.moveEl.append(this.moveEl.html());
  this.moveEl.css("transform", "translate3d(0,0,0)");
  this.number = 0;
  this.animationFrame = null;
}

autoSwiper.prototype.init = function () {
  var self = this;
  var lastTime = null;

  function animate(timestamp) {
    if (!lastTime) {
      lastTime = timestamp;
    }
    var progress = timestamp - lastTime;

    if (self.direction) {
      if (self.number <= 0) {
        self.moveEl.css(
          "transform",
          "translate3d(" + (self.number += self.step) + "px,0,0)"
        );
      } else {
        self.moveEl.css(
          "transform",
          "translate3d(-" + self.moveDistance + "px,0,0)"
        );
        self.number = -self.moveDistance;
      }
    } else {
      if (self.number >= -self.moveDistance) {
        self.moveEl.css(
          "transform",
          "translate3d(" + (self.number -= self.step) + "px,0,0)"
        );
      } else {
        self.number = 0;
      }
    }

    lastTime = timestamp;
    self.animationFrame = requestAnimationFrame(animate);
  }

  self.animationFrame = requestAnimationFrame(animate);
};

autoSwiper.prototype.stop = function () {
  cancelAnimationFrame(this.animationFrame);
};

autoSwiper.prototype.progress = function () {
  return this.number;
};

autoSwiper.prototype.start = function (direction) {
  this.stop();
  direction && (this.direction = direction)
  this.init();
};
// ==================== 閫氱敤鏃犵紳婊氬姩 end ====================
// ==================== 婊氬姩鍥惧抚瀹炵幇 Start ====================
class InitScroll {
  /**
   *
   * @param {String} id 鍒濆鍖栫殑鍏冪礌id
   * @param {String} source 鍥惧抚璧勬簮璺緞锛堟枃浠跺す璺緞锛
   * @param {Number} number 鍥惧抚鏁伴噺
   * @param {String} type 鍥惧抚绫诲瀷(png/jpg/webp)
   * @param {number} scrollDuration - 婊氬姩鐨勮窛绂?鍙互鐞嗚В鎴愬姩鐢绘寔缁椂闂达紙榛樿涓?000px锛
   * @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}/${(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();
      const that = this
      // 鐩戝惉椤甸潰灏哄鍙戠敓鍙樺寲
      window.addEventListener("resize", function () {
        setTimeout(function() {
          canvas.width = that.element?.offsetWidth;
          canvas.height = that.element?.offsetHeight;
          render();
          // console.log(canvas.width);
          // console.log(canvas.height);
          
        },500)
      });
      resolve();
      // 寮€濮嬪姞杞
      loader.start();

    });
  }
}
// ==================== 婊氬姩鍥惧抚瀹炵幇 End ====================