import { PeopleShipRecommendHeadComponent } from './PeopleShipRecommendHeadComponent'
import { RmhRecommendDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import { LottieView } from '../lottie/LottieView';
import { HttpUtils } from 'wdNetwork';
import { FastClickUtil } from 'wdKit';

@Component
export struct PeopleShipRecommendComponent {
  @Prop rmhList: RmhRecommendDTO[] = []
  @Consume rmhSelectedList: string[]
  // 一键关注处理
  @Link oneKeyFollow: boolean
  // 换一换
  @Link changeButton: boolean
  @State showFollowAnimate:boolean = false
  private followAnimationTimer: number = 0
  @State followAnimationLoop: boolean = true

  aboutToDisappear(): void {
    if (this.followAnimationTimer > 0) {
      clearTimeout(this.followAnimationTimer)
      this.followAnimationTimer = 0
    }
  }

  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: false }) {
          Row() {
            Text('换一换')
              .height('30vp')
              .fontColor($r('app.color.color_999999'))
              .fontWeight(400)
              .fontSize($r('app.float.vp_13'))
            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({
        bottom: '10vp'
      })

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

      // 一键关注按钮
      Stack({alignContent: Alignment.Center}) {
        Button(this.showFollowAnimate ? "" : (this.rmhSelectedList.length == 0 ? '一键关注' : `一键关注 (${this.rmhSelectedList.length})`)
          ,{ type: ButtonType.Normal, stateEffect: this.rmhSelectedList.length != 0 })
          .backgroundColor(this.rmhSelectedList.length != 0 ? $r('app.color.color_ED2800') : $r('app.color.color_B0B0B0'))
          .width("100%").height("100%")
          .borderRadius('3vp')
          .fontColor($r('app.color.color_999999'))
          .fontWeight(500)
          .fontSize($r('app.float.vp_13'))
          .fontColor(Color.White)
          .onClick(() => {
            // 点击一键关注
            if (!this.oneKeyFollow && this.rmhSelectedList.length > 0 ){
              if (HttpUtils.isLogin()) {
                this.showFollowAnimate = true
                this.followAnimationTimer = setTimeout(() => {
                  this.showFollowAnimate = false
                }, 11 * 1000)
              }
              this.oneKeyFollow = true
            }
          })
        if (this.showFollowAnimate) {
          LottieView({
            name: 'one_key_follow_all',
            path: "lottie/button_action_running_white.json",
            lottieWidth: 12,
            lottieHeight: 12,
            autoplay: true,
            loop: this.followAnimationLoop,
            // onComplete:() => {
            //   this.playAnimationOne = false
            // }
          })
        }
      }.margin({
        top: '10vp',
        bottom: '10vp'
      })
      .width('120vp').height('36vp')
    }
    .width('100%')
    .justifyContent(FlexAlign.Start)

  }

  // 选中
  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)
    }
  }
}