import {  DisplayUtils,Logger, NumberFormatterUtils } from 'wdKit/Index'
import { LikeViewModel } from '../../viewmodel/LikeViewModel'
import { SPHelper } from 'wdKit';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index';
import { ContentDetailDTO } from 'wdBean/Index';
import measure from '@ohos.measure'
import {
  ContentDetailRequest,
  postExecuteLikeParams,
  batchLikeAndCollectParams,
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { ParamType, TrackConstants, TrackingButton, TrackingContent } from 'wdTracking/Index';
import { promptAction } from '@kit.ArkUI';

const TAG = 'LikeComponent';

interface ILikeStyleResp {
  url: Resource;
  name: string;
}
interface parsedObj {
  contentId: string,
  likeStatus: string
}

@Component
export struct LikeComponent {
  @Consume contentDetailData: ContentDetailDTO
  @Prop pageComponentType: number
  @State likesStyle: number | string = 1 // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
  @State likeStatus: boolean = false
  @State openLikes: boolean = false // 是否可以点赞  1：可以 0：不可以
  viewModel: LikeViewModel = new LikeViewModel()
  @Prop @Watch('onDataUpdated') data: Record<string, string>
  enableBtn = true
  componentType: number = 1 //1: 底部栏目样式    2: 新闻页中间位置样式  3:动态Tab内容下的互动入口
  styleType: number = 1 //1: 白色背景（图文底部栏）    2: 黑色背景（图集底部栏） 3 透明背景
  @State likeCount: number = 0 //点赞数
  pageParam: ParamType = {}
  @Consume pageName: string
  @Consume pageId: string
  private dialogBeforeJumpOtherPageAction: () => void = () => {}

  //上层传值  样例
  // this.data['contentId'] = '30035444649' //必须
  // this.data['userName'] = '人民日报网友2kD2xW'
  // this.data['contentType'] = '8'  //必须
  // this.data['title'] = '开创两校交流先河！克罗地亚教育代表团访问同济大学'
  // this.data['userHeaderUrl'] = ""
  // this.data['channelId'] = "2059"  //必须
  // this.data['status'] = "1"
    // 内容用 是否开启点赞 1是 0否;
  // this.contentDetailData.openLikes == 1
  aboutToAppear() {
    // 2：竖屏直播页 3：图集 4：横屏直播页
    if(this.pageComponentType == 2 || this.pageComponentType == 4) {
      // 点赞样式 love爱心型  thumb点赞手势 mourning 蜡烛(默哀) pray 祈福
      this.likesStyle = String(this.contentDetailData?.liveInfo?.likesStyle)
      this.openLikes = this.contentDetailData?.liveInfo?.likeEnable == 1 ? true : false
    } else {
      // 内容用 点赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
      this.likesStyle = this.contentDetailData.likesStyle
      this.openLikes = this.contentDetailData.openLikes == 1 ? true : false
    }
    // console.log(TAG, 'this.contentDetailData', JSON.stringify(this.contentDetailData))
    // console.log(TAG, 'this.componentType', this.componentType)
    // console.log(TAG, 'this.likesStyle', this.likesStyle)
    // console.log(TAG, 'this.openLikes', this.openLikes)
    this.onDataUpdated()
    this.contentTrackingDict()
  }

  onDataUpdated() {
    if (this.data) {
      if (this.data['contentType'] !== undefined ) {
        console.log(TAG, 'CarderInteraction 点赞点击')
        //获取点赞状态
        this.getLikeStatus()
        //获取点赞数
        this.getLikeCount()
      }
    }
  }

  contentTrackingDict(){
    this.pageParam = {
      'contentType': `${this.contentDetailData.newsType}`,
      'contentId': `${this.contentDetailData.newsId}`,
      'contentName': `${this.contentDetailData.newsTitle || ''}`,
    }
  }

  build() {

    if (this.componentType == 2) {
      //2: 新闻页中间位置样式
      this.likeCompStyle2()
    } else if (this.componentType == 3) {
      //卡片底部互动样式
      this.likeCompStyle3()
    } else if (this.componentType == 4) {
      // 使用包括频道视频底部点赞
      this.likeCompStyle4()
    } else if (this.componentType == 5) {
      // 图集点赞，展示标识
      this.likeCompStyle5()
    }else if (this.componentType == 6) {
      // H5
      this.likeCompStyle6()
    } else {
      //1: 底部栏目样式  默认样式
      this.likeCompStyle1()
    }
  }

  /**
   * 将点赞样式转换为icon
   */
  transLikeStyle(): ILikeStyleResp {
    if (this.likesStyle === 1 || this.likesStyle === 'love' || this.likesStyle === 'thumb') {
      return {
        url: this.likeStatus ? $r(`app.media.ic_like_check`) :
          this.styleType == 1 ?
            this.componentType == 3 ? $r(`app.media.CarderInteraction_like`) : $r('app.media.icon_like_default') :
          $r(`app.media.ic_like_uncheck`),
        name: '赞'
      }
    } else if (this.likesStyle === 2 || this.likesStyle === 'pray') {
      return {
        url: this.likeStatus ? $r(`app.media.ic_thub_check`) : $r(`app.media.ic_thub_uncheck`),
        name: '祈祷'
      }
    } else if (this.likesStyle === 3 || this.likesStyle === 'mourning') {
      return {
        url: this.likeStatus ? $r(`app.media.icon_candle_active`) :
        $r(`app.media.icon_candle_unactive`),
        name: '默哀'
      }
    }
    return {
      url: this.likeStatus ? $r(`app.media.ic_like_check`) :
        this.styleType == 1 ? $r('app.media.icon_like_default') : $r(`app.media.ic_like_uncheck`),
      name: '点赞'
    }
  }

  @Builder
  likeCompStyle2() {
    //2: 新闻页中间位置样式
    Column() {
      Button() {
        Row() {
          Image(this.transLikeStyle().url)
            .width(20)
            .height(20)
          Text(this.likeCount.toString())
            .height(20)
            .margin({
              right: 0,
              left: 4
            })
            .fontColor(this.likeStatus ? '#ED2800' : '#222222')
            .fontSize('16')
        }
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%')

      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.White)
      .type(ButtonType.Capsule)
      .borderColor('#EDEDED')
      .borderRadius(20)
      .borderWidth(1)
      .onClick(() => {
        this.clickButtonEvent()
      })
    }
    .width(154)
    .height(40)
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
  }

  @Builder
  likeCompStyle3() {
    Row() {
      Image(this.transLikeStyle().url)
        .width(18)
        .height(18)
      Text(this.likeStatus ? '已赞' : '点赞')// Text(this.likeCount > 0 ? this.likeCount.toString() : '点赞')
        .margin({ left: 4 })
        .fontSize(14)
        .fontColor(this.likeStatus ? '#ED2800' : '#666666')
    }
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.clickButtonEvent()
    })
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
  }

  @Builder
  likeCompStyle1() {
    //1: 底部栏目样式  默认样式
    Column() {
      // Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
      Image(this.transLikeStyle().url)
        .width(24)
        .height(24)
        .onClick(() => {
          this.clickButtonEvent()
        })
    }
    .width(24)
    .height(24)
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
  }

  @Builder
  likeCompStyle5() {
    //1: 底部栏目样式  默认样式
    Stack({ alignContent: Alignment.Bottom }) {
      Image(this.transLikeStyle().url)
        .width(24)
        .height(24)
      if (this.likeCount > 0){
        RelativeContainer() {
          Image(this.likeStatus ? $r('app.media.ic_like_back_Select') : $r('app.media.ic_like_back'))
            .objectFit(ImageFit.Fill)
            .resizable({
              slice: {
                top: 1,
                left: 20,
                right: 1,
                bottom: 1
              }
            })
            .alignRules({
              top: { anchor: "Text", align: VerticalAlign.Top },
              left: { anchor: "Text", align: HorizontalAlign.Start },
              right: { anchor: "Text", align: HorizontalAlign.End },
              bottom: { anchor: "Text", align: VerticalAlign.Bottom },
            })
            .id("Image")

          Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))// Text("44444444")
            .fontSize(8)
            .fontColor('#ffffff')// .backgroundColor('#ED2800')
            .height(12)
            .textAlign(TextAlign.Center)
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start }
            })/*动态计算文字宽度*/
            .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
              12)// .backgroundColor(Color.Green)
            .id("Text")
            .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
        }
        .offset({
          x: 12
        })
      }

      // Column() {
      //   // Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
      //   Image(this.transLikeStyle().url)
      //     .width(24)
      //     .height(24)
      //     .onClick(() => {
      //       this.clickButtonEvent()
      //     })
      // }
      //
      // Row() {
      //   Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))
      //     .fontSize(8)
      //     .fontColor(Color.White)
      //     .padding({ left: 4, right: 2 })
      // }
      // .height(12)
      // .alignItems(VerticalAlign.Center)
      // .position({ x: '100%', })
      // .markAnchor({ x: '100%' })
      // .backgroundImage(this.likeStatus ? $r('app.media.ic_like_back_Select') : $r('app.media.ic_like_back'))
      // .backgroundImageSize(ImageSize.Auto)
      // .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
    }.width(24).height(24).onClick(() => {
      this.clickButtonEvent()
    })
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
  }

  @Builder
  likeCompStyle4() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image(this.transLikeStyle().url)
        .width(24)
        .height(24)
      .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : this.pageComponentType === 8 ? Color.Transparent : '#FFF5F5F5')
      if (this.likeCount != 0) {
        RelativeContainer() {
          Image(this.styleType == 1 ? $r('app.media.comment_icon_number_bg') : $r('app.media.ic_like_back_Select'))
            .objectFit(ImageFit.Fill)
            .resizable({
              slice: {
                top: 1,
                left: 20,
                right: 1,
                bottom: 1
              }
            })
            .alignRules({
              top: { anchor: "Text", align: VerticalAlign.Top },
              left: { anchor: "Text", align: HorizontalAlign.Start },
              right: { anchor: "Text", align: HorizontalAlign.End },
              bottom: { anchor: "Text", align: VerticalAlign.Bottom },
            })
            .id("Image")

          Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))// Text("44444444")
            .fontSize(8)
            .fontColor(Color.White)
            .height(12)
            .textAlign(TextAlign.Center)
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start }
            })
              /*动态计算文字宽度*/
            .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
              8)
            .padding({left:2})
            .id("Text")
            .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
        }
        .offset({
          x: 12
        })
      }
    }
    .width(24)
    .height(24)
    .onClick(() => {
      this.clickButtonEvent()
    })
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)

  }


  @Builder
  likeCompStyle6() {
    //1:H5 底部栏目样式  默认样式
    Stack({ alignContent: Alignment.Bottom }) {
      Image(this.transLikeStyle().url)
        .width(24)
        .height(24)
      if (this.likeCount > 0){
        RelativeContainer() {
          Image($r('app.media.ic_like_white_Select'))
            .objectFit(ImageFit.Fill)
            .resizable({
              slice: {
                top: 1,
                left: 20,
                right: 1,
                bottom: 1
              }
            })
            .alignRules({
              top: { anchor: "Text", align: VerticalAlign.Top },
              left: { anchor: "Text", align: HorizontalAlign.Start },
              right: { anchor: "Text", align: HorizontalAlign.End },
              bottom: { anchor: "Text", align: VerticalAlign.Bottom },
            })
            .id("Image")

          Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))// Text("44444444")
            .fontSize(8)
            .fontColor('#ffffff')// .backgroundColor('#ED2800')
            .height(12)
            .textAlign(TextAlign.Center)
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start }
            })/*动态计算文字宽度*/
            .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
              12)// .backgroundColor(Color.Green)
            .id("Text")
            .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
        }
        .offset({
          x: 12
        })
      }
    }.width(24).height(24).onClick(() => {
      this.clickButtonEvent()
    })
    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
  }

  async clickButtonEvent() {
    console.log(TAG, '点赞点击')
    // 未登录，跳转登录
    const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
    if (!user_id) {
      console.log(TAG, '点赞点击,未登录')
      if (this.dialogBeforeJumpOtherPageAction) { this.dialogBeforeJumpOtherPageAction() }
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    // if (!this.enableBtn) {
    //   return
    // }
    this.executeLike(this.likeStatus ? '0' : '1')

  }

  executeLike(status: string) {
    console.log(TAG, '点赞接口调用', status)

    const params: postExecuteLikeParams = {
      status: Number(status),
      contentId: this.data['contentId'],
      contentType: this.data['contentType']
    }
    if(this.data['relType']) {
      params.relType = this.data['relType']
    }
    if(this.data['contentRelId']) {
      params.contentRelId = this.data['contentRelId']
    }
    if(this.data['channelId']) {
      params.channelId = this.data['channelId']
    }

    console.log(TAG, "点赞 params", JSON.stringify(params))
    ContentDetailRequest.postExecuteLike(params).then((data) => {

      if (data.code != 0) {
        promptAction.showToast({ message: data.message })
      }else {
        console.log(TAG, '点赞接口调用成功', JSON.stringify(data))

        // 直播点赞一直增加
        if (this.contentDetailData.liveInfo) {
          this.likeStatus = true
          this.likeCount++
          TrackingContent.like(true,this.pageId,this.pageName,this.pageParam)
        } else {
          this.likeStatus = !this.likeStatus
          //点赞和取消点赞成功后更新点赞数
          if (this.likeStatus) {
            this.likeCount++
            TrackingContent.like(true,this.pageId,this.pageName,this.pageParam)
          } else {
            this.likeCount--
            TrackingContent.like(false,this.pageId,this.pageName,this.pageParam)
          }

        }

        if (this.likeCount <= 0) {
          this.likeCount = 0
        }

        this.enableBtn = true

      }
    }).catch(() => {
      this.enableBtn = true
    })
  }

  getLikeStatus() {
    // console.log(TAG, "this.data", JSON.stringify(this.data))
    const params: batchLikeAndCollectParams = {
      contentList: [
        {
          contentId: this.data['contentId'],
          contentType: this.data['contentType'],
          contentRelId: this.data['contentRelId'] == "0" ? '' :  this.data['contentRelId'] || ''  + '',
        }
      ]
    }
    // console.log(TAG, "CarderInteraction 查询点赞状态params", JSON.stringify(params))
    ContentDetailRequest.postBatchLikeAndCollectStatus(params).then(res => {
      // console.log(TAG, 'CarderInteraction 查询点赞、收藏状态==', JSON.stringify(res.data))
      if (res.data) {
        if(res.data[0].likeStatus) {
          this.likeStatus = res.data[0].likeStatus ? true : false
        } else {
          this.likeStatus = false
        }
        // CarderInteraction组件交互
        if (this.data['likeStatus'] == "1") {
          this.likeStatus = true
        } else if (this.data['likeStatus'] == "0") {
          this.likeStatus = false
        }
      }
    }).catch(() => {
      this.likeStatus = false
    })
  }

  //获取点赞数
  getLikeCount() {
    this.viewModel.getLikeCount(this.data).then((data) => {
      if (data && data['data']) {
        this.likeCount = data['data']['likeNum']
      } else {
        this.likeCount = 0
      }
    }).catch(() => {
      this.likeCount = 0
    })
  }
  private getMeasureText(text: string) {
    let width = measure.measureText({
      textContent: text,
      fontSize: 8,
      lineHeight: 12,
      constraintWidth: DisplayUtils.getDeviceWidth(),
    })
    width = px2vp(width)
    return width
  }
}