import { CompDTO, ContentDTO, Params, Action } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../../repository/PageRepository';
import { ProcessUtils } from 'wdRouter';
import { HttpUtils } from 'wdNetwork/Index';
import { DateTimeUtils } from 'wdKit';
import { LiveModel } from '../../viewmodel/LiveModel'
import { Logger, ToastUtils } from 'wdKit';

/**
 * 直播预约卡
 * Zh_Single_Row-02
 */
const TAG = 'Zh_Single_Row-03'

interface reserveItem {
  liveId: number,
  relationId: string,
  subscribe: boolean
}

interface reserveReqItem {
  liveId: string,
  relationId: string,
}

@Entry
@Component
export struct ZhSingleRow03 {
  @State compDTO: CompDTO = {} as CompDTO
  @State isEndEdge: boolean = false;
  // @State reserveStatus: reserveItem[] = []
  @State reservedIds: string[] = [];
  scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    this.getReserveState();
  }

  // 请求所有预约状态
  async getReserveState() {
    const reserveBean: reserveReqItem[] = this.compDTO.operDataList.map((item: ContentDTO) => {
      const reqItem: reserveReqItem = {
        liveId: item.objectId,
        relationId: item.relId
      }
      return reqItem;
    })
    const res = await LiveModel.getAppointmentStatus(reserveBean);
    // this.reserveStatus = res;
    res.map((item: reserveItem) => {
      if (item.subscribe) {
        this.reservedIds.push(item.liveId.toString())
      }
    })
  }

  // 判断是否预约
  isReserved(liveId: number) {
    return this.reservedIds.includes(liveId.toString())
  }

  // 预约/取消预约
  async bookAndCancel(relationId: string, liveId: string, isSubscribe: boolean) {
    const res = await LiveModel.liveAppointment(relationId.toString(), liveId.toString(), isSubscribe);
    if (res.code == 0) {
      ToastUtils.shortToast(isSubscribe ? '预约成功' : '取消预约成功')
      this.getReserveState();
    }
  }

  format(timeNum: number) {
    const todayDate = new Date().setHours(0,0,0,0)
    const parseDate = new Date(timeNum).setHours(0,0,0,0);
    if (todayDate === parseDate) {
      return '今天'
    } else {
      const str = DateTimeUtils.formatDate(timeNum, 'MM月dd日')
      const month: string = str.split('月')[0];
      if (month[0] === "0") {
        return str.slice(1)
      } else {
        return str.slice(0)
      }
    }

  }

  build() {
    Column() {
      //顶部
      this.CompHeader(this.compDTO)

      Scroll(this.scroller){
        Row() {
          ForEach(this.compDTO.operDataList, (item: ContentDTO) => {
            this.ItemCard(item)
          })
        }
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .onScrollEdge((side: Edge) => {
        if (side === Edge.End) {
          this.isEndEdge = true;
        }
      })
      .onScrollStop(() => {
        if (this.isEndEdge) {
          this.jumpToMore();
        }
      })
      .onScroll((xOffset: number, yOffset: number) => {
        this.isEndEdge = false;
      })
    }
    .padding({
      left: $r('app.float.card_comp_pagePadding_lf'),
      right: $r('app.float.card_comp_pagePadding_lf'),
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor($r('app.color.white'))
  }

  @Builder
  ItemCard(item: ContentDTO) {
    Column() {
      Row() {
        Image(item.coverUrl)
          .width(106)
          .height(60)
          .margin({right: 12})
        Text(item.newsTitle)
          .width(154)
          .height(60)
          .maxLines(3)
          .textOverflow({overflow: TextOverflow.Ellipsis})
      }
      .margin({bottom: 16})

      Row() {
        Flex({justifyContent: FlexAlign.SpaceBetween}){
          Row() {
            Text(this.format(new Date(item.liveInfo.liveStartTime).getTime()))
              .margin({right: 6})
              .fontColor(0x000000)
              .fontSize(13)
              .textAlign(TextAlign.Start)
            Image($r('app.media.timeline_rect'))
              .width(4)
              .height(3)
              .margin({right: 6})
            Text(item.liveInfo.liveStartTime.split(' ')[1].slice(0, 5))
              .margin({right: 6})
              .fontColor(0x000000)
              .fontSize(13)
            Text('开始直播')
              .fontColor(0xC8C8C8)
              .fontSize(13)
          }

          Row() {
            Text(this.isReserved(Number(item.objectId)) ? '已预约' : '预约')
              .width(48)
              .height(24)
              .backgroundColor(this.isReserved(Number(item.objectId)) ? 0xffffff : 0xED2800)
              .fontColor(this.isReserved(Number(item.objectId)) ? 0xC8C8C8 : 0xffffff)
              .fontSize(12)
              .textAlign(TextAlign.Center)
              .borderRadius(3)
              .onClick(() => {
                this.bookAndCancel(item.relId, item.objectId, !this.isReserved(Number(item.objectId)))
              })

          }
          .margin({top: -5})
        }

      }
    }
    .width(298)
    .height(116)
    .padding({top: 12, bottom: 12, left: 12, right: 12})
    .backgroundColor(0xf9f9f9)
    .margin({right: 8})
    .onClick(() => {
      ProcessUtils.processPage(item)
    })
  }


  @Builder
  CompHeader(item: CompDTO) {
    Row() {
      Row() {
        Image($r("app.media.redLine"))
          .width(3)
          .height(16)
          .margin({ right: 4 })
        Text('直播预告')
          .fontSize($r("app.float.font_size_17"))
          .fontColor($r("app.color.color_222222"))
          .fontWeight(600)
      }

      Row() {
        Text("更多")
          .fontSize($r("app.float.font_size_14"))
          .fontColor($r("app.color.color_999999"))
          .margin({ right: 1 })
        Image($r("app.media.more"))
          .width(14)
          .height(14)
      }
      .padding({
        right: $r('app.float.card_comp_pagePadding_lf'),
      })
      .onClick(() => {
        this.jumpToMore();
      })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .margin({ top: 8, bottom: 8 })
    .width('100%')
  }

  private jumpToLiveMorePage() {
    WDRouterRule.jumpWithPage(WDRouterPage.reserveMorePage)
  }

  private jumpToMore() {
    if (this.compDTO.linkUrl) {
      let taskAction: Action = {
        type: 'JUMP_H5_BY_WEB_VIEW',
        params: {
          url: this.compDTO.linkUrl
        } as Params,
      };
      WDRouterRule.jumpWithAction(taskAction)
    } else {
      this.jumpToLiveMorePage()
    }
  }

}

@Extend(Text)
function textOverflowStyle(maxLine: number) {
  .maxLines(maxLine)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}

@Component
struct CreatorItem {
  @Prop item: ContentDTO
  @State rmhIsAttention: number = 0
  build() {
    ListItem() {
      Column() {
        Stack({ alignContent: Alignment.Bottom }) {
          Image(this.item.coverUrl)
            .width(156)
            .height(208)
          Row()
            .width(156)
            .height(80)
            .linearGradient({
              direction: GradientDirection.Bottom,
              colors: [['rgba(0, 0, 0, 0.0)', 0.0], ['rgba(0, 0, 0, 0.3)', 1.0]]
            })
          Text(this.item.newsTitle)
            .fontColor(0xffffff)
            .fontSize(14)
            .maxLines(2)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .width(140)
            .margin({bottom: 8})
        }
      }
      .width(156)
      .height(208)
      .margin({ right: 11 })
      .borderColor($r('app.color.color_EDEDED'))
      .borderRadius($r('app.float.image_border_radius'))
    }
    .onClick((event: ClickEvent) => {
      ProcessUtils.processPage(this.item)
    })
  }

  /**
   * 关注号主 TODO 这里后面需要抽离
   */
  handleAccention(item: ContentDTO, status: number) {
    this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
    return
    // 未登录，跳转登录
    if (!HttpUtils.getUserId()) {
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    const params: postInteractAccentionOperateParams = {
      attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
      attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
      attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
      // userType: 1,
      // userId: '1', // TODO 用户id需要从本地获取
      status: status,
    }
    PageRepository.postInteractAccentionOperate(params).then(res => {
      console.log(TAG, '关注号主==', JSON.stringify(res.data))
      if (status === 1) {
        this.rmhIsAttention = 0
      } else {
        this.rmhIsAttention = 1
      }
    })
  }
}