import { PeopleShipRecommendHeadComponent } from './PeopleShipRecommendHeadComponent'
import { RmhRecommendDTO } from 'wdBean';

@Component
export struct PeopleShipRecommendComponent {
  @Prop rmhList: RmhRecommendDTO[] = []
  @Consume rmhSelectedList: string[]
  // 一键关注处理
  @Link oneKeyFollow: boolean
  // 换一换
  @Link changeButton: boolean


  build() {
    Column({ space: 0 }) {
      Row() {
        Image($r('app.media.redLine'))
          .width('3vp')
          .height('16vp')
          .objectFit(ImageFit.Cover)
          .margin({
            left: '16vp',
            right: '4vp'
          })
        Text('为你推荐优质号主')
          .height('30vp')
          .fontColor($r('app.color.color_222222'))
          .fontWeight(600)
          .fontSize($r('app.float.vp_18'))

        Blank()
        Button({ type: ButtonType.Normal, stateEffect: true }) {
          Row() {
            Text('换一换')
              .height('30vp')
              .fontColor($r('app.color.color_999999'))
              .fontWeight(400)
              .fontSize($r('app.float.vp_14'))
            Image($r('app.media.ic_refresh'))
              .width('14vp')
              .height('14vp')
              .objectFit(ImageFit.Cover)
          }
        }
        .margin({
          right: '16vp'
        })
        .backgroundColor(Color.Transparent)
        .onClick(() => {
          // 点击换一换
          if (!this.changeButton) {
            this.changeButton = true
          }
        })
      }
      .width('100%')
      .alignSelf(ItemAlign.Start)
      .margin({
        top: '10vp',
        bottom: '10vp'
      })

      Grid() {
        ForEach(this.rmhList, (item: RmhRecommendDTO) => {
          GridItem() {
            PeopleShipRecommendHeadComponent({
              rmhInfo: item
            })
              .onClick(() => {
                this.clickRecommendHeadSelected(item)
            })
          }
        }, (item: RmhRecommendDTO) => item.creatorId)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(20)
      .rowsGap(20)
      .height(Math.ceil(this.rmhList.length / 3.0) * 136)
      .backgroundColor(Color.Transparent)
      .margin({
        right: '20vp',
        left: '20pv'
      })

      // 为你推荐
      Button(this.rmhSelectedList.length == 0 ? '一键关注' : `一键关注 (${this.rmhSelectedList.length})`, { type: ButtonType.Normal, stateEffect: this.rmhSelectedList.length != 0 })
        .margin({
          top: '24vp',
          bottom: '10vp'
        })
        .width('120vp')
        .height('36vp')
        .backgroundColor(this.rmhSelectedList.length != 0 ? $r('app.color.color_ED2800') : $r('app.color.color_B0B0B0'))
        .borderRadius('3vp')
        .fontColor($r('app.color.color_999999'))
        .fontWeight(500)
        .fontSize($r('app.float.vp_14'))
        .fontColor(Color.White)
        .onClick(() => {
          // 点击一键关注
          if (!this.oneKeyFollow && this.rmhSelectedList.length > 0 ){
            this.oneKeyFollow = true
          }
        })
    }
    .width('100%')
  }

  // 选中
  private clickRecommendHeadSelected(rmhInfo: RmhRecommendDTO) {
    if (this.rmhSelectedList.length > 0 && rmhInfo ) {
      const num =  this.rmhSelectedList.indexOf(rmhInfo.creatorId)
      if ( num != -1) {
        this.rmhSelectedList.splice(num, 1)
      }else {
        this.rmhSelectedList.push(rmhInfo.creatorId)
      }
    }else {
      this.rmhSelectedList.push(rmhInfo.creatorId)
    }
  }
}