import { ContentDetailDTO, InteractDataDTO, Params, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import {
  batchLikeAndCollectParams,
  batchLikeAndCollectResult,
  ContentDetailRequest,
  contentListParams,
  postExecuteCollectRecordParams,
  postExecuteLikeParams,
  postInteractAccentionOperateParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { SPHelper, ToastUtils } from 'wdKit';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDPlayerController } from 'wdPlayer/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index'

export interface OperationItem {
  icon: Resource;
  icon_check?: Resource;

  // icon_selected: Resource;
  text: string | Resource;
  num?: number; // 个数
}

const TAG = 'PlayerRightView';

@Component
export struct PlayerRightView {
  private playerController?: WDPlayerController;
  @Consume interactData: InteractDataDTO
  @Consume contentDetailData: ContentDetailDTO
  @Consume newsStatusOfUser: batchLikeAndCollectResult
  @Consume followStatus: string
  @Consume isOpenDetail: boolean
  @State operationList: OperationItem[] = [
    {
      icon: $r('app.media.ic_like_uncheck'),
      icon_check: $r('app.media.ic_like_check'),
      text: "赞",
      // num: 6622
    },
    {
      icon: $r('app.media.ic_collect_uncheck'),
      icon_check: $r('app.media.ic_collect_check'),
      text: "收藏",
      // num: 662,
    },
    {
      icon: $r('app.media.ic_comment'),
      text: "抢首评",
      // num: 500,
    },
    {
      icon: $r('app.media.ic_share'),
      text: "分享"
    }
  ]

  aboutToAppear() {
  }

  /**
   * 点赞、取消点赞
   */
  async toggleLikeStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      this.playerController?.pause()
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    const params: postExecuteLikeParams = {
      status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
      contentId: this.contentDetailData?.newsId + '',
      contentType: this.contentDetailData?.newsType + '',
    }
    ContentDetailRequest.postExecuteLike(params).then(res => {

      if (this.newsStatusOfUser) {
        this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1'
        if (this.newsStatusOfUser.likeStatus === '1') {
          this.interactData.likeNum = Number(this.interactData.likeNum) + 1
        } else {
          this.interactData.likeNum = Number(this.interactData.likeNum) - 1
        }
        console.log('点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactData?.likeNum)
        // this.queryContentInteractCount()
      }

    })
  }

  /**
   * 收藏、取消收藏
   */
  async toggleCollectStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    const params: postExecuteCollectRecordParams = {
      status: this.newsStatusOfUser?.collectStatus === 1 ? '0' : '1',
      contentList: [{
        contentId: this.contentDetailData?.newsId + '',
        contentType: this.contentDetailData?.newsType + '',
      }],

    }
    ContentDetailRequest.postExecuteCollectRecord(params).then(res => {
      if (this.newsStatusOfUser) {
        this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
        // this.queryContentInteractCount()
        if (this.newsStatusOfUser.collectStatus === 1) {
          this.interactData.collectNum = Number(this.interactData.collectNum) + 1
        } else {
          this.interactData.collectNum = Number(this.interactData.collectNum) - 1
        }
        console.log('收藏、取消收藏==', this.newsStatusOfUser?.collectStatus, this.interactData?.collectNum)
      }
    })

  }

  /**
   * 查询点赞、收藏数量
   */
  queryContentInteractCount() {
    const params: contentListParams = {
      contentList: [{
        contentId: this.contentDetailData?.newsId + '',
        contentType: this.contentDetailData?.newsType,
      }]
    }
    ContentDetailRequest.getContentInteract(params).then(res => {
      if (res.data && this.interactData) {
        this.interactData.likeNum = res.data[0]?.likeNum
        this.interactData.collectNum = res.data[0]?.collectNum
        this.interactData.commentNum = res.data[0]?.commentNum
      }
      console.log('获取互动点赞等数据===', JSON.stringify(res))
    })
  }

  getImgUrl() {
    return this.contentDetailData?.rmhInfo?.rmhHeadUrl || this.contentDetailData?.userInfo?.userHeadUrl
  }

  /**
   * 关注号主
   */
  async handleAccention() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    const params2: postInteractAccentionOperateParams = {
      attentionUserType: this.contentDetailData?.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: this.contentDetailData?.rmhInfo?.userId || '', // 被关注用户号主id
      attentionCreatorId: this.contentDetailData?.rmhInfo?.rmhId || '', // 被关注用户号主id
      // userType: 1,
      // userId: '1',
      status: 1,
    }
    ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
      console.log('关注号主==', JSON.stringify(res.data))
      if (this.followStatus == '1') {
        this.followStatus = '0'
      } else {
        this.followStatus = '1'
      }
    })
  }

  @Builder
  buildUserComp() {
    Column() {
      if (this.getImgUrl()) {
        RelativeContainer() {
          Image(this.getImgUrl())
            .width('100%')
            .borderRadius(24)
            .aspectRatio(1)
            .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start }
            })
            .id("row1")
            .onClick(() => {
              if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
                // 号主页
                const params: Params = {
                  creatorId: this.contentDetailData.rmhInfo.rmhId,
                  pageID: ''
                }
                WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
              }

            })
          if (this.followStatus == '0') {
            Image($r('app.media.ic_add'))
              .width(24)
              .borderRadius(12)
              .alignRules({
                left: { anchor: "__container__", align: HorizontalAlign.Center },
                bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
              })
              .margin({ left: -12 })
              .id("row2")
              .onClick(() => {
                //    关注
                this.handleAccention()
              })
          }

        }.height(60)
      }
    }.margin({ bottom: 18 })
  }

  @Builder
  buildOperationItem(item: OperationItem, index: number) {
    Column() {
      if (item.text === '赞') {
        Image(this.newsStatusOfUser?.likeStatus == '1' ? item.icon_check : item.icon)
          .width(32)
          .aspectRatio(1)
          .onClick(() => {
            this.toggleLikeStatus()
          })
        Text(this.interactData?.likeNum ? (this.interactData.likeNum + '') : item.text)
          .width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .fontSize(13)
          .fontColor('#FFFFFF')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      } else if (item.text === '收藏') {
        Image(this.newsStatusOfUser?.collectStatus == 1 ? item.icon_check : item.icon)
          .width(32)
          .aspectRatio(1)
          .onClick(() => {
            this.toggleCollectStatus()
          })
        Text(this.interactData?.collectNum ? (this.interactData.collectNum + '') : item.text)
          .width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .fontSize(13)
          .fontColor('#FFFFFF')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      } else if (item.text === '抢首评') {
        Image(item.icon)
          .width(32)
          .aspectRatio(1)
          .onClick((event: ClickEvent) => {
            ToastUtils.showToast('评论为公共方法，待开发', 1000);
          })
        Text(this.interactData?.commentNum ? (this.interactData.commentNum + '') : item.text)
          .width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .fontSize(13)
          .fontColor('#FFFFFF')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      } else {
        Image(item.icon)
          .width(32)
          .aspectRatio(1)
          .onClick((event: ClickEvent) => {
            ToastUtils.showToast('分享为公共方法，待开发', 1000);
          })
        Text(item.text)
          .width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
          .fontWeight(500)
          .textAlign(TextAlign.Center)
          .fontSize(13)
          .fontColor('#FFFFFF')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }

    }
    // .width(48)
    .margin({ bottom: 20 })
    .alignItems(HorizontalAlign.Center)
    .hoverEffect(HoverEffect.Scale)

  }

  build() {
    Column() {
      this.buildUserComp()
      ForEach(this.operationList, (item: OperationItem, index: number) => {
        this.buildOperationItem(item, index)
      }, (item: OperationItem, index: number) => JSON.stringify(item))
    }
    .width(48)
    .position({ x: '100%', y: '100%' })
    .markAnchor({ x: '100%', y: '100%' })
    .padding({ bottom: 72 })
    .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
  }
}