import { SPHelper, Logger, ToastUtils } from 'wdKit';
import { ContentDetailDTO, Action, ContentDTO, batchLikeAndCollectResult } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import router from '@ohos.router';
import { batchLikeAndCollectParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { SpConstants } from 'wdConstant/Index';
import { WDShare } from 'wdShare/Index';
import { LikeComponent } from './view/LikeComponent'

const TAG = 'CarderInteraction'

/**
 * 卡片 分享、评论、点赞公用组件
 */
@Component
export struct CarderInteraction {
  @Prop contentDTO: ContentDTO
  @State contentId: string = ''
  @Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
  @State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
  @State likeBean: Record<string, string> = {}

  async aboutToAppear() {
    await this.getContentDetailData()
    // 点赞需要数据
    this.likeBean['contentId'] = this.contentDetailData.newsId + ''
    this.likeBean['userName'] = this.contentDetailData.userInfo?.userName + ''
    this.likeBean['contentType'] = this.contentDetailData.newsType + ''
    this.likeBean['title'] = this.contentDetailData.newsTitle + ''
    this.likeBean['userHeaderUrl'] = this.contentDetailData.userInfo?.headPhotoUrl + ''
    this.likeBean['channelId'] = this.contentDetailData.reLInfo?.channelId + ''
  }

  build() {
    Row() {
      Row() {
        Image($r('app.media.CarderInteraction_share'))
          .width(18)
          .height(18)
        Text('分享')
          .margin({ left: 4 })
          .fontSize(14)
          .fontColor('#666666')
      }
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        WDShare.shareContent(this.contentDetailData)
      })

      Row() {
        Image($r('app.media.CarderInteraction_comment'))
          .width(18)
          .height(18)
        Text('评论')
          .margin({ left: 4 })
          .fontSize(14)
          .fontColor('#666666')
      }
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        ProcessUtils.processPage(this.contentDTO)
      })

      this.builderLike()
    }
    .width('100%')
    .margin({ top: 11 })
    .padding({
      left: 21,
      right: 21
    })
    .justifyContent(FlexAlign.SpaceBetween)
    .alignItems(VerticalAlign.Center)
  }

  /**
   * 点赞组件
   */
  @Builder
  builderLike() {
    Row() {
      if (this.likeBean?.contentId) {
        LikeComponent({
          data: this.likeBean,
          componentType: 3
        })
      }
    }
    .width(42)
  }

  /**
   * 请求（动态）详情页数据
   * */
  private async getContentDetailData() {
    try {
      let data = await MultiPictureDetailViewModel.getDetailData(this.contentDTO.relId, this.contentDTO.objectId,
        this.contentDTO.relType)
      this.contentDetailData = data[0];
      console.log('动态详情', JSON.stringify(this.contentDetailData))
    } catch (exception) {
      console.log('请求失败', JSON.stringify(exception))
    }
  }
}