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'

export interface OperationItem {
  icon: Resource;
  icon_check?: Resource;
  text: string | Resource;
  num?: number; // 个数
}

@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
  @State operationList: OperationItem[] = [
    {
      icon: $r('app.media.ic_comment'),
      text: "评论",
    },
    {
      icon: $r('app.media.ic_like_uncheck'),
      icon_check: $r('app.media.ic_like_check'),
      text: "点赞",
    },
    {
      icon: $r('app.media.ic_collect_uncheck'),
      icon_check: $r('app.media.ic_collect_check'),
      text: "收藏",
    },
    {
      icon: $r('app.media.ic_share'),
      text: "分享"
    }
  ]

  build() {
    Column() {
      Column() {
        // 发布时间
        // Row() {
        //   Image($r('app.media.icon_ren_min_ri_bao'))
        //     .width(70)
        //     .height(28)
        //   Text(this.contentDetailData.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)
            }
            .backgroundColor(Color.White)

            // if (this.contentDetailData.openLikes === 1) {
            //   ListItem() {
            //     // 点赞
            //     Row() {
            //       Row() {
            //         if (this.newsStatusOfUser?.likeStatus === '1') {
            //           Image(this.contentDetailData.likesStyle === 1 ? $r('app.media.ic_like_check') : (this.contentDetailData.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.likesStyle === 1 ? $r('app.media.icon_like') : (this.contentDetailData.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)
            //   }
            //   .backgroundColor(Color.White)
            //   .margin({ bottom: 5 })
            // }

            //相关推荐区
            // ListItem() {
            //   RecommendList({ recommendList: this.recommendList })
            // }
            // .backgroundColor(Color.White)
          }
          .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)
          .backgroundColor(Color.White)
          .padding({ left: 15, right: 15, })
          .justifyContent(FlexAlign.SpaceBetween)
        }
      }.backgroundColor("#f5f5f5")
    }.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
  }

  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[0];
        //TODO
        // if (this.contentDetailData.recommendShow === 1) {
        //   this.getRecommend()
        // }
        // if (this.contentDetailData.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.newsId),
      recType: 1,
      contentType: this.contentDetailData.newsType,
      relId: this.contentDetailData?.reLInfo?.relId,
      channelId: String(this.contentDetailData?.reLInfo?.channelId)
    }
    let recommendList = await DetailViewModel.postRecommendList(params)
    if (recommendList && recommendList.length > 0) {
      this.recommendList = recommendList;
    }
  }

  // 已登录->查询用户对作品点赞、收藏状态
  private async getInteractDataStatus() {
    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))
    }
  }

  /**
   * 点赞、取消点赞
   */
  toggleLikeStatus() {
    // 未登录，跳转登录
    if (!HttpUrlUtils.getUserId()) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    const params: postExecuteLikeParams = {
      status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
      contentId: this.contentDetailData?.newsId + '',
      contentType: this.contentDetailData?.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?.newsId + '',
        contentType: this.contentDetailData?.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() {
  }
}