import { ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean, postBatchAttentionStatusParams, } from 'wdBean/Index'
import { MultiPictureDetailViewModel } from 'wdComponent/src/main/ets/viewmodel/MultiPictureDetailViewModel'
import { SpConstants } from 'wdConstant/Index'
import { ContentDetailRequest, postInteractAccentionOperateParams } from 'wdDetailPlayApi/Index'
import { NumberFormatterUtils, DateTimeUtils, SPHelper } from 'wdKit/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
import { router } from '@kit.ArkUI'

const TAG = 'PlayerEndView'

@Preview
@Component
export struct PlayerEndView {
  // @Consume liveDetailsBean: LiveDetailsBean
  @Consume contentDetailData: ContentDetailDTO
  @Consume liveRoomDataBean: LiveRoomDataBean
  @State duration: string = ''
  @State followStatus: String = '0';
  private onBack: () => void = () => {
  }

  aboutToAppear(): void {
    const sn =
      DateTimeUtils.parseDate(this.contentDetailData.liveInfo.startTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
    const en = DateTimeUtils.parseDate(this.contentDetailData.liveInfo.endTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
    const sd = DateTimeUtils.getDuration(sn, en)
    this.duration = DateTimeUtils.secondToTime(sd / 1000)
    this.getBatchAttentionStatus()
  }

  /**
   * 查询当前登录用户是否关注作品号主
   * */
  async getBatchAttentionStatus() {
    try {
      const params: postBatchAttentionStatusParams = {
        creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]
      }
      let data = await MultiPictureDetailViewModel.getBatchAttentionStatus(params)
      this.followStatus = data[0]?.status;
      console.log(TAG, `followStatus：${JSON.stringify(this.followStatus)}`)
    } catch (exception) {

    }
  }

  /**
   * 关注号主
   */
  async handleAccention() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    // TODO:直播间没有携带人民号信息
    const params2: postInteractAccentionOperateParams = {
      attentionUserType: this.contentDetailData?.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: this.contentDetailData?.rmhInfo?.userId || '', // 被关注用户号主id
      attentionCreatorId: this.contentDetailData?.rmhInfo?.rmhId || '', // 被关注用户号主id
      status: this.followStatus == '0' ? 1 : 0,
    }


    ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
      console.log('关注号主==', JSON.stringify(res.data))
      if (this.followStatus == '1') {
        this.followStatus = '0'
      } else {
        this.followStatus = '1'
      }
    }).catch(() => {
      AlertDialog.show({ message: '关注失败' })
    })
  }

  build() {
    Column() {
      Text('直播已结束').fontWeight(500)
        .fontSize(20)
        .fontColor(Color.White)
        .padding({ bottom: 40, top: 120 })

      Stack() {
        Column() {
          Text(this.contentDetailData?.rmhInfo?.rmhName)
            .fontWeight(400)
            .fontSize(18)
            .fontColor(Color.White)
            .padding({ top: 52 })
          Text(this.contentDetailData?.rmhInfo?.rmhDesc || '')
            .fontWeight(400)
            .fontSize(13)
            .fontColor('#B2FFFFFF')
            .padding({ top: 8 })

          Row() {
            Column() {
              Text(this.duration).fontWeight(600).fontSize(24).fontColor(Color.White)
              Text('时长').fontWeight(400).fontSize(13).fontColor(Color.White)
            }

            Text('').width(1).height(32).margin({ left: 36, right: 36 }).backgroundColor('#33FFFFFF')
            Column() {
              Text(NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean?.pv || ''))
                .fontWeight(600)
                .fontSize(24)
                .fontColor(Color.White)
              Text('观看人数').fontWeight(400).fontSize(13).fontColor(Color.White)
            }
          }
          .padding({ top: 16 })

          Row() {
            Text(this.followStatus == '0' ? '关注' : '已关注')
              .fontWeight(400)
              .fontSize(16)
              .fontColor(Color.White)
              .padding({
                top: 8,
                bottom: 8,
                left: 122,
                right: 122
              })
              .backgroundColor(this.followStatus == '0' ? '#FFED2800' : Color.Grey)
              .borderRadius(4)
              .onClick(() => {
                this.handleAccention()
              })
          }
          .padding({ top: 24 })

        }
        .width(307)
        .height(254)
        .backgroundColor('#999999')
        .borderRadius(4)

        Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
          .width(80)
          .height(80)
          .borderRadius(40)
          .borderWidth(1)
          .borderColor(Color.White)
          .borderStyle(BorderStyle.Solid)
          .position({ x: '50%', y: 0 })
          .markAnchor({ x: '50%', y: '50%' })
      }
      .width(307)
      .padding({ top: 40 })

      Blank()

      // 返回按钮
      Row() {
        Image($r('app.media.icon_arrow_left_white'))
          .width(24)
          .height(24)
          .aspectRatio(1)
          .interpolation(ImageInterpolation.High)
          .hoverEffect(HoverEffect.Scale)
          .margin({ bottom: 30 ,left:14})
          .onClick(() => {
            if (this.onBack) {
              this.onBack()
            }
            router.back();
          })

      }.width('100%')

    }
    .height('100%')
    .width('100%')

  }
}