import Konva from "konva";

//传送带
export default function (width,height){
  const x=width*0.55+40,y=45,_width=width*0.1,_height=height*0.945
  const container=new Konva.Group({
    id:'csd',
    x:x,
    y:y,
    width:_width,
    height:_height
  })

  // const imageObj = new Image();
  const imgSize=_width
  // imageObj.src = require('@/assets/pwan/csdbg.png');
  // imageObj.onload = function () {
  //   const shape = new Konva.Image({
  //     x: 0,
  //     y: 0,
  //     width: imgSize,
  //     height:_height,
  //     image: imageObj,
  //   });
  //   container.add(shape)
  //   shape.zIndex(0)
  // }

  const imageObj1 = new Image();
  imageObj1.src = require('@/assets/pwan/csd0.png');
  imageObj1.onload = function () {
    const shape = new Konva.Image({
      x: 0,
      y: 0,
      width: imgSize,
      height:_height*0.1,
      image: this,
    });
    container.add(shape)
    shape.zIndex(1)
  }

  const imageObj3 = new Image();
  imageObj3.src = require('@/assets/pwan/csd0.png');
  imageObj3.onload = function () {
    const shape = new Konva.Image({
      x: 0,
      y: _height-_height*0.1+1,
      width: imgSize,
      height:_height*0.1,
      image: this,
    });
    container.add(shape)
    shape.zIndex(1)
  }

  const group=new Konva.Group({
    x:0,
    y:_height*0.1,
    width: imgSize,
    height:_height-_height*0.1,
  })
  container.add(group)
  group.clipFunc(function(ctx) {
    ctx.rect(0, 0, imgSize, _height-_height*0.1);
  });

  initCsd()

  function initCsd() {
    const imageObj2 = new Image();
    imageObj2.src = require('@/assets/pwan/csd1.png');
    imageObj2.onload = function () {
      play(this,imgSize,_height)
    }
  }

  function play(img,imgSize,_height){
    const csdGroup=new Konva.Group({
      x: 0,
      y: 0,
      width: imgSize,
      height: _height,
      image: img,
    })
    group.add(csdGroup)
    const shape = new Konva.Image({
      x: 0,
      y: 0,
      width: imgSize,
      height: _height,
      image: img,
    });
    csdGroup.add(shape)
    shape.zIndex(0)

    const shape1 = new Konva.Image({
      x: 0,
      y: _height,
      width: imgSize,
      height: _height,
      image: img,
    });
    csdGroup.add(shape1)
    shape1.zIndex(1)

    csdGroup.to({
      x: 0,
      y: -876,
      duration: 20, //持续时间
      onFinish() {
        csdGroup.remove()
        play(img,imgSize,_height)
      }
    })
  }
  return container
}
