import Konva from "konva";

export const sljh=function (width,height){

  const layer=new Konva.Layer({
    id:'2',
    x:20,
    y:75,
  })

  const group=new Konva.Group({
    x:0,
    y:0,
    width: width-74,
    height: height*0.2-60,
    draggable: true,
    dragBoundFunc:function (pos){
      return {
        x:pos.x,
        y:75
      }
    },
  });

  const bgGroup=new Konva.Group({
    x:34,
    y:0,
  })
  bgGroup.clipFunc(function(ctx) {
    ctx.rect(4, 0, width-114, height*0.2-10);
  });

  layer.add(bgGroup)
  bgGroup.zIndex(0)
  bgGroup.add(group)

  const left2ImageObj=new Image()
  left2ImageObj.src = require('@/assets/sliao/left2.png');
  left2ImageObj.onload = function () {
    const shape1 = new Konva.Image({
      x: 0,
      y: 35,
      width: 32,
      height:120,
      image: this,
    });
    layer.add(shape1)
    shape1.zIndex(1)
    shape1.on('click touchstart',function (){
      group.move({
        x:-116
      })
    })
  }

  const right2ImageObj=new Image()
  right2ImageObj.src = require('@/assets/sliao/right2.png');
  right2ImageObj.onload = function () {
    const shape1 = new Konva.Image({
      x: width-72,
      y: 35,
      width: 32,
      height:120,
      image: this,
    });
    layer.add(shape1)
    shape1.zIndex(1)
    shape1.on('click touchstart',function (){
      group.move({
        x:116
      })
    })
  }

  const imageObj = new Image();
  imageObj.src = require('@/assets/sliao/sljhbg.png');
  imageObj.onload = function () {
    const shape = new Konva.Image({
      x: 0,
      y: 0,
      width: width-60,
      height:181,
      image: this,
    });
    layer.add(shape)
    shape.zIndex(0)
  }

  return {
    layer,group
  }
}
