<template>
  <div id="hcq" ref="hcq">出勤情况显示区</div>
</template>

<script>
export default {
  name:'Hcq',
  data(){
    return {
      stage:'',
      layer:'',
      width:'',
      height:'',
      cqList:[
        {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
        {name:'张三02',imgSrc:require("@/assets/user.png"),yhdm:'张三02'},
        {name:'张三03',imgSrc:require("@/assets/user.png"),yhdm:'张三03'},
        {name:'张三04',imgSrc:require("@/assets/user.png"),yhdm:'张三04'},
        // {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
        // {name:'张三02',imgSrc:require("@/assets/user.png"),yhdm:'张三02'},
        // {name:'张三03',imgSrc:require("@/assets/user.png"),yhdm:'张三03'},
        // {name:'张三04',imgSrc:require("@/assets/user.png"),yhdm:'张三04'},
        // {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
        // {name:'张三02',imgSrc:require("@/assets/user.png"),yhdm:'张三02'},
        // {name:'张三03',imgSrc:require("@/assets/user.png"),yhdm:'张三03'},
        // {name:'张三04',imgSrc:require("@/assets/user.png"),yhdm:'张三04'},
        // {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
        // {name:'张三02',imgSrc:require("@/assets/user.png"),yhdm:'张三02'},
        // {name:'张三03',imgSrc:require("@/assets/user.png"),yhdm:'张三03'},
        // {name:'张三04',imgSrc:require("@/assets/user.png"),yhdm:'张三04'},
        // {name:'张三01',imgSrc:require("@/assets/user.png"),yhdm:'张三01'},
        // {name:'张三02',imgSrc:require("@/assets/user.png"),yhdm:'张三02'},
        // {name:'张三03',imgSrc:require("@/assets/user.png"),yhdm:'张三03'},
        // {name:'张三04',imgSrc:require("@/assets/user.png"),yhdm:'张三04'},
      ]
    }
  },
  mounted() {
    this.initKonvaStage();
    for (let i = 0; i < this.cqList.length; i++) {
      const cq=this.cqList[i];
      this.drawImage(cq,i)
    }
  },
  methods:{
    initKonvaStage(){
      this.width=this.$refs.hcq.clientWidth;
      this.height=this.$refs.hcq.clientHeight;

      this.stage = new Konva.Stage({
        container: "hcq",
        width: this.width,
        height: this.height,
      });

      this.layer = new Konva.Layer();
      this.stage.add(this.layer)

      this.layer.draw();
    },
    drawImage(cq,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(cq.name)
      })

      const text=new Konva.Text({
        x:0,
        y:imgSize+3,
        width:imgSize,
        height:20,
        lineHeight:1,
        stroke:'white',
        strokeWidth:1.5,
        text:cq.name,
        align:'center',
        fontSize:20
      })
      group.add(text)
      const imageObj = new Image();
      imageObj.src = cq.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>
#hcq {
  background: none;
  overflow: hidden;
  width: 100%;
  height: 13vh;
  aspect-ratio: 16/9;
}
</style>
