import MinePagePersonalFunctionsItem from '../../../viewmodel/MinePagePersonalFunctionsItem'

@Component
export default struct MinePagePersonFunctionUI {
  @Link personalData:MinePagePersonalFunctionsItem[]

  build() {
    Grid(){
      ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
        GridItem(){
          Row(){
            Column(){
              Image(item.imgSrc)
                .width('46lpx')
                .height('46lpx')
              Text(`${item.msg}`)
                .margin({top:'8lpx'})
                .width('50lpx')
                .height('23lpx')
                .fontColor($r('app.color.color_222222'))
                .fontSize('23lpx')
            }
            .alignItems(HorizontalAlign.Center)
            .width('100%')
            Blank()
              .layoutWeight(1)
            if(index % 4 < 3 && index != this.personalData.length-1){
              Text().backgroundColor($r('app.color.color_222222'))
                .opacity(0.1)
                .width('2lpx')
                .height('29lpx')
            }
          }
        }.onClick(()=>{
          console.log(index+"")
        }).width('169lpx')
        .height('117lpx')
      }, item => item)
    }
    .rowsTemplate('1fr 1fr')
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .height('234lpx')
    .margin({top:'31lpx',left:'23lpx',right:'23lpx' })
  }
}