<template>
  <div id="sliao" class="sliao" ref="sliao" >sliao</div>
</template>

<script>
import Konva from "konva";
export default {
  name:'SLiao',
  data(){
    return {
      title:'上  料  作  业  区',
      stage:null,
      layer:null,
      width:'',
      height:'',
      gbImage:require('@/assets/gb.png'),
      sljhGroup:null,
      sljhList:[],//上料计划
      slGroup:'',
      slList:'',
      dwGroup:'',
      qyList:[//区域,每个内部包含垛位信息
        {
          name:'一区',
          dw:[
            {
              name:'一剁',
              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
            },
            {
              name:'二剁',
              //list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
            }
          ]
        },
        {
          name:'二区',
          dw:[
            {
              name:'一剁',
              list:['板材1','板材2','板材3','板材4','板材5','板材6','板材7','板材8','板材9','板材10','板材11','板材12','板材13','板材14',]
            }
          ]
        },
      ],
      msg:'板材1放入一剁三层',
      worker:'',
    }
  },
  created(){
    const actions = [
      {
        message: "fn1", // message消息与func函数执行为映射关系
        func: (params1, params2) => {
          function fib(n) {
            if ((n == 1) | (n == 2)) {
              return 1;
            } else {
              return fib(n - 1) + fib(n - 2);
            }
          }
          return fib(30);
        },
      },
      {
        message: "fn2",
        func: () => {
          function fib(n) {
            if ((n == 1) | (n == 2)) {
              return 1;
            } else {
              return fib(n - 1) + fib(n - 2);
            }
          }
          return fib(30);
        },
      },
      {
        message: "fn3",
        func: () => {
          function fib(n) {
            if ((n == 1) | (n == 2)) {
              return 1;
            } else {
              return fib(n - 1) + fib(n - 2);
            }
          }
          // throw "一个报错挂了,其他的也跟着挂了,走.catch"; // 抛出错误(的确很像Promise.all())
          return fib(30);
        },
      },
    ];
    // 2. 根据消息函数数组去create创建一个worker，并存到data变量中去，以便于后续随时使用
    this.worker = this.$worker.create(actions);
  },
  mounted() {
    this.worker
      .postAll()
      .then((res) => {
        this.loadingOne = false;
      })
      .catch((err) => {
        this.loadingOne = false;
      });

    this.initKonvaStage();
    //fixme 调试用
    this.drawMsg()
    this.drawSljhItem([
      {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX006',perQy:'一区',perDw:'一剁',perCeng:'三层'},
      {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX007',perQy:'一区',perDw:'一剁',perCeng:'三层'},
      {czbh:'G175K-4',pl:'001',tzbh:'B006N4PX008',perQy:'一区',perDw:'一剁',perCeng:'三层'},
    ])
  },
  methods: {
    //料场垛位实际情况
    drawSlItem(slList){
      for (let i = 1; i <=slList.length; i++) {
        const gb=slList[i-1]
        const group=new Konva.Group({
          x:0,
          y:this.height-260-i*40,
        })
        this.slGroup.add(group)
        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:i,
          align:'center',
          verticalAlign:'middle',
        })
        group.add(indexText)

        //层  规格,套料图 船号,上料日期,计划切割日期
        const imageObj = new Image();
        const imgSize=300
        imageObj.src = this.gbImage;
        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:40,
            fill:'white',
            text:gb+',12*2830*13090',
            align:'center',
            verticalAlign:'middle',
          })
          group.add(gbText)
        }

        const concent=new Konva.Text({
          x: imgSize+40,
          y: 0,
          width: imgSize,
          height:40,
          fill:'white',
          text:'G175K-4,上料:2024/07/01,切割:2024/07/04',
          align:'center',
          verticalAlign:'middle',
        })
        group.add(concent)
      }
    },
    //绘制上料计划钢板信息
    drawSljhItem(list){
      const itemWith=80;
      const itemHeight=108
      for (let i = 0; i < list.length; i++) {
        const item=list[i];
        const qyGroup=new Konva.Group({
          x:(i+1)*5+i*itemWith,
          y:10,
          width:itemWith,
          height:itemHeight,
        })
        const rect=new Konva.Rect({
          x:0,
          y:0,
          width:itemWith,
          height:itemHeight,
          stroke:'white',
          strokeWidth:1,
        })
        qyGroup.add(rect)
        const text=new Konva.Text({
          x:0,
          y:0,
          width:itemWith,
          height:itemHeight,
          lineHeight:1,
          stroke:'blue',
          strokeWidth:0.1,
          text:item.czbh+'\n'+item.pl+'\n'+item.tzbh+'\n建议位置\n'+item.perQy+'\n'+item.perDw+'\n'+item.perCeng,
          align:'center',
          verticalAlign:'middle',
        })
        qyGroup.add(text)
        this.sljhGroup.add(qyGroup)
      }
    },
    initKonvaStage(){
      this.width=this.$refs.sliao.clientWidth
      this.height=this.$refs.sliao.clientHeight

      this.stage = new Konva.Stage({
        container: "sliao",
        width: this.width,
        height: this.height,
      });
      //this.stage.container().style.cursor = "sw-resize";

      this.layer = new Konva.Layer();
      this.stage.add(this.layer)
      this.layer.draw();

      this.drawTitle()
      //构建布局区域
      //上料计划显示区
      this.drawSljh()
      //区域垛位选择区
      this.drawQy()
      //上料功能区
      this.drawSl();
      //移垛记录区
      this.drawYd();
    },
    //绘制移垛记录区
    drawYd(){
      this.drawContainer({
        x:15+this.width*0.6-15+5,
        y:this.height-this.height*0.8+10,
        width: this.width*0.4-20,
        height: this.height*0.8-20,
        stroke:'blue',
        strokeWidth:1,
      })
    },
    //绘制上料功能区
    drawSl(){
      const {qyGroup}=this.drawContainer({
        x:15+this.width*0.2+5,
        y:this.height-this.height*0.8+10,
        width: this.width*0.4-20,
        height: this.height*0.8-20,
        stroke:'blue',
        strokeWidth:1,
      })
      this.slGroup=qyGroup
    },
    drawDw(qyGroup,qy,size){
      if (this.dwGroup){
        this.dwGroup.destroyChildren()
      }
      const _group=this.dwGroup=new Konva.Group({
        x:54+size,
        y:15,
        width: size,
        height: size,
      })
      qyGroup.add(_group)
      for (let i = 0; i < qy.dw.length; i++) {
        const dw=qy.dw[i]
        const group=new Konva.Group({
          x:0,
          y:i*5+i*size,
          width: size,
          height: size,
        })
        const rect=new Konva.Rect({
          x:0,
          y:0,
          width: size,
          height: size,
          stroke:'white',
          strokeWidth:1,
        })
        group.add(rect)
        const text=new Konva.Text({
          x:0,
          y:0,
          width: size,
          height: size,
          fill:'white',
          text:qy.name+'\n'+dw.name,
          align:'center',
          verticalAlign:'middle',
          fontSize:20
        })
        group.add(text)
        group.on('click touchstart',(evt)=>{
          this.slGroup.destroyChildren()
          this.drawSlItem(dw.list||[])
        })
        _group.add(group)
      }
    },
    //绘制垛位选择区
    drawQy(){
      const {quRet,qyGroup}=this.drawContainer({
        x:15,
        y:this.height-this.height*0.8+10,
        width: this.width*0.2,
        height: this.height*0.8-20,
        stroke:'blue',
        strokeWidth:1,
      })
      const size=120;
      for (let i = 0; i < this.qyList.length; i++) {
        const qy=this.qyList[i]
        const group=new Konva.Group({
          x:23,
          y:15+i*5+i*size,
          width: size,
          height: size,
        })
        const rect=new Konva.Rect({
          x:0,
          y:0,
          width: size,
          height: size,
          stroke:'white',
          strokeWidth:1,
        })
        group.add(rect)
        const text=new Konva.Text({
          x:0,
          y:0,
          width: size,
          height: size,
          fill:'white',
          text:qy.name,
          align:'center',
          verticalAlign:'middle',
          fontSize:20
        })
        group.add(text)
        group.on('click touchstart',(evt)=>{
          this.drawDw(qyGroup,qy,size)
        })
        qyGroup.add(group)
      }
    },
    //上料计划选择区
    drawSljh(){
      const {quRet,qyGroup}=this.drawContainer({
        x:15,
        y:65,
        width: this.width-30,
        height: this.height*0.2-60,
        stroke:'blue',
        strokeWidth:1,
      })
      qyGroup.on('click touchstart',(evt)=>{
      })
      this.sljhGroup=qyGroup
    },
    drawMsg(){
      this.drawText({
        x:15,
        y:50,
        width:this.width-30,
        height:20,
        lineHeight:1,
        stroke:'white',
        strokeWidth:0.1,
        text:this.msg,
        align:'center',
      })
    },
    drawTitle(){
      this.drawText({
        x:15,
        y:8,
        width:this.width-30,
        height:20,
        lineHeight:1,
        stroke:'blue',
        strokeWidth:2,
        text:this.title,
        align:'center',
        fontSize:32,
      })
    },
    drawText(option){
      const text=new Konva.Text(option)
      this.layer.add(text)
      return text
    },
    //绘制区域
    drawContainer(option){
      const quRet=this.drawRect(option)
      const qyGroup=this.drawGroup(option)

      return {
        quRet,qyGroup
      }
    },
    drawGroup(option){
      const qyGroup=new Konva.Group(option);
      this.layer.add(qyGroup)
      return qyGroup
    },
    drawRect(option){
      const quRet=new Konva.Rect(option);
      this.layer.add(quRet)
      return quRet
    }
  }
}

</script>

<style>
#sliao {
  background: #ddd;
  overflow: hidden;
  width: 100%;
  height:100vh;
  aspect-ratio: 16/9;
}
</style>
