import Konva from "konva";

export default function (width,height,zyq){
  const x=width*0.455,y=260,_width=width*0.227,_height=height*0.713

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

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

  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,
    });
    bg.add(shape)
    shape.zIndex(0)
  }

  bg.add(container)

  bg.clipFunc(function(ctx) {
    ctx.rect(0, 5, _width, _height-10);
  });

  const sbList={
    二区:[
      {name:"一跨北\n高精度门式切割机",sbbm:'582520003'},
      {name:"一跨南\n等离子切割机",sbbm:'582920018'},
      {name:"一跨中\n高精度门式切割机",sbbm:'582520002'},
      {name:"三跨\n门式切割机",sbbm:'582520011'},
      {name:"三跨\n高精度门式切割机-火焰（双头）",sbbm:'582920013'},
    ],
    三区:[
      {name:"二跨\n门式切割机",sbbm:'042014050812000006'},
      {name:"二跨南\n激光切割机",sbbm:'052001050844089002'},
      {name:"二跨南\n数控等离子火焰切割机",sbbm:'582920020'},
      {name:"二跨北\n数控等离子火焰切割机",sbbm:'582920021'},
    ],
    四区:[
      {name:"四跨\n干式NC等离子切割机",sbbm:'582920001'},
      {name:"四跨\n干式NC等离子切割机",sbbm:'582920002'},
      {name:"四跨\n干式NC等离子切割机",sbbm:'582920003'},
      {name:"四跨\n干式NC等离子切割机",sbbm:'582920004'},

      {name:"五跨\n激光切割机",sbbm:'F10347'},
      {name:"五跨\n干式NC等离子切割机",sbbm:'582920006'},
      {name:"五跨\n干式NC等离子切割机",sbbm:'582920007'},
      {name:"五跨\n激光切割机",sbbm:'F10366'},

      {name:"六跨\n干式NC等离子切割机",sbbm:'582920009'},
      {name:"六跨\n干式NC等离子切割机",sbbm:'582920010'},
      {name:"六跨\n干式NC等离子切割机",sbbm:'582920011'},
      {name:"六跨\n干式NC等离子切割机",sbbm:'582920012'},
    ],
  }
  let selectedShape=null;
  let selectSbbm=null;
  const getSelectSbbm=function (){
    return zyq==='六区'?'光电':selectSbbm
  }
  sbList[zyq]?.forEach((item,index)=>{
    const sbGroup=new Konva.Group({
      x: 5,
      y: 5+index*_height/4-10,
      width: _width-10,
      height:_height/4-10,
    })

    sbGroup.on('click touchstart',function (){
      selected()
    })

    const selectObj = new Image();
    selectObj.src = require('@/assets/sliao/selected.png');
    let selectShape=null;
    const setSelectShape=function (shape){
      selectShape=shape
    }
    selectObj.onload = function () {
      const shape = new Konva.Image({
        x: _width-_width*0.15,
        y: 10,
        width: _width*0.12,
        height:_width*0.12,
        image: this,
        visible:false
      });
      sbGroup.add(shape)
      setSelectShape(shape)
    }

    function selected(){
      if (selectedShape){
        selectedShape.hide()
        if (selectedShape===selectShape){
          selectedShape=null
          return
        }
      }
      selectSbbm=item.sbbm
      selectedShape=selectShape
      selectedShape.show()
    }

    const sb = new Image();
    sb.src = require('@/assets/sb/xc2.png');
    sb.onload = function () {
      const shape = new Konva.Image({
        x: 0,
        y: 0,
        width: _width-10,
        height:_height/4-10,
        image: this,
      });
      const text=new Konva.Text({
        x: 0,
        y: 0,
        width: _width/4,
        height:_height/8-40,
        fill:'white',
        text:item.name,
        align:'center',
        verticalAlign:'middle',
      })
      sbGroup.add(text)
      sbGroup.add(shape)
      container.add(sbGroup)
    }
  })

  return {bg,container,getSelectSbbm}
}
