import Konva from "konva";
import {zx} from "@/api/zyjh";
import { VXETable } from 'vxe-table'

const baifang=function (option={}) {
  const width=option.width,height=option.height,slList=option.dw,image=require('@/assets/gb.png')
  const _width=width*0.32,_height=height*0.713
  const x=width*0.16+25,y=260
  const bg=function (){
    const group=new Konva.Group({
      x:x,
      y:y,
      width:_width,
      height:_height
    })

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

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

  const bgGroup=bg();
  const slGroup=container()
  bgGroup.add(slGroup)
  slGroup.zIndex(1)

  let currSlist=null

  const thatHeight=height
  const gangban=function (index,item){
    const group=new Konva.Group({
      x:0,
      y:thatHeight-310-index*40,
      // draggable:true
    })

    group.setAttr('index',index)
    group.setAttr('item',item)

    slGroup.add(group)
    const {x}=group.absolutePosition()
    group.dragBoundFunc(function (pos){
      return {
        x:x,
        y:pos.y
      }
    })
    let _index=0
    let touchingFlag=false;
    group.on('mousedown touchstart',function ({evt}){
      const layer=this.parent.parent.parent

      const {clientX:_x,clientY:_y}=evt
      let x=_x,y=_y
      if (evt.type==='touchstart'){
        x=evt.targetTouches[0].clientX
        y=evt.targetTouches[0].clientY
      }
      touchingFlag=true
      setTimeout(()=>{
        const moving=this.isDragging()
        if (!moving){
          if (touchingFlag){
            this.draggable(false)

            const tmpGroup=this.clone()
            tmpGroup.x(x-50)
            tmpGroup.y(y-10)
            layer.add(tmpGroup)
            tmpGroup.draggable(true)
            tmpGroup.dragBoundFunc(function (pos){
              return{...pos}
            })
            tmpGroup.startDrag()

            const that=this
            tmpGroup.on('dragend',function (){
              const {x:thisX,y:thisY}=this.absolutePosition()
              for (const item of layer.children) {
                if(item.attrs.id==='sb'){
                  const {x,y}=item.absolutePosition()
                  const worker=JSON.parse(window.localStorage.getItem('worker'))
                  if ((thisX>=x&&thisY>=y&&thisX<=(x+item.attrs.width)&&thisY<=(y+item.attrs.height))&&!!worker){
                    const info=this.getAttr('item')
                    const zyjh=JSON.parse(window.localStorage.getItem('hxfk'))
                    console.log(zyjh)
                    if (!zyjh){
                      VXETable.modal.message({content: '请先选择待报工的派工单', status: 'warning'})
                      this.remove()
                      that.visible(true)
                      return
                    }
                    if (zyjh.dcCh!==info.czbh&&zyjh.dcPl!==info.pl&&zyjh.dcFd!==info.fd&&zyjh.tzbh!==info.tlth){
                      VXETable.modal.message({content: '板材与工单未对应', status: 'warning'})
                      this.remove()
                      that.visible(true)
                      return
                    }
                    zx({
                      field:'hxfkrq',
                      zxZtName:'HXFK',
                      list:[{
                        id:zyjh.id,
                        hxfkry: worker.userCode,
                        zt:zyjh.zt
                      }],
                      ycldwInfo:info
                    }).then(res=>{
                      if (res.success){
                        window.localStorage.removeItem('hxfk')
                        this.remove()
                        that.remove()
                      }else{
                        this.remove()
                        that.visible(true)
                      }
                    })
                  }else{
                    this.remove()
                    that.visible(true)
                  }
                }
              }
            })
            this.visible(false)
          }
        }
      },500)

    })

    group.on('mouseup touchend',function (){
      touchingFlag=false
    })

    group.on('dragstart',function (){
      const {x,y}=this.absolutePosition()
      this.startPos={
        x:x,
        y:y
      }
    })
    group.on('dragmove',function (){
      if(_index===0){
        _index=this.getAttr('index')
      }
      this.zIndex(7)
      const {y:thisY}=this.absolutePosition()

      const dir=thisY-this.startPos.y>0?-40:40

      const children=slGroup.children

      for (const child of children) {
        if (child===this){
          return
        }

        const {y:thatY}=child.absolutePosition()
        const moveDir=child.getAttr('moveDir')||0
        if (thisY>=thatY&&thisY<=thatY+40&&moveDir!==dir){
          child.setAttr('moveDir',dir);
          _index+=dir>0?1:-1
          child.move({
            y:dir
          })
          this.startPos={
            x:x,
            y:thisY
          }
        }

      }
    })

    group.on('dragend',function (){
      const index=this.getAttr('index')
      const element = currSlist.splice(index-1, 1)[0];
      currSlist.splice(_index-1, 0, element);
      this.setAttr('index',_index)
      _index=0
      slGroup.destroyChildren()
      handler(currSlist)
    })

    const indexRect=new Konva.Rect({
      x:0,
      y:0,
      width:40,
      height:40,
      stroke:'white',
      strokeWidth:1,
    })
    //group.add(indexRect)

    const indexText=new Konva.Text({
      x:0,
      y:0,
      width:40,
      height:40,
      fill:'white',
      text:index,
      align:'center',
      verticalAlign:'middle',
    })
    group.add(indexText)

    //层  规格,套料图 船号,上料日期,计划切割日期
    const imageObj = new Image();
    const imgSize=200
    imageObj.src = image;
    imageObj.onload = function () {
      const shape = new Konva.Image({
        x: 40,
        y: 0,
        width: imgSize,
        height:40,
        image: imageObj,
      });
      group.add(shape)
      const gbText=new Konva.Text({
        x: 40,
        y: 0,
        width: imgSize,
        height:30,
        fill:'black',
        text:`${item.tlth}\n${item.wph||''},${item.wpgg}`,
        align:'center',
        verticalAlign:'middle',
      })
      group.add(gbText)
    }

    const concent=new Konva.Text({
      x: imgSize+60,
      y: 0,
      width: imgSize-20,
      height:40,
      fill:'white',
      text:`${item.czbh},${item.pl},${item.fd},工单号:${item.djh||''}\n上料:${item.bfrq||''},切割:${item.qgjhrq||''}`,
      align:'center',
      verticalAlign:'middle',
    })
    group.add(concent)

    return group
  }

  function handler(slList){
    currSlist=slList;
    for (let i = 1; i <= slList.length; i++) {
      const item=slList[i-1]
      const _group=gangban(i,item,item.length)
      slGroup.add(_group)
    }
  }

  return {
    container,slGroup,handler,bgGroup
  }
}

export default baifang
