import { Logger, NumberFormatterUtils } from 'wdKit';
import {
  Action,
  ContentDetailDTO,
  ContentDTO,
  postRecommendListParams,
  postExecuteLikeParams,
  batchLikeAndCollectResult,
  batchLikeAndCollectParams,
  InteractDataDTO,
  contentListParams,
} from 'wdBean';
import DetailViewModel from '../viewmodel/DetailViewModel';
import { ImageAndTextWebComponent } from './ImageAndTextWebComponent';
import router from '@ohos.router';
import { RecommendList } from '../components/view/RecommendList'
import { CommonConstants } from 'wdConstant'
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { PageRepository } from '../repository/PageRepository';

const TAG = 'ImageAndTextPageComponent'

@Component
export struct ImageAndTextPageComponent {
  scroller: Scroller = new Scroller();
  action: Action = {} as Action
  @State contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
  @State recommendList: ContentDTO[] = []
  @State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
  @State interactData: InteractDataDTO = {} as InteractDataDTO
  build() {
    Column() {
      // 发布时间
      Row() {
        Image($r('app.media.icon_ren_min_ri_bao'))
          .width(70)
          .height(28)
        Text(this.contentDetailData[0]?.publishTime)
          .fontColor($r('app.color.color_B0B0B0'))
          .fontSize($r('app.float.font_size_13'))
          .height('100%')
          .align(Alignment.End)
      }
      .width(CommonConstants.FULL_WIDTH)
      .height(32)
      .padding({ left: 15, right: 15, })
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor(Color.White)

      Row() {
        Image($r('app.media.line'))
          .width('100%')
          .height(6)
          .objectFit(ImageFit.Cover)
          .margin({ top: 10 })
      }
      .padding({ left: 15, right: 15 })
      .backgroundColor(Color.White)

      Stack({ alignContent: Alignment.Bottom }) {
        Scroll(this.scroller) {
          Column() {
            ImageAndTextWebComponent({
              contentDetailData: this.contentDetailData,
              action: this.action
            })
            Column() {
              if (this.recommendList.length > 0) {
                RecommendList({ recommendList: this.recommendList })
              }
            }
          }

        }
        .width(CommonConstants.FULL_WIDTH)
        .height(CommonConstants.FULL_HEIGHT)
        .padding({ bottom: 76 })
        // .scrollBar(BarState.Off)

        //底部交互区
        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)
      }
    }
    .width(CommonConstants.FULL_WIDTH)
    .height(CommonConstants.FULL_HEIGHT)
  }

  // build() {
  //   Column() {
  //     // 发布时间
  //     Row() {
  //       Image($r('app.media.icon_ren_min_ri_bao'))
  //         .width(70)
  //         .height(28)
  //       Text(this.contentDetailData[0]?.publishTime)
  //         .fontColor($r('app.color.color_B0B0B0'))
  //         .fontSize($r('app.float.font_size_13'))
  //         .height('100%')
  //         .align(Alignment.End)
  //     }
  //     .width(CommonConstants.FULL_WIDTH)
  //     .height(32)
  //     .padding({ left: 15, right: 15, })
  //     .justifyContent(FlexAlign.SpaceBetween)
  //     .backgroundColor(Color.White)
  //
  //     Row() {
  //       Image($r('app.media.line'))
  //         .width('100%')
  //         .height(6)
  //         .objectFit(ImageFit.Cover)
  //         .margin({ top: 10 })
  //     }
  //     .padding({ left: 15, right: 15, })
  //     .backgroundColor(Color.White)
  //
  //     Stack({ alignContent: Alignment.Bottom }) {
  //
  //       List() {
  //         //详情展示区
  //         ListItem() {
  //           Column() {
  //             ImageAndTextWebComponent({
  //               contentDetailData: this.contentDetailData,
  //               action: this.action,
  //             })
  //           }.width(CommonConstants.FULL_WIDTH)
  //           // .height(CommonConstants.FULL_HEIGHT)
  //         }
  //
  //         if (this.contentDetailData[0]?.openLikes === 1) {
  //           ListItem() {
  //             // 点赞
  //             Row() {
  //               Row() {
  //                 if (this.newsStatusOfUser?.likeStatus === '1') {
  //                   Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.ic_like_check') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer_active') : $r('app.media.icon_candle_active')))
  //                     .width(24)
  //                     .height(24)
  //                     .margin({ right: 5 })
  //                 } else {
  //                   Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.icon_like') : (this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer') : $r('app.media.icon_candle')))
  //                     .width(24)
  //                     .height(24)
  //                     .margin({ right: 5 })
  //                 }
  //                 Text(`${this.interactData?.likeNum || 0}`)
  //                   .fontSize(16)
  //                   .fontColor(this.newsStatusOfUser?.likeStatus === '1' ? '#ED2800' : '#999999')
  //                   .fontWeight(500)
  //               }.alignItems(VerticalAlign.Center)
  //               .onClick(() => {
  //                 this.toggleLikeStatus()
  //               })
  //
  //             }.width(CommonConstants.FULL_WIDTH).height(80)
  //             .justifyContent(FlexAlign.Center)
  //           }
  //           .border({
  //             width: { bottom: 5 },
  //             color: '#f5f5f5',
  //           })
  //         }
  //
  //         // 相关推荐区
  //         ListItem() {
  //           RecommendList({ recommendList: this.recommendList })
  //         }
  //       }
  //       .width(CommonConstants.FULL_WIDTH)
  //       .height(CommonConstants.FULL_HEIGHT)
  //       .padding({ bottom: 56 })
  //       .scrollBar(BarState.Off)
  //       .edgeEffect(EdgeEffect.None)
  //
  //       //底部交互区
  //       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)
  //     }
  //
  //   }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
  //   .backgroundColor(Color.White)
  //
  // }

  private async getDetail() {
    let contentId: string = ''
    let relId: string = ''
    let relType: string = ''
    if (this.action && this.action.params) {
      if (this.action.params.contentID) {
        contentId = this.action.params.contentID;
      }
      if (this.action && this.action.params && this.action.params.extra) {
        if (this.action.params.extra.relId) {
          relId = this.action.params.extra.relId;
        }
        if (this.action.params.extra.relType) {
          relType = this.action.params.extra.relType
        }

      }
      let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
      if (detailBeans && detailBeans.length > 0) {
        this.contentDetailData = detailBeans;
        if (this.contentDetailData[0]?.recommendShow === 1) {
          this.getRecommend()
        }
        if (this.contentDetailData[0]?.openLikes === 1) {
          this.getInteractDataStatus()
          this.queryContentInteractCount()
        }
      }
    }
  }

  private async getRecommend() {
    let params: postRecommendListParams = {
      imei: "8272c108-4fa2-34ce-80b9-bc425a7c2a7e",
      userId: HttpUrlUtils.getUserId(),
      contentId: String(this.contentDetailData[0]?.newsId),
      recType: 1,
      contentType: this.contentDetailData[0]?.newsType,
      relId: this.contentDetailData[0]?.reLInfo?.relId,
      channelId: String(this.contentDetailData[0]?.reLInfo?.channelId)
    }
    let recommendList = await DetailViewModel.postRecommendList(params)
    this.recommendList = recommendList;
  }

  // 已登录->查询用户对作品点赞、收藏状态
  private async getInteractDataStatus() {
    try {
      const params: batchLikeAndCollectParams = {
        contentList: [
          {
            contentId: this.contentDetailData[0]?.newsId + '',
            contentType: this.contentDetailData[0]?.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))
    }
  }

  /**
   * 点赞、取消点赞
   */
  toggleLikeStatus() {
    // 未登录，跳转登录
    if (!HttpUrlUtils.getUserId()) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    const params: postExecuteLikeParams = {
      status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
      contentId: this.contentDetailData[0]?.newsId + '',
      contentType: this.contentDetailData[0]?.newsType + '',
    }
    PageRepository.postExecuteLike(params).then(res => {
      console.log(TAG, '点赞、取消点赞', 'toggleLikeStatus==',)
      if (this.newsStatusOfUser) {
        this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus == '1' ? '0' : '1'
        this.queryContentInteractCount()
      }

    })
  }

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

  aboutToAppear() {
    this.getDetail()
  }

  aboutToDisappear() {
  }
}