import Konva from "konva";

export default function (width,height){
  const x=0,y=0,_width=width*0.16,_height=height*0.945

  const container=function (){
    const x=width*0.5+30,y=45

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

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:_width,
      height:_height,
      stroke:'black',
      strokeWidth:1,
    })

    group.add(rect)

    return group
  }

  const dw=function (index,item={}){

    const alignSize=2
    const width=((_width-20)/alignSize),height=150
    const x=index%alignSize*width+index%alignSize*10+5,y=height*(Math.floor(index/alignSize))+(Math.floor(index/alignSize)+1)*10
    const group=new Konva.Group({
      x:x,
      y:y,
      width:width,
      height:height
    })

    const rect=new Konva.Rect({
      x:0,
      y:0,
      width:width,
      height:height,
      stroke:'black',
      strokeWidth:1,
    })

    group.add(rect)

    const text=new Konva.Text({
      x:0,
      y:0,
      width: width,
      height: height,
      fill:'black',
      text:`${item.name}\n${item.list.length}张`,
      align:'center',
      verticalAlign:'middle',
      fontSize:18
    })
    group.add(text)

    return group
  }

  return {
    container,dw
  }

}