import { CompDTO, ContentDTO } from 'wdBean';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { hasClicked } from '../../utils/persistentStorage';
import { ToastUtils } from 'wdKit/Index';
import { router } from '@kit.ArkUI';
import { TrackConstants, Tracking, TrackingContent, TrackParamConvert } from 'wdTracking/Index';
import { HttpUtils } from 'wdNetwork/Index';
import { LiveModel } from '../../viewmodel/LiveModel';

const TAG: string = 'LiveBigImage01Component';

/**
 * 本地样式卡：直播预约卡
 */
@Component
export struct LiveBigImage01Component {
  @ObjectLink compDTO: CompDTO
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  index: number = 0
  @State isLoadingAttention: boolean = false

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

  build() {
    Column() {
      Stack() {
        Image(this.loadImg ? this.contentDTO.fullColumnImgUrls[0]?.url : '')
          .width('100%')
          .aspectRatio(16 / 9)
          .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : $r('app.color.color_33A3A3A3'))
          .objectFit(ImageFit.Contain)
          .borderWidth(0.5)
          .borderColor($r('app.color.color_0D000000'))
          .borderRadius({
            topLeft: '4vp',
            topRight: '4vp'
          })
        this.LiveImage()



      }
      .alignContent(Alignment.BottomEnd)

      Text(this.contentDTO.newsTitle)
        .fontSize(17)
        .maxLines(2)
        .lineHeight(25)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 4, left: 12, right: 12 })
        .alignSelf(ItemAlign.Start)
      Row() {
        if (this.contentDTO.liveInfo && this.contentDTO.liveInfo.liveStartTime) {
          Row() {
            Image($r('app.media.reserve_play_icon'))
              .width(20)
              .height(20)
              .margin({
                left: 10,
                top: 2,
                bottom: 2,
                right: 6
              })

            Text(this.getReserveDate(this.contentDTO.liveInfo.liveStartTime, 1))
              .fontSize(12)
              .fontWeight(500)
              .fontColor('#ED2800')
              .fontFamily('PingFang SC-Medium')
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .margin({ top: 8, bottom: 8 })
              .align(Alignment.Start)

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

            Text(this.getReserveDate(this.contentDTO.liveInfo.liveStartTime, 2))
              .fontSize(12)
              .fontWeight(500)
              .fontColor('#ED2800')
              .fontFamily('PingFang SC-Medium')
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .margin({ top: 8, bottom: 8, right: 10 })
              .align(Alignment.Start)
          }
          .backgroundColor('#F5F5F5')
          .margin(12)
        }
        // 预约
        Row() {
          LoadingProgress()
            .width(20)
            .height(20)
            .color(!this.isReserved() ? $r('app.color.color_fff') : $r('app.color.color_CCCCCC'))
            .visibility((this.isLoadingAttention) ? Visibility.Visible :
            Visibility.None)

          Text(!this.isReserved() ? '预约' : '已预约')
            .fontSize($r('app.float.vp_12'))
            .fontWeight(500)
            .fontColor(!this.isReserved() ? $r('app.color.color_fff') : $r('app.color.color_CCCCCC'))
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
            .visibility((this.isLoadingAttention) ? Visibility.None :
            Visibility.Visible)
            .margin({
              right: '10vp'
            })
            // .textShadow({
            //   radius: 2,
            //   color: 'rgba(0,0,0,0.3)',
            //   offsetY: 2
            // })
            .backgroundColor(!this.isReserved() ? $r('app.color.color_ED2800') : $r('app.color.color_F5F5F5'))
            .borderRadius(3)

        }
        .onClick(() => {
          this.bookAndCancel(this.contentDTO)
        })
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)
        .borderRadius(3)
        .width('52vp')
        .height('24vp')
        .margin({ right: 12 })

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

    }
    .borderRadius(4)
    .backgroundColor(Color.White)
    .width('calc(100% - 24vp)')
    .margin({
      left: '12vp',
      right: '12vp',
      top: this.index == 0 ? '12vp' : '8vp'
    })
    .onClick(() => {

      // 内容点击埋点
      TrackingContent.common(TrackConstants.EventType.Click,
        this.pageId,
        this.pageId,
        TrackParamConvert.program(this.contentDTO))

      ProcessUtils.processPage(this.contentDTO)
    })
    .onVisibleAreaChange([0, 1], (isVisiable: boolean, ratio: number) => {
      if (isVisiable) {
        // 内容曝光埋点
        TrackingContent.common(TrackConstants.EventType.Show,
          this.pageId,
          this.pageId,
          TrackParamConvert.program(this.contentDTO))
      }
    })
  }

  @Builder
  LiveImage() {
    Row() {
      Image($r('app.media.reserve_new_icon'))
        .width(14)
        .height(14)
        .margin({
          right: 3
        })
      Text('预约')
        .fontSize('12vp')
        .fontWeight(400)
        .fontColor(Color.White)
        .textShadow({
          radius: 2,
          color: 'rgba(0,0,0,0.3)',
          offsetY: 2
        })
    }
    .backgroundColor(Color.Transparent)
    .margin({ right: 8, bottom: 8 })
  }

  getReserveDate(eventDateTimeString: string, type: number): string {
    // 解析事件的日期和时间
    const eventDateTime = new Date(eventDateTimeString);
    const currentDateTime = new Date();

    // 截取事件时间的小时和分钟（假设事件时间是按照24小时制）
    const eventHour = eventDateTime.getHours();
    const eventMinutes = eventDateTime.getMinutes();
    const eventTimeStr = `${eventHour}:${eventMinutes.toString().padStart(2, '0')}开始`; // 格式化时间，确保分钟是两位数
    if (type === 1) {
      // 判断是否是今天
      const eventDate = eventDateTime.setHours(0, 0, 0, 0);
      const currentDate = currentDateTime.setHours(0, 0, 0, 0);
      if (eventDate === currentDate) {
        return `今天`;
      } else {
        const month = eventDateTime.getMonth() + 1;
        const date = eventDateTime.getDate();
        if(date < 10){
          return `${month}月${'0'+date}日`;
        }else{
          return `${month}月${date}日`;
        }
      }
    } else {
      return `${eventTimeStr}`;
    }
  }

  // 预约/取消预约
  async bookAndCancel(item: ContentDTO) {

    // 未登录，跳转登录
    if (!HttpUtils.getUserId()) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }
    if (!this.isLoadingAttention) {
      this.isLoadingAttention = true
      const reserveItem = item.reserveItemBean
      if (reserveItem) {
        this.isLoadingAttention = true
        try {

          // 埋点
          Tracking.event(!reserveItem.subscribe ? "live_subscribe_click" : "cancel_live_subscribe_click",
            TrackParamConvert.program(item))

          const res = await LiveModel.liveAppointment(reserveItem.relationId, reserveItem.liveId.toString(),
            !reserveItem.subscribe);
          if (res.code == 0) {
            ToastUtils.shortToast(!reserveItem.subscribe ? '预约成功' : '取消预约成功')
            reserveItem.subscribe = !reserveItem.subscribe ? true : false
          }
          this.isLoadingAttention = false
        } catch (e) {
          this.isLoadingAttention = false
        }
      } else {
        this.isLoadingAttention = false
      }
    }
  }

  // 判断是否预约
  isReserved() {

    if (this.compDTO.operDataList[0].reserveItemBean == undefined) {
      return false
    }

    return this.compDTO.operDataList[0].reserveItemBean.subscribe
  }
}