<template>
  <div class="container">
    <div id="pwpg" class="pwpg" ref="pwpg"></div>
    <ZyjhSelectComp id="selectComp" ref="selRef"  @initWorkers="initWorkers"/>
    <TipsComp />
    <Drawer ref="drawer"/>
  </div>
</template>

<script>
import container from "./comps/container";
import drawTitle from './comps/title'
import workers from "./comps/person";
import drawDw from './comps/dw'
import drawPgd from './comps/pgd'
import baifang from "./comps/baifang";
import {sljh} from "@/views/zyjhzx/lliaofkui/comps/sljh";
import {bgControl, getPgd, getPgd2, getYcldw, shangLiao} from "@/api/zyjh";
import {getBzryList} from "@/api/sjzx/bzzGL";
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
import TipsComp from "@/views/zyjhzx/components/TipsComp.vue";
import Drawer from "@/views/zyjhzx/components/Drawer.vue";

export default {
  name:'PWanFKui',
  components: {Drawer, TipsComp, ZyjhSelectComp},
  data(){
    return {
      title:'理 料 作 业 报 工',
      width:0,
      height:0,
      stage:null,
      layer:null,
      sljhItemList:[],
      sljhGroup:null,
      pgdGroup:null,
      drawGd:null,
      dw:[],
      dwGroup:null,
      pgd:[],
      slGroup:null,
      getCurrentWorker:null,
      currentWorker:null,
      setWorkers:null,
      workers:null,
      drawItem:null,
      workerGroup:null,
      person:null,
      deviceId:null,
      kwBm:[
        {"bmsm": "2跨超长超宽曲板", "bmlb": "QGKW", "bm": "10"},
        {"bmsm": "2跨T型材腹板", "bmlb": "QGKW", "bm": "11"},
        {"bmsm": "2跨激光切割板", "bmlb": "QGKW", "bm": "12"},
        {"bmsm": "3跨曲板", "bmlb": "QGKW", "bm": "13"},
        {"bmsm": "3跨厚板", "bmlb": "QGKW", "bm": "14"},
        {"bmsm": "4跨普通板", "bmlb": "QGKW", "bm": "15"},
        {"bmsm": "7跨型板", "bmlb": "QGKW", "bm": "16"},
        {"bmsm": "光电", "bmlb": "QGKW", "bm": "17"},
        {"bmsm": "2跨T型材面板", "bmlb": "QGKW", "bm": "5"},
        {"bmsm": "3跨平铁", "bmlb": "QGKW", "bm": "6"},
        {"bmsm": "1跨平直大板", "bmlb": "QGKW", "bm": "7"},
        {"bmsm": "1跨进线板", "bmlb": "QGKW", "bm": "8"},
        {"bmsm": "2跨超长超宽板", "bmlb": "QGKW", "bm": "9"}
      ]
    }
  },
  mounted() {
    Array.prototype.r = function(str){
      const [start,end]=str.split(':').map(Number);
      return this.slice(start, end);
    }
    this.$socket.open()
    this.wsSubscribe()
    this.initKonvaStage();
  },
  created(){
    this.deviceId=this.$route.query.deviceId||''
    // window.addEventListener('resize', this.initKonvaStage)
  },
  sockets:{
    zyjhzx(data){
      if (this.deviceId!==data.msg.deviceId&&data.msg.actionType==='开始报工'){
        return
      }
      //工单号尾号长度
      const djhWhLengh=3
      const tmpList=this.sljhItemList.filter(item=>item.djh===data.djh||item.djh.slice(-djhWhLengh)===data.msg.orderNumber)
      if (tmpList.length>1){
        this.$message.warning('短号有重复,请使用全工单号重新派工!!!')
        return
      }
      let index=0
      for (const item of this.sljhItemList) {
        if (item.djh===data.djh||item.djh.slice(-djhWhLengh)===data.msg.orderNumber){
          // if (!!this.currentDw.tzbh&&item.kw===this.currentDw.tzbh){
          //
          // }else{
          //   this.$message.warning(`理料垛位错误,请放入${this.kwNameFormat(item.kw)}所在垛位`)
          // }
          const tmpZxData={
            id:item.id,
            lldw:this.currentDw.id,
            llcs:this.dw[this.currentDwIndex].list.length+1,
            llfkry:this.getCurrentWorker()?.userCode
          }
          const data={
            ydjh:tmpZxData,
            ydid:item.id,
            dwId:this.currentDw.id,
            ceng:this.dw[this.currentDwIndex].list.length+1,
            czbh:item.dcCh,
            pl:item.dcPl,
            fd:item.dcFd,
            kw:item.kw,
            zl:item.zl,
            tlth:item.tzbh,
            wph:item.wpxh,
            wpgg:item.wpgg,
            sljhrq:item.sljhrq,
            qgjhrq:item.qgjhrq,
            bfr:this.currentWorker?.userCode,
            type:'LLJ'
          }

          shangLiao(data).then(res=>{})

          this.sljhItemList.splice(index,1)
          this.sljhGroup.destroyChildren()
          this.drawSljhItem(this.sljhItemList.r('0:20'))
          break
        }
        index++
      }
    }
  },
  methods:{
    wsSubscribe() {
      this.sockets.subscribe('llComplete', data => {
        if (this.currentDw && this.currentDw.id === data.dwId) {
          if (this.slGroup) {
            this.slGroup.destroyChildren()
          }
          this.dw[this.currentDwIndex].list.push(data)
          this.drawBaiFang(this.dw[this.currentDwIndex].list)
        } else {
          this.dw[data.dwId].list.push(data)
        }
        this.initSljhItem()
        this.initDw()
      })
    },
    initPgd(pgd={}){
      const group=this.drawGd(pgd)
      this.pgdGroup.add(group)
    },
    initDwInfo(index,dw){
      if (this.slGroup){
        this.slGroup.destroyChildren()
      }
      this.canSl=true
      this.currentDw=dw
      this.currentDwIndex=index
      !!dw&&this.drawBaiFang(dw.list)
    },
    initBaiFang(){
      const {slGroup,handler,bgGroup:slBgGroup}= baifang({width:this.width,height:this.height})
      this.slGroup=slGroup
      this.layer.add(slBgGroup)
      this.drawBaiFang=handler
    },
    drawSljhItem(list){
      if (this.sljhGroup){
        this.sljhGroup.destroyChildren()
      }
      for (let i = 0; i < list.length; i++) {
        const qyGroup=this.drawItem(i,list[i])
        const _layer=this.layer
        const _sljhGroup=this.sljhGroup;
        let touchingFlag=false;
        const that=this
        qyGroup.on('click tap',function (){
          that.initPgd(list[i])
        })
        qyGroup.on('mousedown touchstart',function ({evt}){
          const worker=that.currentWorker;
          if (!that.canSl||!worker){
            return
          }

          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;
          const _that=this
          setTimeout(()=>{
            const movingFlag=_sljhGroup.isDragging()
            if (!movingFlag){
              if (touchingFlag){
                _sljhGroup.draggable(false)
                const tmpGroup=_that.clone();
                tmpGroup.x(x-10)
                tmpGroup.y(y-10)
                _layer.add(tmpGroup)
                tmpGroup.draggable(true)
                tmpGroup.dragBoundFunc(function (pos){
                  return{...pos}
                })
                tmpGroup.startDrag()
                _that.visible(false)

                tmpGroup.on('dragend',function (){
                  const {x:thisX,y:thisY}=this.absolutePosition()
                  const {x,y}=that.slGroup.absolutePosition()
                  const maxX=x+that.width*0.4-20
                  const maxY=y+that.height*0.8-20
                  if(thisX>=x&&thisY>=y&&thisX<=maxX&&thisY<=maxY){
                    const item=this.getAttr('item')
                    // if (!!that.currentDw.tzbh&&item.kw===that.currentDw.tzbh){
                    //
                    // }else{
                    //   that.$message.warning(`理料跨位错误,请放入${that.kwNameFormat(item.kw)}所在垛位`)
                    //   this.remove()
                    //   _that.visible(true)
                    // }
                    item.lldw=that.currentDw.id
                    item.llcs=that.dw[that.currentDwIndex].list.length+1
                    item.llfkry=that.getCurrentWorker()?.userCode
                    const tmpZxData={
                      id:item.id,
                      lldw:that.currentDw.id,
                      llcs:that.dw[that.currentDwIndex].list.length+1,
                      llfkry:that.getCurrentWorker()?.userCode
                    }
                    const data={
                      ydjh:tmpZxData,
                      ydid:item.id,
                      dwId:that.currentDw.id,
                      ceng:that.dw[that.currentDwIndex].list.length+1,
                      czbh:item.dcCh,
                      pl:item.dcPl,
                      fd:item.dcFd,
                      kw:item.kw,
                      zl:item.zl,
                      tlth:item.tzbh,
                      wph:item.wpxh,
                      wpgg:item.wpgg,
                      sljhrq:item.sljhrq,
                      qgjhrq:item.qgjhrq,
                      bfr:that.currentWorker?.userCode,
                      type:'LLJ'
                    }

                    shangLiao(data).then(res=>{})

                    this.remove()

                    that.sljhItemList.splice(this.getAttr('index'),1)
                    that.sljhGroup.destroyChildren()
                    that.drawSljhItem(this.sljhItemList.r('0:20'))
                  }else{
                    this.remove()
                    _that.visible(true)
                  }
                  _sljhGroup.draggable(true)
                })
              }
            }
          },500)
        })

        qyGroup.on('mouseup touchend',function (){
          touchingFlag=false;
          this.draggable(false)
          _sljhGroup.draggable(true)
        })
      }
    },
    initDw(){
      const that=this
      getYcldw({type:'llj'}).then(res=>{
        if(this.dwGroup){
          this.dwGroup.destroyChildren()
        }
        const {container,dw}=drawDw(this.width,this.height,that.initDwInfo)
        const {bgGroup,group}=container()
        this.dwGroup=group
        this.dw=res.data
        this.layer.add(bgGroup)

        for (let i=0;i<res.data.length;i++){
          const item=res.data[i]
          const dwGroup=dw(i,item)
          group.add(dwGroup)
        }
      })
    },
    initWorkers(bzType){
      const that=this
      if (this.workerGroup){
        this.workerGroup.destroyChildren()
      }else{
        const {container,person,getCurrentWorker}=workers(this.width,this.height)
        this.getCurrentWorker=getCurrentWorker
        this.person=person
        const {bgGroup,group}=container()
        this.workerGroup=group
        this.layer.add(bgGroup)
      }
      this.workerGroup.x(0)
      this.workerGroup.y(0)
      getBzryList({zyq:this.$route.query.zyq,zt:bzType}).then(res=>{
        this.workers=res.data

        that.setWorkers(res.data)
        for (let i=0;i<res.data.length;i++){
          const item=res.data[i]
          const worker=this.person(i,item)
          worker.on('click touchstart',function (){
            that.currentWorker=item
            // getPgd({field:'llry',user:item.userCode,zt:'41'}).then(res=>{
            //   that.sljhItemList=res.data
            //   that.drawSljhItem(res.data)
            // })
          })
          this.workerGroup.add(worker)
          worker.zIndex(1)
        }
      })
    },
    initSljhItem(){
      bgControl({}).then(res=>{
        const gx=res.data||'1'
        if (gx==='1'){
          const data={
            zt:'32',
          }
          getPgd(data).then(res => {
            this.sljhItemList=res.data
            this.drawSljhItem(this.sljhItemList.r('0:20'))
          })
        }
        if (gx==='0'){
          getPgd2({field:'llfkry'}).then(res=>{
            this.sljhItemList=res.data
            this.drawSljhItem(this.sljhItemList.r('0:20'))
          })
        }
      })

    },
    initKonvaStage(){
      this.width=this.$refs.pwpg.clientWidth
      this.height=this.$refs.pwpg.clientHeight
      const {stage,layer}=container(this.width,this.height,'pwpg')
      this.stage=stage
      this.layer=layer

      const titel=drawTitle(this.width,this.height,this.title)
      const that=this
      titel.on('click tap',function (){
        that.$refs.drawer.show()
      })
      this.layer.add(titel)

      this.initDw()

      const {container:pgdContainer,drawGd,setWorkers}=drawPgd(this.width,this.height)
      this.setWorkers=setWorkers
      this.drawGd=drawGd
      this.pgdGroup=pgdContainer()
      this.layer.add(this.pgdGroup)

      const {layer:sljhLayer,group:sljhGroup,drawItem}=sljh(this.width,this.height)
      this.drawItem=drawItem
      this.sljhGroup=sljhGroup
      this.stage.add(sljhLayer)

      this.initBaiFang()

      this.initSljhItem()

      this.initWorkers(this.$refs.selRef.getData().bzType)
    },
    kwNameFormat(code){
      for (const item of this.kwBm) {
        if (item.bm===code){
          return item.bmsm
        }
      }
    }
  }
}

</script>

<style>
#selectComp {
  width:50%;
  height: auto;
  position: absolute;
  top:10px;
  left:20px;
  border: none;
  margin: 0;
}

#pwpg {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  aspect-ratio: 16/9;
}

.container{
  background: #ddd;
}
</style>
