<template>
  <div id="hlj" ref="hlj">当前蓝牙连接人显示区</div>
</template>

<script>
export default {
  name:'Hlj',
  data(){
    return {
      stage:'',
      layer:'',
      width:'',
      height:'',
      msgList:[],
      ljList:[
        {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
      ]
    }
  },
  watch:{
    msgList:{
      handler(newVal,oldVal){
        if (this.layer){
          this.drawMsg()
        }
      },
      immediate:true,
      deep:true
    },
    // msgList:function (newVal,oldVal){
    //   console.log(newVal)
    //   this.drawMsg()
    //
    // }
  },
  mounted() {
    this.initKonvaStage();
    //模拟当前蓝牙连接人显示
    // for (let i = 0; i < this.ljList.length; i++) {
    //   const lj=this.ljList[i];
    //   this.drawLj(lj,i)
    // }
    this.drawMsg()
    let s=0;
    const msgList=[
      '8:08,张三接收了切割任务','8:30,张三回报了切割任务',
      '8:31,张三接收了切割任务','9:30,张三回报了切割任务',
      '9:31,张三接收了切割任务','10:00,张三回报了切割任务',
      '10:08,张三接收了切割任务','11:30,张三回报了切割任务',
    ]
    setInterval(()=>{
      if(s<msgList.length-1){
        this.layer.destroyChildren();
        this.msgList.push(msgList[s++])
      }
    },2000)
  },
  methods:{
    initKonvaStage(){
      this.width=this.$refs.hlj.clientWidth;
      this.height=this.$refs.hlj.clientHeight;

      this.stage = new Konva.Stage({
        container: "hlj",
        width: this.width,
        height: this.height,
      });
      //pointer
      //this.stage.container().style.cursor = "sw-resize";

      this.layer = new Konva.Layer();

      this.stage.add(this.layer)

      this.layer.draw();
    },
    drawMsg(){
      const size=this.msgList.length
      for (let i = size; i >=0; i--) {
        const msg=this.msgList[i];
        const y=this.height-20*(size-i)
        const text=new Konva.Text({
          x:0,
          y:y,
          width:this.width,
          height:15,
          lineHeight:1,
          stroke:'white',
          strokeWidth:1.1,
          text:msg,
          align:'center',
          fontSize:14,
          visible:y >= 0
        })
        this.layer.add(text)
      }
    },
    drawLj(lj,index){
      const imgSize= this.height*0.7
      const group=new Konva.Group({
        x:index*imgSize+(index*15),
        y:10,
        width:imgSize,
        height:imgSize+20
      })
      group.on('click',()=>{
        //加载工序对应的工单
        console.log(lj.name)
      })

      const text=new Konva.Text({
        x:0,
        y:imgSize+3,
        width:imgSize,
        height:20,
        lineHeight:1,
        stroke:'white',
        strokeWidth:1.5,
        text:lj.name,
        align:'center',
        fontSize:20
      })
      group.add(text)
      const imageObj = new Image();
      imageObj.src = lj.imgSrc;
      imageObj.onload = function () {
        const shape = new Konva.Image({
          x: 0,
          y: 0,
          width: imgSize,
          height: imgSize,
          image: imageObj,
        });
        group.add(shape)
      }

      this.layer.add(group)
    },

  }
}
</script>

<style scoped>
#hlj {
  background: none;
  overflow: hidden;
  width: 95%;
  height: 13vh;
  aspect-ratio: 16/9;
}
</style>
