<template>
  <div class="container">
    <div id="pwpg" class="pwpg" ref="pwpg"></div>
    <SliaoSearch v-if="show" ref="sliaoSearch" @search="search" @paigong="paigong" @plGylx="plGylx" :workers="workers" />
    <LjianPgd v-if="show" id="ljianpgd" ref="hxpgd" @initPgd="initPgd" @search="search" :worker="currentWorker" :workers="workers" />
    <ZyjhSelectComp id="selectComp" ref="selRef"  @initWorkers="initWorkers"/>
    <TipsComp />
  </div>
</template>

<script>
import container from "./comps/container";
import drawTitle from './comps/title'
import workers from "./comps/person";
import drawPgd from './comps/pgd'
import {getBzryList} from "@/api/sjzx/bzzGL";
import ZyjhSelectComp from "@/views/zyjhzx/components/SelectComp.vue";
import LjianPgd from "@/views/zyjhzx/ljian/comps/LjianPgd.vue";
import SliaoSearch from "@/views/zyjhzx/components/SliaoSearch.vue";
import {getQmPgd} from "@/api/jhzxgl/pgd";
import initSearch from "@/views/zyjhzx/components/search";
import {endLoading, startLoading} from "@/utils";
import TipsComp from "@/views/zyjhzx/components/TipsComp.vue";

export default {
  name:'PWanFKui',
  components: {TipsComp, SliaoSearch, LjianPgd, ZyjhSelectComp},
  data(){
    return {
      title:'零   件   作   业   派   工',
      width:0,
      height:0,
      stage:null,
      layer:null,
      pgdGroup:null,
      drawGd:null,
      pgd:[],
      currentWorker:null,
      setWorkers:null,
      workers:null,
      workerGroup:null,
      person:null,
      show:false
    }
  },
  mounted() {
    this.$store.dispatch('page/handler', true)
    this.initKonvaStage();
  },
  created(){
    window.addEventListener('resize', this.initKonvaStage)
  },
  sockets:{},
  methods:{
    plGylx(gylx,worker){
      this.$refs.hxpgd.plGylx(gylx,worker)
    },
    paigong(){
      this.$refs.hxpgd.paigong()
    },
    initPgd(pgd={}){
      const group=this.drawGd(pgd)
      this.pgdGroup.destroyChildren()
      this.pgdGroup.add(group)
    },
    initWorkers(bzType){
      if (this.workerGroup){
        this.workerGroup.destroyChildren()
      }else{
        const {container,person,getCurrentWorker}=workers(this.width,this.height)
        this.person=person
        this.getCurrentWorker=getCurrentWorker
        const {bgGroup,group}=container()
        this.workerGroup=group
        this.layer.add(bgGroup)

      }
      getBzryList({zyq:this.$route.query.zyq,zt:bzType}).then(res=>{
        this.workers=res.data
        this.show=true
        this.setWorkers(res.data)
        const that=this
        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
            that.search(item)
          })
          this.workerGroup.add(worker)
        }
      })
    },
    search(worker=null){
      const data=this.$refs.sliaoSearch.getQueryParam()

      const searchParam={
        dcch:data.dcCh,
        pl:data.dcPl,
        fd:data.dcFd,
      }
      if (worker){
        searchParam.qscry=worker.userCode
        // searchParam.dmry=worker.userCode
        // searchParam.pkry=worker.userCode
      }else{
        if (!searchParam.dcch){
          this.$message.warning('请选择船号')
          endLoading()
          return
        }
      }
      startLoading()
      // !!this.currentWorker&&(searchParam.worker=this.currentWorker)
      getQmPgd(searchParam).then((res) => {
        this.$refs.hxpgd.initData(res.data)
      })
    },
    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)
      this.layer.add(titel)

      this.initWorkers(this.$refs.selRef.getData().bzType)

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

      const {group}=initSearch()
      this.layer.add(group)
    },
  }
}

</script>

<style>
.vxe-button{
  top: 0px;
  width: 80px;
  height: 22px !important;
}

.vxe-input{
  width: 115px;
}

#searchPl {
  position: absolute;
  top:45px;
  left:15px;
  border: none;
  margin: 0;
}

#searchPl input{
  border: none;
  background: none;
  outline: none;
}

#selectComp {
  width:50%;
  height: auto;
  position: absolute;
  top:10px;
  left:20px;
  border: none;
  margin: 0;
}
#ljianpgd {
  width:59.6%;
  height: auto;
  position: absolute;
  top:76px;
  left:165px;
  border: none;
  margin: 0;
}

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

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