<template>
  <div id="hgd" ref="hgd">施工单显示区</div>
</template>

<script>
import eventBus from "@/utils/EventBus";
import QRCode from 'qrcode'
export default {
  name:'Hgd',
  data(){
    return {
      stage:'',
      layer:'',
      width:'',
      height:'',
      containerGroup:'',
    }
  },
  created(){
    eventBus.$on('share',val=>{
      this.drawGd(val)
    })
  },
  mounted() {
    this.initKonvaStage();
  },
  methods:{
    initKonvaStage(){
      this.width=this.$refs.hgd.clientWidth;
      this.height=this.$refs.hgd.clientHeight;

      this.stage = new Konva.Stage({
        container: "hgd",
        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();

    },
    drawGd(data){
      this.layer.destroyChildren();

      this.containerGroup=new Konva.Group({
        x:0,
        y:20,
      })
      this.layer.add(this.containerGroup)

      const containerRect=new Konva.Rect({
        x:0,
        y:0,
        width:this.width-30,
        height:this.height-30,
        fill:'white'
      })
      this.containerGroup.add(containerRect)

      console.log(data)
      const title=new Konva.Text({
        x:0,
        y:10,
        width:this.width-30,
        height:35,
        lineHeight:1,
        stroke:'black',
        strokeWidth:1.1,
        text:'大连重工大连钢材加工配送有限公司',
        align:'center',
        fontSize:20,
      })
      this.containerGroup.add(title)

      const sgdTitle=new Konva.Text({
        x:0,
        y:40,
        width:this.width-30,
        height:25,
        lineHeight:1,
        stroke:'black',
        strokeWidth:1.1,
        text:data.title||'施工单',
        align:'center',
        fontSize:22,
      })
      this.containerGroup.add(sgdTitle)

      const dhTitle=new Konva.Text({
        x:0,
        y:50,
        width:this.width-60,
        height:15,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'单号:'+data.gdh,
        align:'right',
        fontSize:12,
      })
      this.containerGroup.add(dhTitle)

      const group=new Konva.Group({
        x:15,
        y:65,
        width:this.width-60,
        height:this.height-100,
      })

      const rect=new Konva.Rect({
        x:0,
        y:0,
        width:this.width-60,
        height:this.height-100,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(rect)

      this.drawCzbh(group,data)
      this.drawPlAndFd(group,data)
      this.drawTzbh(group,data)
      this.drawTlt(group,data)
      this.drawJs(group,data)
      this.drawHb(group,data)
      this.drawBz(group,data)
      this.drawQz(group,data)

      this.containerGroup.add(group)

      this.generateQRCode(data.gdh,group)
    },
    drawQz($group,data){
      const group=new Konva.Group({
        x:0,
        y:620,
        width:(this.width-60),
        height:30,
      })
      $group.add(group)

      const jsText=new Konva.Text({
        x:5,
        y:1,
        width:(this.width-60),
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'负责人:',
        fontSize:18,
        verticalAlign:'middle'
      })
      group.add(jsText)
      $group.add(group)
    },
    drawBz($group,data){
      const group=new Konva.Group({
        x:0,
        y:440,
        width:(this.width-60),
        height:180,
      })
      $group.add(group)

      const rect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-60),
        height:180,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(rect)
    },
    drawHb($group,data){
      const group=new Konva.Group({
        x:0,
        y:410,
        width:(this.width-60),
        height:30,
      })

      const jsRect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-60),
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(jsRect)

      const jsText=new Konva.Text({
        x:0,
        y:0,
        width:(this.width-60),
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'回报',
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      group.add(jsText)

      const plRect=new Konva.Rect({
        x:0,
        y:30,
        width:(this.width-60),
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(plRect)

      const plText=new Konva.Text({
        x:0,
        y:30,
        width:(this.width-60)/2,
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:data.jsr,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })

      const fdRect=new Konva.Rect({
        x:(this.width-60)/2,
        y:30,
        width:(this.width-60)/2,
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(fdRect)

      const fdText=new Konva.Text({
        x:(this.width-60)/2,
        y:30,
        width:(this.width-60)/2,
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:data.jssj,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      group.add(fdText)

      group.add(plText)
      $group.add(group)
    },
    drawJs($group,data){
      const group=new Konva.Group({
        x:0,
        y:350,
        width:(this.width-60),
        height:30,
      })

      const jsRect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-60),
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(jsRect)

      const jsText=new Konva.Text({
        x:0,
        y:0,
        width:(this.width-60),
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'接收',
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      group.add(jsText)

      const plRect=new Konva.Rect({
        x:0,
        y:30,
        width:(this.width-60),
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(plRect)

      const plText=new Konva.Text({
        x:0,
        y:30,
        width:(this.width-60)/2,
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:data.jsr,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })

      const fdRect=new Konva.Rect({
        x:(this.width-60)/2,
        y:30,
        width:(this.width-60)/2,
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(fdRect)

      const fdText=new Konva.Text({
        x:(this.width-60)/2,
        y:30,
        width:(this.width-60)/2,
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:data.jssj,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      group.add(fdText)

      group.add(plText)
      $group.add(group)
    },
    drawTlt($group,data){
      const group=new Konva.Group({
        x:0,
        y:150,
        width:(this.width-60),
        height:200,
      })
      $group.add(group)

      const rect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-60),
        height:200,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(rect)
    },
    drawTzbh($group,data){
      const group=new Konva.Group({
        x:0,
        y:120,
        width:(this.width-60),
        height:30,
      })

      const rect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-60),
        height:30,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(rect)

      const text=new Konva.Text({
        x:0,
        y:0,
        width:(this.width-60),
        height:30,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:data.tzbh,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      group.add(text)
      $group.add(group)
    },
    drawPlAndFd($group,data){
      const group=new Konva.Group({
        x:0,
        y:60,
        width:(this.width-188),
        height:60,
      })

      const plRect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-188)/2,
        height:60,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(plRect)

      const plText=new Konva.Text({
        x:0,
        y:0,
        width:(this.width-188)/2,
        height:60,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'批量:'+data.dcPl,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })

      const fdRect=new Konva.Rect({
        x:(this.width-188)/2,
        y:0,
        width:(this.width-188)/2,
        height:60,
        stroke:'black',
        strokeWidth:1,
      })
      group.add(fdRect)

      const fdText=new Konva.Text({
        x:(this.width-188)/2,
        y:0,
        width:(this.width-188)/2,
        height:60,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'分段:'+data.dcFd,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      group.add(fdText)

      group.add(plText)
      $group.add(group)
    },
    drawCzbh($group,data){
      const czbhGroup=new Konva.Group({
        x:0,
        y:0,
        width:(this.width-188),
        height:60,
      })

      const czbhRect=new Konva.Rect({
        x:0,
        y:0,
        width:(this.width-188),
        height:60,
        stroke:'black',
        strokeWidth:1,
      })
      czbhGroup.add(czbhRect)

      const czbhText=new Konva.Text({
        x:0,
        y:0,
        width:(this.width-188),
        height:60,
        lineHeight:1,
        stroke:'black',
        strokeWidth:0.8,
        text:'船号:'+data.dcCh,
        fontSize:18,
        align:'center',
        verticalAlign:'middle'
      })
      czbhGroup.add(czbhText)
      $group.add(czbhGroup)
    },
    generateQRCode(text,group) {
      QRCode.toDataURL(text,{width:600,height:600,margin:1})
        .then(url => {
          const imageObj = new Image();
          imageObj.src = url;
          imageObj.onload = function () {
            const imgSize=118
            const shape = new Konva.Image({
              x: 205,
              y: 1,
              width: imgSize,
              height: imgSize,
              image: imageObj,
            });
            group.add(shape)
          }

        }).catch(err => {
          console.error(err);
        });
    }
  }
}
</script>

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