import { AccountManagerUtils, Logger, DateTimeUtils, SPHelper, NumberFormatterUtils  } from 'wdKit';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { ContentDetailDTO,postBatchAttentionStatusParams,
  PhotoListBean,
  ContentDTO,
  batchLikeAndCollectResult,
  RmhInfoDTO,
  InteractDataDTO, } from 'wdBean';
import media from '@ohos.multimedia.media';
import { OperRowListView } from './view/OperRowListView';
import { WDPlayerController } from 'wdPlayer/Index';
import {
  batchLikeAndCollectParams,
  ContentDetailRequest,
  contentListParams,
  postExecuteCollectRecordParams,
  postExecuteLikeParams,
  postInteractAccentionOperateParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { ContentConstants } from '../constants/ContentConstants';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils';
import display from '@ohos.display';
import { BusinessError } from '@ohos.base';
import { CommonConstants, SpConstants } from 'wdConstant/Index';
import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo'
import router from '@ohos.router';
const TAG = 'DynamicDetailComponent'
@Preview
@Component
export struct DynamicDetailComponent {
  //入参
  private relId: string = ''
  private contentId: string = ''
  private relType: string = ''

  //出参
  @State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
  //UI
  scroller: Scroller = new Scroller();

  //点赞 收藏 评论 数量
  @State interactDataDTO: InteractDataDTO = {likeNum:0} as InteractDataDTO
  /**
   * 关注状态：默认未关注 点击去关注
   */
  @State  followStatus: String = '';

  @State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult// 点赞、收藏状态
  //跳转
  private  mJumpInfo: ContentDTO = {} as ContentDTO;

  async aboutToAppear() {
    await this.getContentDetailData()
  }
  onPageHide() {

  }

  build() {
      Column(){
        //logo、日期
        Row() {
          Image($r('app.media.ic_article_rmh'))
            .width($r('app.float.margin_80'))
            .height($r('app.float.margin_28'))
            .margin({ left: $r('app.float.margin_16') })
          Blank()
          Text(StringUtils.isEmpty(this.contentDetailData.publishTime)?"":this.contentDetailData.publishTime.replace('-','年').replace('-','月').replace(' ','日 ').substring(0,this.contentDetailData.publishTime.length-2))
            .fontColor($r('app.color.color_B0B0B0'))
            .fontSize($r('app.float.font_size_12'))
            .lineHeight($r('app.float.margin_28'))
            .margin({ right: $r('app.float.margin_16') })
        }
        .height($r('app.float.margin_48'))
        .width('100%')
        //分割线
        Image($r('app.media.ic_news_detail_division'))
            .width('100%')
            .height($r('app.float.margin_7'))
            .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
        Stack({ alignContent: Alignment.Bottom }) {
          Scroll(this.scroller) {
            Column() {
              //号主信息
              Row() {
                //头像
                Stack() {
                  Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
                    .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
                    .width($r('app.float.margin_32'))
                    .height($r('app.float.margin_32'))
                    .objectFit(ImageFit.Cover)
                    .borderRadius($r('app.float.margin_16'))
                  Image($r('app.media.icon_border_test'))
                    .width($r('app.float.margin_48'))
                    .height($r('app.float.margin_48'))
                    .objectFit(ImageFit.Cover)
                    .borderRadius($r('app.float.margin_24'))
                }
                .width($r('app.float.margin_48'))
                .height($r('app.float.margin_48'))
                .alignContent(Alignment.Center)
                Column(){
                  //昵称
                  Text(this.contentDetailData.rmhInfo?.rmhName)
                    .fontSize($r('app.float.font_size_14'))
                    .fontColor($r('app.color.color_222222'))
                    .fontWeight(FontWeight.Medium)
                    .margin({ left: $r('app.float.margin_5') })
                    .alignSelf(ItemAlign.Start)
                  //简介
                  Text(this.contentDetailData.rmhInfo?.rmhDesc)
                    .fontSize($r('app.float.font_size_14'))
                    .fontColor($r('app.color.color_B0B0B0'))
                    .fontWeight(FontWeight.Medium)
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .margin({ left: $r('app.float.margin_5') })
                    .alignSelf(ItemAlign.Start)
                }
                .width('63%')
                .margin({right: $r('app.float.margin_6')})
                if(!StringUtils.isEmpty(this.followStatus)){
                  if (this.followStatus == '0') {
                    Text('关注')
                      .width($r('app.float.margin_54'))
                      .height($r('app.float.margin_24'))
                      .textAlign(TextAlign.Center)
                      .fontSize($r('app.float.font_size_12'))
                      .borderRadius($r('app.float.vp_3'))
                      .backgroundColor($r('app.color.color_ED2800'))
                      .fontColor($r('app.color.color_fff'))
                      .onClick(() => {
                        this.handleAccention()
                      })
                  } else {
                    Text('已关注')
                      .width($r('app.float.margin_54'))
                      .height($r('app.float.margin_24'))
                      .borderWidth(1)
                      .textAlign(TextAlign.Center)
                      .fontSize($r('app.float.font_size_12'))
                      .borderRadius($r('app.float.vp_3'))
                      .borderColor($r('app.color.color_CCCCCC'))
                      .fontColor($r('app.color.color_CCCCCC'))
                      .onClick(() => {
                        this.handleAccention()
                      })
                  }
                }
              }
              .width('100%')
              .margin({ left: $r('app.float.margin_16')})
              //内容
              Text(StringUtils.isEmpty(this.contentDetailData.newsContent)
                ?StringUtils.isEmpty(this.contentDetailData.newsSummary)
                  ?this.contentDetailData.newsTitle
                  :this.contentDetailData.newsSummary
                :this.contentDetailData.newsContent)
                .fontColor($r('app.color.color_222222'))
                .fontSize($r('app.float.font_size_18'))
                .lineHeight($r('app.float.margin_25'))
                .margin({ top: $r('app.float.margin_6')
                ,left: $r('app.float.margin_16')
                ,right: $r('app.float.margin_16') })
                .alignSelf(ItemAlign.Start)
              if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
                //附件内容：图片/视频
                if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
                  // 图片-从无图到9图展示
                  GridRow({
                    gutter: { x: 2, y: 2 }
                  }) {
                    ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
                      if (this.contentDetailData.photoList.length === 1) {
                        if (this.getPicType(item) !== 3) {
                          GridCol({
                            span: this.getPicType(item) === 1 ? 12 : 8
                          }){
                            Stack({
                              alignContent: Alignment.BottomEnd
                            }) {
                              if (this.getPicType(item) === 1) {
                                Image(item.picPath)
                                  .width('100%')
                                  .height(172)
                                  .autoResize(true)
                                  .borderRadius(this.caclImageRadius(index))
                              } else if (this.getPicType(item) === 2) {
                                Image(item.picPath)
                                  .width('100%')
                                  .height(305)
                                  .autoResize(true)
                                  .borderRadius(this.caclImageRadius(index))
                              }
                              Flex({ direction: FlexDirection.Row }) {
                                Image($r('app.media.icon_long_pic'))
                                  .width(14)
                                  .height(14)
                                  .margin({right: 4})
                                Text('长图')
                                  .fontSize(12)
                                  .fontWeight(400)
                                  .fontColor(0xffffff)
                                  .fontFamily('PingFang SC')
                              }
                              .width(48)
                              .padding({bottom: 9})

                            }
                          }
                          .onClick((event: ClickEvent) => {
                            ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
                          })
                        } else {
                          GridCol({
                            span: { xs: 8 }
                          }) {
                            Image(item.picPath)
                              .width('100%')
                              .borderRadius(this.caclImageRadius(index))
                              .autoResize(true)
                              .opacity(!item.width && !item.height ? 0 : 1)
                              .onComplete(callback => {
                                item.width = callback?.width || 0;
                                item.height = callback?.height || 0;
                              })
                          }
                          .onClick((event: ClickEvent) => {
                            ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
                          })
                        }
                      } else if (this.contentDetailData.photoList.length === 4) {
                        GridCol({
                          span: { xs: 4 }
                        }) {
                          Image(item.picPath)
                            .aspectRatio(1)
                            .borderRadius(this.caclImageRadius(index))
                        }
                        .onClick((event: ClickEvent) => {
                          ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
                        })
                      } else {
                        GridCol({
                          span: { sm: 4, lg: 3 }
                        }) {
                          Image(item.picPath)
                            .aspectRatio(1)
                            .borderRadius(this.caclImageRadius(index))
                        }
                        .onClick((event: ClickEvent) => {
                          ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
                        })
                      }
                    })
                  }
                  .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
                }
              }else{
                if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
                  GridRow() {
                    if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {
                      // 横屏
                      GridCol({
                        span: { xs: 12 }
                      }) {
                        Stack() {
                          Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
                          this.contentDetailData.fullColumnImgUrls[0].url:
                          this.contentDetailData.videoInfo[0].firstFrameImageUri)
                            .width(CommonConstants.FULL_WIDTH)
                            .aspectRatio(16 / 9)
                            .borderRadius($r('app.float.image_border_radius'))
                          CardMediaInfo({ contentDTO: this.mJumpInfo })
                        }
                        .align(Alignment.BottomEnd)
                      }
                    } else {
                      // 竖图显示，宽度占50%，高度自适应
                      GridCol({
                        span: { xs: 6 }
                      }) {
                        Stack() {
                          Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
                          this.contentDetailData.fullColumnImgUrls[0].url:
                          this.contentDetailData.videoInfo[0].firstFrameImageUri)
                            .width(CommonConstants.FULL_WIDTH)
                            .borderRadius($r('app.float.image_border_radius'))
                          CardMediaInfo({ contentDTO: this.mJumpInfo })
                        }
                        .align(Alignment.BottomEnd)
                      }
                    }
                  }
                  .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
                  .onClick((event: ClickEvent) => {
                    ProcessUtils.processPage(this.mJumpInfo)
                  })
                }
              }
              //特别声明
              Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
                .fontColor($r('app.color.color_CCCCCC'))
                .fontSize($r('app.float.font_size_12'))
                .lineHeight($r('app.float.margin_16'))
                .margin({ top: $r('app.float.margin_16')
                ,left: $r('app.float.margin_16')
                ,right: $r('app.float.margin_16') })
              //微信/朋友圈/微博
              Row(){
                Image($r('app.media.xxhdpi_pic_wechat'))
                  .width($r('app.float.margin_116'))
                  .height($r('app.float.margin_36'))
                  .objectFit(ImageFit.Cover)
                Image($r('app.media.xxhdpi_pic_pyq'))
                  .width($r('app.float.margin_116'))
                  .height($r('app.float.margin_36'))
                  .margin({ left: $r('app.float.margin_4_negative')})
                  .objectFit(ImageFit.Cover)
                Image($r('app.media.xxhdpi_pic_wb'))
                  .width($r('app.float.margin_116'))
                  .height($r('app.float.margin_36'))
                  .margin({ left: $r('app.float.margin_4_negative')})
                  .objectFit(ImageFit.Cover)
              }
              .margin({ top: $r('app.float.margin_24')})
              //点赞
              Row(){
                Blank().layoutWeight(1)
                Image(this.newsStatusOfUser?.likeStatus == '1'?
                $r('app.media.icon_like_selected_redheart')
                  :$r('app.media.icon_like_unselect_grey_redheart'))
                  .width($r('app.float.margin_36'))
                  .height($r('app.float.margin_36'))
                  .objectFit(ImageFit.Cover)
                  .margin({ left: $r('app.float.margin_6_negative'),right: $r('app.float.margin_6_negative')})
                if(this.interactDataDTO?.likeNum != 0){
                  Text(NumberFormatterUtils.formatNumberWithWan(this.interactDataDTO?.likeNum))
                    .fontColor($r('app.color.color_999999'))
                    .fontSize($r('app.float.font_size_16'))
                    .lineHeight($r('app.float.margin_20'))
                    .margin({ left: $r('app.float.margin_2')})
                }
                Blank().layoutWeight(1)
              }
              .width($r('app.float.margin_154'))
              .height($r('app.float.margin_40'))
              .margin({top:$r('app.float.margin_16')})
              .borderWidth($r('app.float.margin_1'))
              .borderColor($r('app.color.color_EDEDED'))
              .borderRadius($r('app.float.margin_20'))
              .onClick((event: ClickEvent) => {
                //点赞操作
                this.toggleLikeStatus()
              })
              Blank().layoutWeight(1)
              //fixme 评论组件
            }
          }
          .width(CommonConstants.FULL_WIDTH)
          .height(CommonConstants.FULL_HEIGHT)
          .padding({ bottom: 76 })
          .scrollBar(BarState.Off)
          .alignSelf(ItemAlign.Start)
          //底部交互区
          Row() {
            Image($r('app.media.icon_arrow_left'))
              .width(24)
              .height(24)
              .onClick((event: ClickEvent) => {
                router.back()
              })

            Row() {
              Image($r('app.media.icon_comment'))
                .width(24)
                .height(24)
                .margin({ right: 24 })
                .id('comment')

              Image($r('app.media.icon_star'))
                .width(24)
                .height(24)
                .margin({ right: 24 })

              Image($r('app.media.icon_listen'))
                .width(24)
                .height(24)
                .margin({ right: 24 })

              Image($r('app.media.icon_forward'))
                .width(24)
                .height(24)

            }
          }
          .width(CommonConstants.FULL_WIDTH)
          .height(56)
          .padding({ left: 15, right: 15, bottom: 50, top: 20 })
          .justifyContent(FlexAlign.SpaceBetween)
          .backgroundColor(Color.White)
        }
      }
      .alignSelf(ItemAlign.Start)
      .backgroundColor('#FFFFFFFF')
      .width('100%')
      .height('100%')
  }
  /**
   * 请求（动态）详情页数据
   * */
  private async getContentDetailData() {
    try {
      let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
      this.contentDetailData = data[0];
      console.log('动态详情',JSON.stringify(this.contentDetailData))
    } catch (exception) {
    console.log('请求失败',JSON.stringify(exception))
    }
    this.getBatchAttentionStatus()
    this.getInteractDataStatus()
    this.makeJumpInfo()
    this.interactDataV2()
  }


  private async interactDataV2() {
    this.interactDataDTO = await MultiPictureDetailViewModel.interactDataV2(
      this.contentDetailData?.newsId+'',this.contentDetailData?.newsType+'',this.contentDetailData.reLInfo == null ?'':this.contentDetailData.reLInfo?.relId,this.contentDetailData.rmhPlatform)
  }

  // 已登录->查询用户对作品点赞、收藏状态
  private async getInteractDataStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      return
    }
    try {
      const params: batchLikeAndCollectParams = {
        contentList: [
          {
            contentId: this.contentDetailData?.newsId + '',
            contentType: this.contentDetailData?.newsType + '',
          }
        ]
      }
      console.error(TAG, JSON.stringify(this.contentDetailData))
      let data = await MultiPictureDetailViewModel.getInteractDataStatus(params)
      console.error(TAG, '查询用户对作品点赞、收藏状态', JSON.stringify(data))
      this.newsStatusOfUser = data[0];
      Logger.info(TAG, `newsStatusOfUser：${JSON.stringify(this.newsStatusOfUser)}`)
    } catch (exception) {
      console.error(TAG, JSON.stringify(exception))
    }
  }

  /**
   * 查询当前登录用户是否关注作品号主
   * */
  private async getBatchAttentionStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      this.followStatus = '0';
      return
    }
    try {
        const params: postBatchAttentionStatusParams = {
          creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]
        }
        let data = await MultiPictureDetailViewModel.getBatchAttentionStatus(params)
        this.followStatus = data[0]?.status;
        Logger.info(TAG, `followStatus：${JSON.stringify(this.followStatus)}`)
      } catch (exception) {
        this.followStatus = '0';
      }
  }

  //创建跳转信息
  makeJumpInfo(){
    this.mJumpInfo.pageId = 'dynamicDetailPage'
    this.mJumpInfo.objectId = this.contentDetailData.newsId+""
    this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType+""
    this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId+""
    this.mJumpInfo.objectType = (this.contentDetailData.newsType+"") == ContentConstants.TYPE_FOURTEEN?this.contentDetailData.newsType+"":ContentConstants.TYPE_VOD
    if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
      this.mJumpInfo.videoInfo = this.contentDetailData.videoInfo[0]
    }
  }


  caclImageRadius(index: number) {
    let radius: radiusType = {
      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
      topRight: 0,
      bottomLeft: 0,
      bottomRight: 0,
    }
    if (this.contentDetailData.photoList.length === 1) {
      radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
    } else if (this.contentDetailData.photoList.length === 5 && !this.contentDetailData.photoList[2].fullUrl) {
      radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 3 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 4 ? $r('app.float.image_border_radius') : 0
    } else {
      radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
    }
    return radius
  }

  getPicType(item: PhotoListBean){
    if (item.width && item.width) {
      if (item.width / item.height > 343/172) {
        return 1; //横长图
      } else if (item.height / item.width > 305/228) {
        return 2; //竖长图
      } else {
        return 3
      }
    } else {
      return 3; //普通图
    }
  }

  /**
   * 关注号主
   */
  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
      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'
      }
    })
  }

  /**
   * 点赞、取消点赞
   */
  async toggleLikeStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      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 => {
      this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1'
      if (this.newsStatusOfUser.likeStatus === '1') {
        this.interactDataDTO.likeNum = Number(this.interactDataDTO.likeNum) + 1
      } else {
        this.interactDataDTO.likeNum = Number(this.interactDataDTO.likeNum) - 1
      }
      console.log('点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactDataDTO?.likeNum)
    })
  }
}

interface radiusType {
  topLeft: number | Resource;
  topRight: number | Resource;
  bottomLeft: number | Resource;
  bottomRight: number | Resource;
}