import { AccountManagerUtils, Logger, DateTimeUtils  } from 'wdKit';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { ContentDetailDTO,batchLikeAndCollectResult,batchLikeAndCollectParams,postBatchAttentionStatusParams,
  PhotoListBean,
  ContentDTO,
  RmhInfoDTO, } from 'wdBean';
import media from '@ohos.multimedia.media';
import { OperRowListView } from './view/OperRowListView';
import { WDPlayerController } from 'wdPlayer/Index';
import { ContentConstants } from '../constants/ContentConstants';
import { ProcessUtils } from 'wdRouter';
import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils';
import display from '@ohos.display';
import { BusinessError } from '@ohos.base';
import { CommonConstants } from 'wdConstant/Index';
import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo'
const TAG = 'DynamicDetailComponent'
@Preview
@Component
export struct DynamicDetailComponent {
  //入参
  private relId: string = ''
  private contentId: string = ''
  private relType: string = ''
  //出参 fixme 模拟数据用json转换
  @State contentDetailData: ContentDetailDTO = {
    publishTime: "2023年03月14日 08:16",
    rmhInfo:{rmhHeadUrl:"",rmhName:"人民号名称",rmhDesc:"人民号描述单行展示"},
    newsContent:"优先展示这个内容",
    newsSummary:"其次展示这个内容",
    newsTitle:"上面两个都没有再展示这个内容",
    newsType:15
  } as ContentDetailDTO
  //变量
  /**
   * 默认未关注 点击去关注
   */
  private  followStatus: String = '0';
  @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态

  //跳转
  private mJumpInfo: ContentDTO = {} as ContentDTO;

  // 获取当前所有的display对象
  promise: Promise<Array<display.Display>> = display.getAllDisplays()

  // 屏幕宽度（单位px）
  @State screenWidth: number = 0;

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

  }

  build() {
    Row() {
      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(this.contentDetailData.publishTime)
            .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')} )
        //号主信息
        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)
              .margin({ left: $r('app.float.margin_5') })
              .alignSelf(ItemAlign.Start)
          }
          .width('63%')
          .margin({right: $r('app.float.margin_6')})
          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(this.item, 1)
              })
          } 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(this.item, 0)
              })
          }
        }
        .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)
                    })
                  } 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;
                        })
                    }
                  }
                } else if (this.contentDetailData.photoList.length === 4) {
                  GridCol({
                    span: { xs: 4 }
                  }) {
                    Image(item.picPath)
                      .aspectRatio(1)
                      .borderRadius(this.caclImageRadius(index))
                  }
                } else {
                  GridCol({
                    span: { sm: 4, lg: 3 }
                  }) {
                    Image(item.picPath)
                      .aspectRatio(1)
                      .borderRadius(this.caclImageRadius(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) => {
              this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;
              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(){
          Image($r('app.media.icon_like_selected_redheart'))
            .width($r('app.float.margin_24'))
            .height($r('app.float.margin_24'))
            .objectFit(ImageFit.Cover)
          Text("2.6万")
            .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')})
        }
        //评论组件/底部组件

      }
      .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()
  }

  // 查询当前登录用户点赞状态
  private async getInteractDataStatus() {
    //未登录
    if(!AccountManagerUtils.isLoginSync() || this.contentDetailData?.openLikes != 1){
      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() {
    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) {

    }
  }

  //创建跳转信息
  makeJumpInfo(){
    this.mJumpInfo.pageId = 'dynamicDetailPage';
    // this.mJumpInfo.from = '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+"";
  }


  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; //普通图
    }
  }
}

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