import Konva from "konva";
import {daoduo} from "@/api/zyjh";

const baifang=function (option={}) {
  const width=option.width,height=option.height,image=require('@/assets/gb.png')
  const _width=width*0.4-50,_height=height*0.715
  const x=width*0.6+40,y=262

  const slGroup=new Konva.Group({
    x:0,
    y:0,
    width:_width,
    height:_height,
    draggable:true,
    dragBoundFunc:function (pos){
      return {
        x:x,
        y:pos.y
      }
    },
  })

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

  bgGroup.add(slGroup)

  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)
  }


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

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

    slGroup.add(group)
    const {x}=group.absolutePosition()
    group.dragBoundFunc(function (pos){
      return {
        x:x,
        y:pos.y
      }
    })
    let _index=0

    group.on('dragstart',function (){
      const {x,y}=this.absolutePosition()
      this.startPos={
        x:x,
        y:y
      }
    })

    const movedList=[]
    group.on('dragmove',function (){
      if(_index===0){
        _index=this.getAttr('index')
      }
      this.zIndex(slList.length-1)
      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
          })
          const movedIndex=movedList.indexOf(child)
          if (movedIndex===-1){
            movedList.push(child)
          }else {
            movedList.splice(movedIndex, 1);
            movedList.push(child)
          }
          this.startPos={
            x:x,
            y:thisY
          }
        }
      }
    })

    group.on('dragend',function (){
      const index=this.getAttr('index')
      const item=this.getAttr('item')
      const mList=[]
      for (const it of movedList) {
        mList.push(it.getAttr('item'))
      }
      const data={
        id:item.id,
        lastCeng:item.ceng,
        lastDuo:item.dwId,
        ceng:_index,
        duo:item.dwId,
        movedList:mList
      }
      console.log(_index)
      // const element = slList.splice(index-1, 1)[0];
      // slList.splice(_index-1, 0, element);
      // this.setAttr('index',_index)
      // _index=0
      daoduo(data).then(res=>{
        if (res.success){
          const element = slList.splice(index-1, 1)[0];
          slList.splice(_index-1, 0, element);
          this.setAttr('index',_index)
          _index=0
          handler(slList)
        }else {

        }
      })
    })

    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: 60,
        y: 0,
        width: imgSize,
        height:40,
        image: imageObj,
      });
      group.add(shape)
      const gbText=new Konva.Text({
        x: 60,
        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+40,
      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)
  }

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

  return {
    slGroup,handler,bgGroup
  }
}

export default baifang
