var vm = new Vue({
  el: "#app",
  data: {
    tel: '',
    i: 2,
    tabI: 1,
    tabClickI: 0,
    activeIndex: 2,
    solveSwiper: "",
    teleManaI: 1,
    sscManaI: 1,
  },
  mounted() {
    if (screen.availWidth !== 1280 && window.devicePixelRatio !== 1.5) {
      AOS.init({
        disable: "mobile",
        duration: 600,
        delay: 50,
        easing: 'ease-in-out'
      })
    } else {
      AOS.init({
        disable: true,
        duration: 600,
        delay: 50,
        easing: 'ease-in-out'
      })
    }
    var _this = this;
    var solveSwiper = new Swiper('.tele-swiper-container', {
      // loop: true, // 循环模式选项
      initialSlide: 1,
      slidesPerView: 'auto',
      centeredSlides: true,
      observer: true,
      // spaceBetween: -50,
      // slidesOffsetBefore: -50,
      observeParents: true,
      slideToClickedSlide: true,
      autoplay: {
        delay: 5000
      },
      // pagination: {
      //   el: '.swiper-pagination',
      //   clickable: true,
      // },
      on: {
        slideChangeTransitionStart: function () {
          _this.i = this.activeIndex + 1;
        },
      },
    });
    this.solveSwiper = solveSwiper;
    var customSwiper = new Swiper('.tele-custom-swiper-wrap', {
      // loop: true, // 循环模式选项
      initialSlide: 0,
      slidesPerView: 3,
      centeredSlides: true,
      slidesPerView: 'auto',
      observer: true,
      observeParents: true,
      autoplay: {
        delay: 5000
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
    this.animateTab();
    this.allSwiper()
  },
  mixins: [mixins],
  methods: {
    solveTab(i) {
      this.i = i;
      var j = i - 1;
      this.solveSwiper.slideTo(j, 1000, false);
    },
    teleMana(i) {
      this.teleManaI = i;
    },
    sscTab(i) {
      this.sscManaI = i;
    },
    allSwiper() {//swiper
      new Swiper('.use-wrap .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 3,
        autoplay: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on: {
          progress: function (progress) {
            for (i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              }
              translate = slideProgress * modify * 450 + 'px';
              scale = 1 - Math.abs(slideProgress) / 5;
              zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
              slide.transform('translateX(' + translate + ') scale(' + scale + ')');
              slide.css('zIndex', zIndex);
              slide.css('opacity', 1);
              if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0);
              }
            }
          },
          setTransition: function (swiper, transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              slide.transition(transition);
            }

          }
        }

      })
    },
    tab(i) {
      this.tabI = i;
      this.tabClickI = i
      clearInterval(this.timer);
    },
    animateTab(time = 3000) {
      this.timer = setInterval(() => {
        this.tabI++
        if (this.tabI > 4) {
          this.tabI = 1
        }
      }, time)
    }
  }
});