/* ................... 防抖函数 ................... */
function debounce(func, delay) {
  let timeout
  return function () {
    clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}
// 节流函数
function throttle(handle, wait) {
  let lastTime = 0
  return function (e) {
    let nowTime = new Date().getTime()
    if (nowTime - lastTime > wait) {
      handle()
      lastTime = nowTime
    }
  }
}
var vm = new Vue({
  el: "#app",
  data: {
    menuCss: false,
    menuActive: 0,
    logo: "/assets/images/logo.png",
    tel: '',
    i: 2,
    activeIndex: 2,
    solveSwiper: "",
    teleManaI: 1,
    fuwuTabI: 1,
	 fuwuTabJ: 1,
	 fuwuTabK: 1,
    advanTabI: 1,
    questionI: 1,
    callSenceTabI: 1,
    videoShowFlag: false,
    videoTopShow: true,
    videoBtnShow: true,
    videoHonorBtnShow: true,
    menuLeft: false,
    useI: 1
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll, false);
    window.addEventListener("scroll", this.menuFixed);
    this.scrollToPage(); // 跳转到页面的指定位置
    this.allSwiper();
    this.gifPlay();
    if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
      new WOW().init();
    };
  },
  mixins: [mixins],
  methods: {
    menuFixed: debounce(function () {
      if (!!document.documentElement.scrollTop && document.documentElement.scrollTop > 500 || document.body.scrollTop > 500) {
        this.menuCss = true;
        // this.logo = "/assets/images/logo1.png";
      } else {
        this.menuCss = false;
        // this.logo = "/assets/images/logo.png";
      }
    }, 100),
    solveTab(i) {
      this.i = i;
      var j = i - 1;
      this.solveSwiper.slideTo(j, 1000, false);
    },
    teleMana(i) {
      this.teleManaI = i;
    },
    fuwuTab(i) {
      this.fuwuTabI = i;
    },
	 fuwuTab2(i) {
	   this.fuwuTabJ = i;
	 },
	 fuwuTab3(i) {
	   this.fuwuTabK = i;
	 },
    callSenceTab(i) {
      this.callSenceTabI = i;
    },
    videoPlay(e) {
      e.preventDefault();
      var video = document.querySelector('#call-video');
      let _this = this;
      if (video.paused) {
        video.play();
        this.videoBtnShow = false;
        this.videoTopShow = false;
        video.controls = false;
      } else if (video.play()) {
        video.pause();
        this.videoBtnShow = true;
        video.controls = true;
      }
      video.addEventListener('ended', function () {
        _this.videoBtnShow = true;
        _this.videoTopShow = true;
      }, false);
    },
    videoShow(e) {
      e.preventDefault()
      var video = document.getElementById("fix-video")
      this.videoShowFlag = true
      if (video.paused) {
        video.play()
      }
    },
    videoClose() {
      this.videoShowFlag = false
      var video = document.getElementById("fix-video")
      if (video.play()) {
        video.pause()
      }
    },
    videoHonorShow(e) {
      e.preventDefault()
      var self = this
      var video = document.getElementById("honor-video")
      this.videoHonorBtnShow = false
      if (video.paused) {
        video.play()
        video.controls = "controls"
        video.addEventListener("ended", function () {
          video.controls = ""
          self.videoHonorBtnShow = true
        })
      }
    },
    onScroll: debounce(function () {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('main .call-menu')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n] - 100) {
          navIndex = n
        }
      }
      this.menuActive = navIndex
    }, 100),
    // 跳转到指定索引的元素
    scrollToPs(index) {
      // throttle((index) => {
      // console.log("🚀  file: callcenter.js:153  index:", index)
      var targetOffsetTop = document.getElementsByClassName("call-menu")[index].offsetTop;
      var offsetTop = targetOffsetTop - 50;
      if (screen.availWidth === 1280 && window.devicePixelRatio === 1.5) {
        offsetTop = targetOffsetTop / 1.2 - 50
      }
      scrollTo(0, offsetTop);
      // }, 100)
    },
    scrollToPage() {
      if (sessionStorage.getItem('position')) {
        scrollTo({
          left: 0,
          top: sessionStorage.getItem('position')
        });
        sessionStorage.removeItem('position');
      }
    },
    pageToPosition() {//页面跳转时，滚动到上次的位置
      let position = document.documentElement.scrollTop || document.body.scrollTop;
      sessionStorage.setItem('position', position);
    },
    allSwiper() {
      var _this = this;
      if (/android|windows phone|webos|iphone|ipod|blackberry/i.test(navigator.userAgent.toLowerCase())) {
        var stateSwiper = new Swiper('.call-state-box', {
          loop: true, // 循环模式选项
          initialSlide: 1,
          spaceBetween: "0",
          slidesPerView: 1,
          // centeredSlides: true,
          slideToClickedSlide: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        });
      } else {
        var stateSwiper = new Swiper('.call-state-box', {
          loop: true, // 循环模式选项
          initialSlide: 1,
          spaceBetween: "40",
          slidesPerView: 4,
          // centeredSlides: true,
          slideToClickedSlide: true,
          autoplay: {
            delay: 3000
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            disableOnInteraction: false
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        });
      }
    },
    gifPlay() {
      //observer配置项
      var observerOptions = {
        threshold: .5, //目标元素与视窗重叠的阈值（0~1）
        root: null // 目标视窗即目标元素的父元素，如果没有提供，则默认body元素
      }
      //observer 回调函数
      const observerCallback = (entries) => {
        entries.forEach(item => {
          /*
           * item.time发生相交到相应的时间，毫秒
           * item.rootBounds：根元素矩形区域的信息，如果没有设置根元素则返回 null，图中蓝色部分区域。
           * item.boundingClientRect：目标元素的矩形区域的信息，图中黑色边框的区域。
           * item.intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，图中蓝色方块和粉红色方块相交的区域。
           * item.isIntersecting：目标元素与根元素是否相交
           * item.intersectionRatio：目标元素与视口（或根元素）的相交比例。
           * item.target：目标元素，图中黑色边框的部分。
           */

          // 当前元素可见
          // console.log("🚀   observerCallback   item.intersectionRatio", item.intersectionRatio)
          if (item.isIntersecting) {
            {
              const imgBeforeSrc = item.target.src;
              let imgSrc = imgBeforeSrc.replace(/\.png/g, ".gif")
              item.target.src = imgSrc;
            }
            // 解除观察当前元素 避免不可见时候再次调用callback函数
            // observer.unobserve(item.target)
          }
          else {
            // 当前元素不可见
            const imgBeforeSrc = item.target.src;
            let imgSrc = imgBeforeSrc.replace(/\.gif/g, ".png")
            item.target.src = imgSrc;
          }
        })
      }
      const webpObserverCallback = (entries) => {
        entries.forEach(item => {
          if (item.isIntersecting) {
            {
              const imgBeforeSrc = item.target.src;
              let imgSrc = imgBeforeSrc.replace(/\.png/g, ".webp")
              item.target.src = imgSrc;
            }
            // 解除观察当前元素 避免不可见时候再次调用callback函数
            // observer.unobserve(item.target)
          }
          else {
            // 当前元素不可见
            const imgBeforeSrc = item.target.src;
            let imgSrc = imgBeforeSrc.replace(/\.webp/g, ".png")
            item.target.src = imgSrc;
          }
        })
      }
      //实例化观察者对象
      var observer = new IntersectionObserver(observerCallback, observerOptions);
      var webpObserver = new IntersectionObserver(observerCallback, observerOptions);
      //将目标元素传入观察对象
      if (location.href.indexOf("/phone") > -1) {
        webpObserver.observe(document.querySelector("#call-item-img201 img"));
        webpObserver.observe(document.querySelector("#call-item-img202 img"));
        webpObserver.observe(document.querySelector("#call-item-img203 img"));
        webpObserver.observe(document.querySelector("#call-item-img204 img"));
        webpObserver.observe(document.querySelector("#call-item-img205 img"));
      } else {
        observer.observe(document.querySelector("#call-item-img1 img"));
        observer.observe(document.querySelector("#call-item-img2 img"));
        observer.observe(document.querySelector("#call-item-img21 img"));
        observer.observe(document.querySelector("#call-item-img3 img"));
        observer.observe(document.querySelector("#call-item-img31 img"));
      }
    },
    menuLeftSwitch(bool) {
      this.menuLeft = bool
    },
  }
});