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

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

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

    const bgObj = new Image();
    bgObj.src = require('@/assets/pwan/pgdbg.png');
    bgObj.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        width: _width,
        height:_height,
        image: this,
      });
      group.add(shape)
      shape.zIndex(0)
    }
    return group
  }

  let workers=[]
  const setWorkers=function (persons){
    workers=persons
  }

  const formatWorker=function (code){
    for (const item of workers) {
      if(item.userCode===code){
        return item.userName
      }
    }
  }

  const drawGd=function (data){
    // this.layer.destroyChildren();
    window.localStorage.setItem('zyjh',JSON.stringify(data))

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

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:_width-25,
      height:_height-20,
    })
    group.add(rect)

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

    const sgdTitle=new Konva.Text({
      x:0,
      y:40,
      width:_width,
      height:25,
      lineHeight:1,
      fill:'#fff',
      strokeWidth:1,
      text:'抛丸施工单',
      align:'center',
      fontSize:20,
    })
    group.add(sgdTitle)

    const dhTitle=new Konva.Text({
      x:_width*0.7,
      y:50,
      width:_width-48,
      height:15,
      fill:'#fff',
      text:`单号:${data.gdh?'PW_'+data.gdh:''}`,
      align:'left',
      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)
    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,
      fill:'#fff',
      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:'#4991E5',
      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:'#4991E5',
      strokeWidth:1,
    })
    group.add(jsRect)

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

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

    const fdText=new Konva.Text({
      x:(_width-60)/2,
      y:30,
      width:(_width-60)/2,
      height:30,
      fill:'#fff',
      text:data.pwfkrq,
      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:'#4991E5',
      strokeWidth:1,
    })
    group.add(jsRect)

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

    const plText=new Konva.Text({
      x:0,
      y:30,
      width:(_width-60)/2,
      height:30,
      fill:'#fff',
      text:formatWorker(data.pwry),
      fontSize:18,
      align:'center',
      verticalAlign:'middle'
    })

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

    const fdText=new Konva.Text({
      x:(_width-60)/2,
      y:30,
      width:(_width-60)/2,
      height:30,
      fill:'#fff',
      text:data.pwpgrq||'',
      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:'#4991E5',
      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:'#4991E5',
      strokeWidth:1,
    })
    group.add(rect)

    const text=new Konva.Text({
      x:0,
      y:0,
      width:(_width-60),
      height:30,
      fill:'#fff',
      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:'#4991E5',
      strokeWidth:1,
    })
    group.add(plRect)

    const plText=new Konva.Text({
      x:0,
      y:0,
      width:(_width-188)/2,
      height:60,
      fill:'#fff',
      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:'#4991E5',
      strokeWidth:1,
    })
    group.add(fdRect)

    const fdText=new Konva.Text({
      x:(_width-188)/2,
      y:0,
      width:(-width-188)/2,
      height:60,
      fill:'#fff',
      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:'#4991E5',
      strokeWidth:1,
    })
    czbhGroup.add(czbhRect)

    const czbhText=new Konva.Text({
      x:0,
      y:0,
      width:(_width-188),
      height:60,
      fill:'#fff',
      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:'#4991E5',
      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,setWorkers
  }
}