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:'583020006'},
      {name:"三跨\n划线机",sbbm:'042014080111000007'},
    ],
    三区:[
      {name:"二跨东\n数控划线机",sbbm:'052001080111018532'},
    ],
    四区:[
      {name:"四跨\n数控划线机",sbbm:'583020001'},

      {name:"五跨\n数控划线机",sbbm:'583020003'},
      {name:"五跨\n数控划线机",sbbm:'583020005'},

      {name:"六跨\n数控划线机",sbbm:'583020002'},
      {name:"六跨\n数控划线机",sbbm:'583020004'},
    ],
  }

  let selectedShape=null;
  let selectSbbm=null;
  const getSelectSbbm=function (){
    return 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}
}
