import Konva from "konva";

let $layer=null
let $width=null
let $height=null
let $group=null

const container=function (width=0,height=0,container){
  $width=width
  $height=height
  const stage = new Konva.Stage({
    container: container,
    width: width,
    height: height,
  });

  const layer = new Konva.Layer();
  stage.add(layer)
  layer.draw();
  $layer=layer

  const imageObj = new Image();
  imageObj.src = require('@/assets/pwan/gbSelectBg.png');
  imageObj.onload = function () {
    const shape = new Konva.Image({
      x: 0,
      y: 0,
      width: width,
      height:height,
      image: imageObj,
    });
    layer.add(shape)
  }
  return {
    stage,layer
  }
}

const onMsg=function (msg,replay=false){
  if ($group){
    $group.remove()
  }
  const group=new Konva.Group({
    x:$width-50,
    y:0,
    width:$width*0.35,
    height:$height,
  })
  $layer.add(group)
  $group=group

  const text=new Konva.Text({
    x:0,
    y:0,
    width:$width*0.35,
    height:$height,
    fill:'yellow',
    verticalAlign:'middle',
    fontSize:24,
    text:msg
  })
  group.add(text)

  const play=function (){
    group.to({
      x: -$width*0.3,
      y: 0,
      duration: 10, //持续时间
      onFinish() {
        group.remove()
        replay&&play()
      }
    })
  }

  play()
}

export default {container,onMsg}