@Component
export struct CustomBottomFuctionUI {
  @Consume deleteNum: number
  @Consume isAllSelect: boolean
  selectAllCallback: (isOn: boolean) => void = () => {
  }
  confirmCallback: () => void = () => {
  }
  build() {
    RelativeContainer(){
      Row(){
        Image(this.isAllSelect?$r("app.media.MyCollection_selected_icon"):$r("app.media.MyCollection_unselected_icon"))
          .width(20)
          .height(20)
          // .margin({right:'31lpx' })
          .margin({right: 31 })

        Text(this.isAllSelect?'取消全选':'全选')
          .fontColor($r('app.color.color_222222'))
          .backgroundColor(Color.White)
      }
      .id("allSelect_Button")
      // .margin({left:'31lpx'})
      .margin({left: 31})
      .alignRules({
        center: {anchor: "__container__", align: VerticalAlign.Center},
        left: {anchor: "__container__", align: HorizontalAlign.Start}
      })
      .onClick(()=>{
        this.isAllSelect = !this.isAllSelect;
        this.selectAllCallback(this.isAllSelect)
      })


      Button('删除'+ (this.deleteNum === 0 ? '':'('+this.deleteNum.toString()+')'))
        .type(ButtonType.Normal)
        .fontColor(this.deleteNum === 0?$r('app.color.color_B0B0B0'):$r('app.color.color_ED2800'))
        .backgroundColor(Color.White)
        .id("delete_Button")
        .alignRules({
          center: {anchor: "__container__", align: VerticalAlign.Center},
          right: {anchor: "__container__", align: HorizontalAlign.End}
        })
        // .margin({right:'31lpx'})
        .margin({right: 31})
        .onClick(()=>{
          this.confirmCallback()
        })
    }
    .height('6%')
    .width('100%')
    .backgroundColor(Color.White)
  }
}