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'

const TAG = 'LikeComponent';

interface ILikeStyleResp {
  url: Resource;
  name: string;
}

@Component
export struct LikeComponent {
  @Consume contentDetailData: ContentDetailDTO
  @Prop pageComponentType: number
  @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
  @State likeStatus: boolean = false
  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 //点赞数

  //上层传值  样例
  // 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"  

  aboutToAppear() {
    this.onDataUpdated()
  }

  onDataUpdated() {
    if (this.data) {
      if (this.data['channelId'] !== 'undefined') {
        //获取点赞状态
        this.getLikeStatus()
        //获取点赞数
        this.getLikeCount()
      }
    }
  }

  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 {
      //1: 底部栏目样式  默认样式
      this.likeCompStyle1()
    }
  }

  /**
   * 将点赞样式转换为icon
   */
  transLikeStyle(): ILikeStyleResp {
    if (this.likesStyle === 1) {
      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) {
      return {
        url: this.likeStatus ? $r(`app.media.ic_thub_check`) : $r(`app.media.ic_thub_uncheck`),
        name: '祈祷'
      }
    } else if (this.likesStyle === 3) {
      return {
        url: this.likeStatus ? $r(`app.media.ic_candle_check`) :
        $r(`app.media.ic_candle_uncheck`),
        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)
  }

  @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()
    })
  }

  @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)
  }

  @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()
    })
  }

  @Builder
  likeCompStyle4() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        Image(this.transLikeStyle().url)
          .width(24)
          .height(24)
          .onClick(() => {
            this.clickButtonEvent()
          })
      }
      .justifyContent(FlexAlign.Center)
      .width(36)
      .height(36)
      .borderRadius(18)
      .backgroundColor((this.pageComponentType === 4 || this.pageComponentType === 2) ? '#4D000000' : this.pageComponentType === 8 ? Color.Transparent : '#FFF5F5F5')
      Row() {
        Text(NumberFormatterUtils.formatNumberWithWan(this.likeCount || ''))
          .fontSize(8)
          .fontColor(Color.White)
          .padding({ left: 8, right: 2 })
      }
      .height(12)
      .alignItems(VerticalAlign.Center)
      .position({ x: '100%', y: 10 })
      .markAnchor({ x: '100%' })
      .backgroundImage($r('app.media.ic_like_back'))
      .backgroundImageSize({height: 13})
      .width(this.getMeasureText(NumberFormatterUtils.formatNumberWithWan(this.likeCount || '')) +
        12)
      .visibility(this.likeCount > 0 ? Visibility.Visible : Visibility.Hidden)
    }
    .width(36)
    .height(42)

  }

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

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

  }

  executeLike(status: string) {
    console.log(TAG, '点赞接口调用', status)
    this.data['status'] = status
    this.data['contentId'] = this.contentDetailData?.newsId + ''
    this.data['contentType'] = this.contentDetailData?.newsType + ''

    this.viewModel.executeLike2(this.data).then(() => {

      console.log(TAG, '点赞接口调用成功')

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

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

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

  getLikeStatus() {
    this.viewModel.getLikeStatus(this.data).then((data) => {
      if (data && data['data'].length && data['data'][0]['likeStatus']) {
        this.likeStatus = data['data'][0]['likeStatus']
      } else {
        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
  }
}