import { ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean,
  Params,
  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 { LengthMetrics, 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 = () => {}
  controller: TextController = new TextController()
  muStyleString: MutableStyledString = new MutableStyledString("")

  aboutToAppear(): void {
    this.calculateLiveDuration()
    this.getBatchAttentionStatus()
  }
  calculateLiveDuration() {
    const sn =
      DateTimeUtils.parseDate(this.contentDetailData.liveInfo.startTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
    let en = 0
    if (this.contentDetailData.liveInfo?.endTime.length > 0) {
      en = DateTimeUtils.parseDate(this.contentDetailData.liveInfo.endTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
    }else {
      en = DateTimeUtils.parseDate(DateTimeUtils.getCurTime(DateTimeUtils.PATTERN_DATE_TIME_HYPHEN),DateTimeUtils.PATTERN_DATE_TIME_HYPHEN)
    }
    const sd = DateTimeUtils.getDuration(sn, en)
    this.duration = DateTimeUtils.liveDurationSecondToTime(sd / 1000)
  }

  /**
   * 查询当前登录用户是否关注作品号主
   * */
  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() {
  Stack() {
    Image(($r('app.media.live_detail_end_bg')))
    Column() {
      Text('直播已结束').fontWeight(500)
        .fontSize(20)
        .fontColor(Color.White)
        .padding({ bottom: 40, top: 120 })

      Stack() {
        if (this.contentDetailData.rmhInfo != null) {
          Row() {
            Image($r("app.media.live_end_BG_l"))
              .width(307/2.0)
              .height(254)
            Image($r("app.media.live_end_BG_r"))
              .width(307/2.0)
              .height(254)
          }
          // .width(307)
          //    .height(254)
          // .backgroundColor(Color.Red)
        }
        Column() {
          if (this.contentDetailData.rmhInfo != null) {
            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 })
          }
          Blank().height(this.contentDetailData.rmhInfo == null ? 26:16)
          Row() {
            Row() {
              Column() {
                Text(undefined, {controller: this.controller}).fontWeight(600).fontSize(20).fontColor(Color.White)
                Text('直播时长').fontWeight(400).fontSize(12).fontColor(Color.White)
              }
            }
            .width(306/2.0)
            .justifyContent(FlexAlign.Center)
            Text('').width(1).height(32).backgroundColor('#33FFFFFF')
            Row() {
              Column() {
                Text(NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean?.pv || ''))
                  .fontWeight(600)
                  .fontSize(20)
                  .fontColor(Color.White)
                Text('观看人数').fontWeight(400).fontSize(12).fontColor(Color.White)
              }
            }
            .width(306/2.0)
            .justifyContent(FlexAlign.Center)
          }.width(307)
          if (this.contentDetailData.rmhInfo != null) {
            Row() {
              Text(this.followStatus == '0' ? '关注' : '已关注')
                .fontWeight(400)
                .fontSize(16)
                .fontColor(Color.White)
                .padding({
                  top: 8,
                  bottom: 8,
                  left: 122,
                  right: 122
                })
                .height(42)
                .backgroundColor(this.followStatus == '0' ? '#FFED2800' : '#CCCCCC')
                .borderRadius(4)
                .onClick(() => {
                  this.handleAccention()
                })
            }
            .padding({ top: 24 })
          }
        }
        .width(307)
        .height(this.contentDetailData.rmhInfo == null ? 100 : 254)
        .backgroundColor(this.contentDetailData.rmhInfo == null ? '#12ffffff' : '')
        .borderRadius(4)
        if (this.contentDetailData.rmhInfo != null) {
          Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
            .alt($r('app.media.default_head'))
            .width(80)
            .height(80)
            .borderRadius(40)
            // .borderWidth(1)
            // .borderColor(Color.White)
            // .borderStyle(BorderStyle.Solid)
            .position({ x: '50%', y: 0 })
            .markAnchor({ x: '50%', y: '50%' })
            .onClick(()=>{
              // 跳转到号主页
              if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
                const params: Params = {
                  creatorId: this.contentDetailData.rmhInfo.rmhId,
                  pageID: ''
                }
                WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
              }
            })
        }
      }
      .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();
          })
          .onAreaChange(()=>{
            /*
            此处是为了更新直播时长这个属性字符串，在aboutToAppear里面写，无效，可能因为组件当时还没渲染出来，
            返回按钮是PlayerEndView这个自定义组件的最后一个元素，它已经渲染了，前面的组件也就肯定渲染了
            */
            this.dealStyleString()
          })


      }.width('100%')

    }
    .height('100%')
    .width('100%')
    // .align(Alignment.Center)
    .justifyContent(FlexAlign.Center)
  }
  .height('100%')
  .width('100%')


  }
  dealStyleString() {
    let dayString = "天"
    let hourString = "时"
    const  minuteString = "分"

    const styledKey =  StyledStringKey.FONT
    const textStyle =  new TextStyle({fontSize: LengthMetrics.vp(12), fontWeight: 500})
    this.muStyleString = new MutableStyledString(this.duration)

    this.customSetStringStyle(dayString, styledKey, textStyle)
    this.customSetStringStyle(hourString, styledKey, textStyle)
    this.customSetStringStyle(minuteString, styledKey, textStyle)
    this.controller.setStyledString(this.muStyleString)
  }
  customSetStringStyle(startString: string, styledKey:StyledStringKey, textStyle: TextStyle) {
    if (this.duration.includes(startString)) {
      this.muStyleString.setStyle({
        start: this.duration.indexOf(startString),
        length: 1,
        styledKey: styledKey,
        styledValue: textStyle
      })
    }
  }
}