import { commentInfo, CompDTO, ContentDTO, Params, batchLikeAndCollectResult } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { DateTimeUtils, SPHelper, Logger } from 'wdKit/Index';
import { ProcessUtils } from 'wdRouter';
import { SpConstants } from 'wdConstant/Index'
import {
  batchLikeAndCollectParams,
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { MultiPictureDetailViewModel } from '../../viewmodel/MultiPictureDetailViewModel';
import commentViewModel from '../../components/comment/viewmodel/CommentViewModel';
import { commentItemModel } from '../../components/comment/model/CommentModel'
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';

/**
 * 精选评论卡
 * Zh_Single_Row-06
 */
const TAG = 'Zh_Single_Row-06'
@Entry
@Component
export struct ZhSingleRow06 {
  @State compDTO: CompDTO = {} as CompDTO
  @State newsStatusOfUser: batchLikeAndCollectResult = {
    likeStatus: '0'
  } as batchLikeAndCollectResult // 点赞、收藏状态
  @State loadImg: boolean = false;

  async aboutToAppear(): Promise<void> {
    this.getInteractDataStatus()
    this.loadImg = await onlyWifiLoadImg();
  }


  /**
   * 点赞、取消点赞
   */
  async toggleLikeStatus() {
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    const commentInfo = this.compDTO.operDataList[0]?.commentInfo as commentInfo;
    // commentLikeChange(this.item)
    // this.newsStatusOfUser.likeStatus = this.newsStatusOfUser.likeStatus === '1' ? '0' : '1';
    const commentLikeParam = {
      targetId: commentInfo.newsId || '',
      id: commentInfo.commentId,
      targetType: commentInfo?.objectType || '',
      api_status: this.newsStatusOfUser?.likeStatus == '1' ? false : true
    } as commentItemModel;
    commentViewModel.commentLike(commentLikeParam).then(() => {
      this.newsStatusOfUser.likeStatus = this.newsStatusOfUser.likeStatus === '1' ? '0' : '1';
    }).catch((err: Error) => {
      console.log('06-err', JSON.stringify(err))
    })
  }

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

  build() {
    Column() {
      //顶部
      if (this.compDTO.operDataList?.length > 0) {
        this.CompHeader(this.compDTO)
      }

      Column(){
        Text(this.compDTO.operDataList[0]?.commentInfo?.commentTitle)
          .fontWeight(500)
          .maxLines(4)
          .textOverflow({overflow: TextOverflow.Ellipsis})
          .lineHeight(23)
          .fontSize(16)
          .margin({bottom: 10})
          .padding({bottom: 10})
          .textAlign(TextAlign.Start)
          .width('100%')
          .border({width: {bottom: 1}})
          .borderColor(0xf4f4f4)


        Row() {
          Image($r('app.media.icon_clip'))
            .width(16)
            .height(16)
            .margin({right: 5})
          Text(this.compDTO.operDataList[0]?.commentInfo?.newsTitle)
            .maxLines(1)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .fontSize(14)
            .fontColor(0x666666)
        }
        .justifyContent(FlexAlign.Start)
        .width('100%')
      }
      .width("100%")
      .padding({top: 12, bottom: 12, left: 10, right: 10})
      .backgroundColor(0xf9f9f9)
      .borderRadius(4)
      .margin({bottom: 12})
      .onClick(() => {
        ProcessUtils.commentGotoWeb(this.compDTO.operDataList[0]?.commentInfo as commentInfo)
      })

      Row() {
        Text(DateTimeUtils.getCommentTime(this.compDTO.operDataList[0]?.commentInfo?.publishTime))
          .fontSize(12)
          .fontColor(0x999999)

        Row(){
          Image(Number(this.newsStatusOfUser?.likeStatus) == 1 ? $r('app.media.icon_like_select') : $r('app.media.icon_like'))
            .width(16)
            .height(16)
            .margin({right: 3})

          Text('点赞')
            .fontSize(15)
            .fontColor(0x999999)
            .onClick(() => {
            })
        }
        .onClick(() => {
          this.toggleLikeStatus()
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor($r('app.color.white'))
  }

  @Builder
  CompHeader(item: CompDTO) {
    Row() {
      Row() {
        Image(
          this.loadImg
            ? item.operDataList[0]?.commentInfo?.userHeaderUrl
              ? item.operDataList[0].commentInfo.userHeaderUrl
              : $r('app.media.default_head')
            : $r('app.media.icon_default_head_mater'))
          .width(32)
          .height(32)
          .borderRadius(16)
          .margin({right: 8})
        Text(item.operDataList[0]?.commentInfo?.userName)
          .lineHeight(32)
          .fontSize(14)
          .fontColor(0x222222)
          .maxLines(1)
          .fontWeight(500)
          .textOverflow({overflow: TextOverflow.Ellipsis})
      }
      .onClick(() => {
        ProcessUtils.commentGotoWeb(item.operDataList[0]?.commentInfo as commentInfo)
      })

      Row() {
        Image($r("app.media.icon_elite_comment"))
          .width(45)
          .height(22)
          .margin({ right: 1 })
        Image($r("app.media.more"))
          .width(14)
          .height(14)
      }
      .onClick(() => {
        WDRouterRule.jumpWithPage(WDRouterPage.QualityCommentsPage)
      })
    }
    .margin({bottom: 10})
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
  }
}

@Extend(Text)
function textOverflowStyle(maxLine: number) {
  .maxLines(maxLine)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}