/**
 *@author liuhaixiao
 *@createTime 2018-11-28 15:57
 *@description 水波纹
 pixi的步骤如下：
 1、创建一个舞台 (stage)
 2、创建一个画布 (render)
 3、把画布插入DOM中
 4、创建一个精灵 (sprite)
 5、把精灵加入画布
 6、把画布加入舞台
 7、刷新舞台
 */
const PIXI = require('../../static/pixi.min');
export default class WaterRipple {
  constructor(select) {
    this.oC = select;
    this.widthCanvas = this.oC.width;
    this.heightCanvas = this.oC.height;
    this.oGc = this.oC.getContext('webgl');
    this.currentImg = null;
  }

  init(backgroundImageList) {
    this.autoPlaySpeed       = [10, 3];
    // centerSprites: true,
    //   wacky: false,
    //   displacementCenter: true,
    //创建一个画布
    if(!this.renderer){
      this.renderer = new PIXI.WebGLRenderer(this.widthCanvas, this.heightCanvas, {antialias: true,canvas:this.oC, context: this.oGc, preserveDrawingBuffer: true,backgroundColor:'0xffffff'});
      this.renderer.view.style.backgroundSize="fill";
      this.renderer.view.style.objectFit = 'fill';
    }
    //创建一个舞台
    if(!this.stage){
      this.stage = new PIXI.Container();
      this.stage.transparent = true;
      this.stage.interactive = true;
      this.stage.resolution=2;
    }
    //创建一个舞台
    if(!this.slidesContainer){
      this.slidesContainer = new PIXI.Container();
      //把子容器装进舞台中
      this.stage.addChild(this.slidesContainer);
    }
    //使用图片方式创建背景精灵
    if(!this.backgroundImageSprite){
      this.backgroundImageSprite = new PIXI.Sprite.fromImage('https://dm.static.elab-plus.com/static/img/waterclouds.jpg');
      this.backgroundImageSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
      this.backgroundImageSprite.backgroundSize="cover";
      this.backgroundImageSprite.scaleMode=PIXI.SCALE_MODES.NEAREST;
      this.backgroundImageSprite.centerSprites = true;
      this.backgroundImageSprite.displacementCenter = true;
      this.backgroundImageSprite.wacky = false;
      // this.backgroundImageSprite.author.set(0.5);
      this.stage.addChild(this.backgroundImageSprite);
    }
    if(!this.displacementFilter){
      this.displacementFilter = new PIXI.filters.DisplacementFilter(this.backgroundImageSprite);
      this.displacementFilter.autoFit = true;
      this.displacementFilter.objectFit="cover";
      // this.backgroundImageSprite.x = 3000;
      // this.backgroundImageSprite.y = 200;
      this.stage.filters = [this.displacementFilter];
    }
    this.loadPixiSprites(backgroundImageList);
  }

  loadPixiSprites(backgroundImageList) {
    //初始化时，加载背景图片，使之动效在背景图上进行展示，如果没有背景图，则显示不出
    /*var bgImage;
    if (null != this.bgLayer && this.bgLayer != undefined) {
      bgImage = this.bgLayer.querySelector('img').getAttribute('src');
    }*/
    this.stageImageList = [];
    this.index = 0;
    this.currentImg = null;
    for (let item of backgroundImageList){
      const texture = new PIXI.Texture.fromImage(item);
      texture.backgroundSize="cover";
      texture.x = this.imgWidth/4;
      texture.y = this.imgHeight/2;
      // texture.position.x = this.imgWidth/2;
      // texture.position.y = this.imgHeight/2;
      // debugger
      // texture.width = this.imgWidth;
      // texture.height = this.imgHeight;
      const image = new PIXI.Sprite(texture);
      image.displayObject="fill";
      if(this.imgWidth){
        image.width=this.imgWidth;
      }
      if(this.imgHeight){
        image.height=this.imgHeight;
      }
      // image.anchor.x = 0.5;
      // image.anchor.y = 0.5;
      // image.pivot.set(this.imgWidth/2, this.imgHeight/2);
      image.objectFit="cover";
      image.anchor.set(0.5);
      image.x = this.imgWidth / 2;
      image.y = this.imgHeight / 2;
      // image.backgroundSize = "cover";
      this.stageImageList.push(image);
    }

    if(!this.ticker){
      this.ticker = new PIXI.ticker.Ticker();
      this.ticker.autoStart = true;
    }
    this.ticker.add((delta) => {
      this.backgroundImageSprite.x += this.autoPlaySpeed[0] * delta;
      this.backgroundImageSprite.y += this.autoPlaySpeed[1];
      this.renderer.render(this.stage);
    });
    this.refreshImage();
    setInterval(()=>{
      this.refreshImage();
    },8000);
  }

  refreshImage(){
    if(this.currentImg){
      console.log("remove slidesContainer");
      this.slidesContainer.removeChild(this.currentImg);
    }
    const currentImage = this.stageImageList[this.index];
    //把需要生效的图片动画加到子舞台中
    this.slidesContainer.addChild(currentImage);
    this.currentImg = currentImage;
    this.index++;
    if(this.index===this.stageImageList.length){
      this.index = 0;
    }
  }

  process(backgroundImageList,width,height) {
    this.imgWidth=width;
    this.imgHeight=height;
    this.init(backgroundImageList);
  }
}
