import { Device } from '../../base/Device';
// import WaterRipple from '../../base/WaterRipple.js';

/**
 * @author yeyuchao
 * @description index pages
 */
let waterRippler = null;
let initCanvasSlideshow = null;
let device = new Device();
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
let hasSwitch = false;
export default {
  data() {
    return {
      dataList:[],
      imageList:[],
      imgWidth:null,
      imgHeight:null,
      canvasDiv:null,
      canvasWidth:"",
      canvasHeight:"",
      index:0,
      pcPlatform:true,
      currentImg:"",
      indexStyle:"",
      leftOver:false,
      rightOver:false,
      canvasTop:"",
      waterRipplerCreated:false,
      interId:null,
      Imgs:null,
      imageCount:null,
    };
  },
  mounted() {
    this.canvasWidth = this.$refs.indexBody.offsetWidth*2;
    this.canvasHeight = this.$refs.indexBody.offsetHeight*2;
    if(!device.phone&&!device.tablet){
      // this.canvasDiv = this.$refs.indexCanvas2d;
      // this.canvasDiv.width = this.canvasWidth;
      // this.canvasDiv.height =  this.canvasHeight;
      // waterRippler = null;
      // waterRippler = new WaterRipple(this.canvasDiv,this.canvasWidth,this.canvasHeight);
      this.Imgs = new Map();
      for (let i = 0; i < this.imageList.length; i++) {
        this.Imgs.set(this.imageList[i], {width: 0, height: 0});
      }
      this.switchPages();
      window.onresize = () => {
        return (() => {
          this.canvasWidth = this.$refs.indexBody.offsetWidth*2;
          this.canvasHeight = this.$refs.indexBody.offsetHeight*2;
          this.switchPages();
        })()
      }

    }
  },
  created() {
    if(window.loadedResource.length===0){
      this.$router.push('/');
      return
    }
    window.itemType = 0;
    this.imageList = [];
    for(let item of window.banelResList){
      this.imageList.push(item.image);
    }
    this.Imgs = new Map();
    let markIdx = 0;
    for (let i = 0; i < this.imageList.length; i++) {
      this.Imgs.set(this.imageList[i], {width: 0, height: 0});
      markIdx++;
    }
    this.imageCount = markIdx;
    // this.imageList = window.loadedResource;
    console.log("this.imageList："+JSON.stringify(this.imageList ));
    this.canvasWidth = screenWidth*0.92;
    this.canvasHeight = screenHeight  - 84;
    if(device.phone || device.tablet){
      this.pcPlatform = false;
      this.switchPagesForMobile();
    }else{
      this.$nextTick(() => {
        this.canvasWidth = this.$refs.indexBody.offsetWidth*2;
        this.canvasHeight = this.$refs.indexBody.offsetHeight*2;
        this.switchPages();
      })
    }
  },
  methods:{

    borderLeftOver(){
      this.leftOver = true;
    },
    borderRightOver(){
      this.rightOver = true;
    },
    borderLeftOut(){
      this.leftOver = false;
    },
    borderRightOut(){
      this.rightOver = false;
    },
    switchPagesForMobile(){
      this.currentImg = this.imageList[this.index];
      setInterval(()=>{
        this.index++;
        if(this.index===this.imageList.length){
          this.index = 0;
        }
        this.currentImg = this.imageList[this.index];
      },8000)
    },

    switchPages(){
      const that = this;
      if(that.hasSwitch){
        // return
      }
      that.hasSwitch = true;
      // waterRippler.process(that.imageList,that.canvasWidth,that.canvasHeight);
      initCanvasSlideshow = new CanvasSlideshow({
        centerSprites:true,
        stageWidth:that.canvasWidth,
        stageHeight:that.canvasHeight,
        sprites: this.imageList,
        displacementImage: 'https://dm.static.elab-plus.com/static/img/waterclouds.jpg',
        autoPlay: true,
        autoPlaySpeed: [6, 3],
        displaceScale: [6, 3],
        fullScreen:true,
        wacky:false,
        origImages: that.Imgs,
        x: "4%",
        y: "64px",
        screenWidth:screenWidth,
        screenHeight: screenHeight,
      });
      that.interId = setInterval(()=>{
        if(!that.imageCount){
          return;
        }
        that.index++;
        if(that.index > (that.imageCount-1)){
          that.index = 0;
        }
        console.log("this.index1："+that.index);
        // (that.index == that.imageCount)?0:
        initCanvasSlideshow.moveSlider(that.index, function () {
        });
      },8000)
    },
    navigateToElabDo(){
      this.$router.push('/elabDo');
    },
    navigateToElabWho(){
      this.$router.push('/elabIntroduce');
    },
  },
  beforeDestroy(){
    if(this.interId){
      clearInterval(this.interId);
    }
    if(initCanvasSlideshow){
      initCanvasSlideshow.removeCanvas();
      initCanvasSlideshow = null;
    }
  },
  destroyed(){
  }
};
