import { CompDTO, ContentDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { hasClicked, persistentStorage } from '../../utils/persistentStorage';
import { DateTimeUtils, NumberFormatterUtils } from 'wdKit/Index';
import { LottieView } from '../lottie/LottieView';
import { router } from '@kit.ArkUI';

const TAG: string = 'LiveBigImage02Component';

/**
 * 本地样式卡：直播大图卡
 */
@Component
export struct LiveBigImage02Component {
  @ObjectLink compDTO: CompDTO
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @Prop loadImg: boolean = true;
  @State clicked: boolean = false;
  index: number = 0
  @State compIndex: number = 0;

  async  aboutToAppear() {
    const curRouter = router.getState().name;
    this.clicked = hasClicked(this.contentDTO.objectId,curRouter)
    // this.loadImg = await onlyWifiLoadImg();
  }

  async aboutToReuse() {
    // this.loadImg = await onlyWifiLoadImg();
  }


  build() {
    Column() {
      Text(this.contentDTO.newsTitle)
        .fontSize(18)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 16, bottom: 8 })
        .alignSelf(ItemAlign.Start)
        .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))

      Stack() {
        if (this.contentDTO.fullColumnImgUrls && this.contentDTO.fullColumnImgUrls.length > 0) {
          Image(this.contentDTO.fullColumnImgUrls[0].url)//
            .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
            .width('100%')
            .aspectRatio(16 / 9)
            .borderRadius(4)
            .borderWidth(0.5)
            .borderColor($r('app.color.color_0D000000'))
        }
        this.LiveImage(this.contentDTO)
      }
      .alignContent(Alignment.BottomEnd)

      Row() {
        if (this.contentDTO.rmhInfo && this.contentDTO.rmhInfo.rmhName) {
          Text(this.contentDTO.rmhInfo.rmhName)
            .fontSize(12)
            .fontWeight(400)
            .fontColor($r('app.color.color_B0B0B0'))
            .fontFamily('PingFang SC-Medium')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .align(Alignment.Start)

          Image($r('app.media.point_live_icon'))
            .objectFit(ImageFit.Auto)
            .interpolation(ImageInterpolation.High)
            .width(16)
            .height(16)
            .margin(2)
        }

        Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTimestamp)))
          .fontSize(12)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .align(Alignment.Start)
          .width('100%')
          .fontColor($r('app.color.color_B0B0B0'))
      }
      .margin({ top: 8, bottom: 8 })

    }
    .borderRadius({
      topLeft:this.compIndex === 0 ? $r('app.float.image_border_radius'):0,
      topRight:this.compIndex === 0 ? $r('app.float.image_border_radius'):0
    })
    .width('100%')
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
    })
    .onClick(() => {
      this.clicked = true;
      persistentStorage(this.contentDTO.objectId);
      ProcessUtils.processPage(this.contentDTO)
    })
  }

  @Builder
  LiveImage(item: ContentDTO) {
    Row() {
      LottieView({
        name: 'live_status_wait-' + Math.random().toString().slice(2, 12),
        path: "lottie/live_detail_living.json",
        lottieWidth: 14,
        lottieHeight: 14,
        autoplay: true,
        loop: true
      })
        .margin({
          right: '2vp'
        })

      Text('直播中')
        .fontSize('12vp')
        .fontWeight(400)
        .fontColor(Color.White)
        .textShadow({
          radius: 2,
          color: 'rgba(0,0,0,0.3)',
          offsetX: 0,
          offsetY: 2
        })
        .margin({
          right: '5vp'
        })

      Image($r('app.media.icon_comp_line_live')).height('11vp').width('1.5vp')

      if (this.getLiveRoomNumber(this.compDTO.operDataList[0]).length > 0) {
        Text(this.getLiveRoomNumber(this.compDTO.operDataList[0]))
          .fontSize('12vp')
          .fontWeight(400)
          .textShadow({
            radius: 2,
            color: 'rgba(0,0,0,0.3)',
            offsetX: 0,
            offsetY: 2
          })
          .fontColor(Color.White)
          .margin({
            left: '5vp'
          })
      }

    }
    .justifyContent(FlexAlign.End)
    .margin({ right: 8, bottom: 8 })
  }

  // 判断是否预约
  getLiveRoomNumber(item: ContentDTO): string {
    const objc = item.liveRoomDataBean
    if (objc && objc.pv && objc.pv > 0) {
      return this.computeShowNum(objc.pv)
    }
    return ''
  }

  private computeShowNum(count: number): string {
    return NumberFormatterUtils.formatNumberWithWan(count) + '人参加'
  }
}