<template>
  <div id="hgx" ref="hgx">工序选择区</div>
</template>

<script>
import Konva from "konva";

export default {
  name:'Hgx',
  data(){
    return {
      stage:'',
      layer:'',
      width:'',
      height:'',
      gxList:[
        {name:'抛丸',imgSrc: require("@/assets/icon/btn_em.jpg"),},
        {name:'理料',imgSrc: require("@/assets/icon/btn_em.jpg"),},
        {name:'划线',imgSrc: require("@/assets/icon/btn_em.jpg"),},
        {name:'切割',imgSrc: require("@/assets/icon/btn_em.jpg"),},
      ],
      txGroupList:[]
    }
  },
  mounted() {
    this.initKonvaStage();
    this.txGroupList=[]
    for (let i = 0; i < this.gxList.length; i++) {
      const gx=this.gxList[i];
      this.drawGx(gx,i)
    }
  },
  methods:{
    initKonvaStage(){
      this.width=this.$refs.hgx.clientWidth;
      this.height=this.$refs.hgx.clientHeight;

      this.stage = new Konva.Stage({
        container: "hgx",
        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();
    },
    drawGx(gx,index){
      const group=new Konva.Group({
        x:10,
        y:10+index*140+(index*15),
        width:this.width,
        height:this.height/this.gxList.length-25
      })

      const imgSize= this.width*0.89
      const text=new Konva.Text({
        x:0,
        y:imgSize+3,
        width:this.width,
        height:20,
        lineHeight:1,
        fill:'white',
        // stroke:'white',
        strokeWidth:1.5,
        text:gx.name,
        align:'center',
        fontSize:20
      })
      this.txGroupList.push(text);
      text.setAttr('name',gx.name)
      text.on('click',(evt)=>{
        //加载工序对应的工单
        this.txGroupList.forEach(item=>{
          if(item.getAttr('name')!==evt.target.getAttr('name')){
            item.fill('white')
          }
        })
        evt.target.fill('blue')
      })

      const imageObj = new Image();
      imageObj.src = gx.imgSrc;
      imageObj.onload = function () {
        const shape = new Konva.Image({
          x: 0,
          y: 0,
          width: imgSize,
          height: imgSize,
          image: imageObj,
        });
        // group.add(shape)
      }
      group.add(text)
      this.layer.add(group)
    }
  }
}
</script>

<style>
#hgx {
  background: none;
  overflow: hidden;
  width: 90%;
  height: 75.5vh;
  aspect-ratio: 16/9;
}
</style>
