<template>
  <div class="home">
    <div class="title"></div>
    <div class="content">
      <img src="../../assets/image/hoer.png" alt="" class="imageFile">
      <div class="drag-container" ref="dragContainer">
          <div class="spin-container" ref="spinContainer">
              <img ref="imageBox" src="../../assets/image/box1.png?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" @click="goUrl(0)">
              <img ref="imageBox" src="../../assets/image/box2.png?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" @click="goUrl(1)">
              <img ref="imageBox" src="../../assets/image/box3.png?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" @click="goUrl(2)">
              <img ref="imageBox" src="../../assets/image/box4.png?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" @click="goUrl(3)">
              <img ref="imageBox" src="../../assets/image/box5.png?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" @click="goUrl(4)">
          </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
// @ is an alias to /src
// import { Notify } from 'vant';
export default {
  data() {
    return {
      radius:640,
      autoRotate:true,
      rotateSpeed:-60,
      sX:0,
      sY:0,
      nX:0,
      nY:0,
      desX:0,
      desY:0,
      tX:0,
      tY:11,
      resList:[]
    };
  },
  created(){
    this.getData()
  },
  mounted(){
    this.initCon()
    this.$nextTick(()=>{
      this.init()
    })
  },
  methods:{
    goUrl(res){
        console.log(this.resList)
      console.log(this.resList[res])
      window.location.href = this.resList[res].url
    },
    async getData(){
      let res = await this.$axios.get('/AFTop/querySystemUrl?'+this.$qs.stringify({
        type: 2
      }))
      if(res.success){
        this.resList = res.data
        console.log(this.resList)
      }
    },
    init(delayTime) {
      let aEle = [...this.$refs.spinContainer.getElementsByTagName('img')]
      for (var i = 0; i < aEle.length; i++) {
          aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + this.radius + "px)";
          aEle[i].style.transition = "transform 1s";
          aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
      }
    },
    initCon(){
      // if (this.autoRotate) {
      //   var animationName = (this.rotateSpeed > 0 ? 'spin' : 'spinRevert');
      //   this.$refs.spinContainer.style.animation = `${animationName} ${Math.abs(this.rotateSpeed)}s infinite linear`;
      // }
      let obox = this.$refs.dragContainer
      let _this = this
      console.log(this.isMobile())
      if (this.isMobile()) {
            console.log(obox)
          // ==================== Touch Events ====================
          document.ontouchstart = function(e) {
            console.log(obox)
              clearInterval(obox.timer);
              e = e || window.event;
              _this.sX = e.touches[0].clientX;
              // sY = e.touches[0].clientY;

              this.ontouchmove = function(e) {
                  e = e || window.event;
                  _this.nX = e.touches[0].clientX,
                      // nY = e.touches[0].clientY;
                      _this.desX = _this.nX - _this.sX;
                  // desY = nY - sY;
                  _this.tX += _this.desX * 0.1;
                  // tY += desY * 0.1;
                  _this.applyTranform(obox);
                  _this.sX = _this.nX;
                  // sY = nY;
              }

              this.ontouchend = function(e) {
                console.log(e)
                  this.ontouchmove = this.ontouchend = null;
                  obox.timer = setInterval(function() {
                      _this.desX *= 0.95;
                      // desY *= 0.95;
                      _this.tX += _this.desX * 0.1;
                      // tY += desY * 0.1;
                      _this.applyTranform(obox);
                      _this.playSpin(false);
                      if (Math.abs(_this.desX) < 0.5 && Math.abs(_this.desY) < 0.5) {
                          clearInterval(obox.timer);
                          _this.playSpin(true);
                      }
                  }, 17);
              }

              // return false;
          }
      }
    },
    applyTranform(obj) {
      // if (this.tY > 180) this.tY = 180;
      // if (this.tY < 0) this.tY = 0;

      obj.style.transform = "rotateX(" + (-this.tY) + "deg) rotateY(" + (this.tX) + "deg)";
    },
    playSpin(yes) {
      this.$refs.spinContainer.style.animationPlayState = (yes ? 'running' : 'paused');
    },
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    }
  }
}
</script>

<style lang="scss" scoped>
@import  './index';
</style>
