import { Logger } from 'wdKit/Index'
import { LikeViewModel } from '../../viewmodel/LikeViewModel'
import { SPHelper } from 'wdKit';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index';


const TAG = 'LikeComponent';

@Component
export struct LikeComponent {
  @State likeStatus: boolean = false
  viewModel: LikeViewModel = new LikeViewModel()
  @Prop data: Record<string, string>
  enableBtn = true
  componentType : number = 1   //1: 底部栏目样式    2: 新闻页中间位置样式
  styleType : number = 1   //1: 白色背景（图文底部栏）    2: 黑色背景（图集底部栏）
  @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(): void {
    if (this.data) {
      //获取点赞状态
      this.getLikeStatus()
      //获取点赞数
      this.getLikeCount()
    }

  }

  build() {
    if (this.componentType == 2){
      //2: 新闻页中间位置样式
      Column() {

        Button(){

          Row(){
            Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
              .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)


    }else {
      //1: 底部栏目样式  默认样式
      Column() {
        // Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
        Image(this.likeStatus ? $r('app.media.icon_like_select') : this.styleType == 1 ? $r('app.media.icon_like_default') :
        $r('app.media.icon_like_default_white'))
          .width(24)
          .height(24)
          .onClick(() => {
            this.clickButtonEvent()
          })
      }.width(24).height(24)
    }

  }

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

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

  }

  executeLike(status: string) {
    this.data['status'] = status
    this.viewModel.executeLike2(this.data).then(() => {
      this.likeStatus = !this.likeStatus
      //点赞和取消点赞成功后更新点赞数
      if(this.likeStatus){
        this.likeCount ++
      }else {
        this.likeCount --
      }
      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
    })
  }



}