import Konva from "konva";
import QRCode from 'qrcode'

export default function (width,height){
  const x=width*0.66+40,y=45,_width=width*0.30,_height=height*0.945

  const container=function (){
    const group=new Konva.Group({
      x:x,
      y:y,
      width:_width,
      height:_height
    })

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:_width,
      height:_height,
      stroke:'black',
      strokeWidth:1,
    })

    group.add(rect)
    return group
  }

  const drawGd=function (data){
    // this.layer.destroyChildren();

    const group=new Konva.Group({
      x:0,
      y:0,
      width:_width,
      height:_height
    })

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:_width,
      height:_height,
      fill:'white'
    })
    group.add(rect)

    const title=new Konva.Text({
      x:0,
      y:10,
      width:_width,
      height:35,
      lineHeight:1,
      stroke:'black',
      strokeWidth:1.2,
      text:'大连重工大连钢材加工配送有限公司',
      align:'center',
      fontSize:22,
    })
    group.add(title)

    const sgdTitle=new Konva.Text({
      x:0,
      y:40,
      width:_width,
      height:25,
      lineHeight:1,
      stroke:'black',
      strokeWidth:1,
      text:'理料施工单',
      align:'center',
      fontSize:20,
    })
    group.add(sgdTitle)

    const dhTitle=new Konva.Text({
      x:0,
      y:50,
      width:_width-48,
      height:15,
      lineHeight:1,
      text:'单号:LL_'+data.gdh,
      align:'right',
      fontSize:12,
    })
    group.add(dhTitle)

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

    const group1=drawCzbh(data)
    group0.add(group1)
    const group2=drawPlAndFd(data)
    group0.add(group2)
    const group3=drawTzbh(data)
    group0.add(group3)
    const group4=drawTlt(data)
    group0.add(group4)
    const group5=drawJs(data)
    group0.add(group5)
    const group6=drawHb(data)
    group0.add(group6)
    const group7=drawBz(data)
    group0.add(group7)
    const group8=drawQz(data)
    group0.add(group8)
    console.log(data)
    generateQRCode(data.gdh,group0)
    return group
  }

  const drawQz=function (data){
    const group=new Konva.Group({
      x:0,
      y:620,
      width:(_width-60),
      height:30,
    })

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

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

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

    const jsText=new Konva.Text({
      x:0,
      y:0,
      width:(_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:(_width-60),
      height:30,
      stroke:'black',
      strokeWidth:1,
    })
    group.add(plRect)

    const plText=new Konva.Text({
      x:0,
      y:30,
      width:(_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:(_width-60)/2,
      y:30,
      width:(_width-60)/2,
      height:30,
      stroke:'black',
      strokeWidth:1,
    })
    group.add(fdRect)

    const fdText=new Konva.Text({
      x:(_width-60)/2,
      y:30,
      width:(_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)

    return group
  }
  const drawJs=function (data){
    const group=new Konva.Group({
      x:0,
      y:350,
      width:(_width-60),
      height:30,
    })

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

    const jsText=new Konva.Text({
      x:0,
      y:0,
      width:(_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:(_width-60),
      height:30,
      stroke:'black',
      strokeWidth:1,
    })
    group.add(plRect)

    const plText=new Konva.Text({
      x:0,
      y:30,
      width:(_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:(_width-60)/2,
      y:30,
      width:(_width-60)/2,
      height:30,
      stroke:'black',
      strokeWidth:1,
    })
    group.add(fdRect)

    const fdText=new Konva.Text({
      x:(_width-60)/2,
      y:30,
      width:(_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)

    return group
  }
  const drawTlt=function (data){
    const group=new Konva.Group({
      x:0,
      y:150,
      width:(_width-60),
      height:200,
    })

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

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

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

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

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

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

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


    return group
  }
  const drawCzbh=function (data){
    const czbhGroup=new Konva.Group({
      x:0,
      y:0,
      width:(_width-188),
      height:60,
    })

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

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

          const shape = new Konva.Image({
            x: 390,
            y: 1,
            width: imgSize,
            height: imgSize,
            image: imageObj,
          });
          group.add(shape)
        }

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

  return {
    container,drawGd
  }
}