import { ContentDTO, slideShows, CompDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant';
import { DateTimeUtils } from 'wdKit';
import { ProcessUtils } from 'wdRouter';
import { Notes } from './notes';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index';
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'

/**
 * 时间链卡--CompStyle:  09
 */
const TAG: string = 'Card9Component';

@Component
export struct Card9Component {
  @ObjectLink compDTO: CompDTO
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  // @State loadImg: boolean = true;
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []
  pageShowTime:number = 0;
  pageHideTime:number = 0;
  @State hideDetail: boolean = false;

  onPageShow() {
    this.pageShowTime = DateTimeUtils.getTimeStamp()
  }

  initHideDetail() {
    const curRouter = router.getState().name;
    if (curRouter === 'MyCollectionListPage') {
      this.hideDetail = true;
    }
  }

  //内容浏览Tracking
  onPageHide(): void {
    this.pageHideTime = DateTimeUtils.getTimeStamp()
    let duration = 0
    duration = Math.floor((this.pageHideTime - this.pageShowTime)/1000)
    TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Customer_Personal,TrackConstants.PageName.Customer_Personal,duration)
  }

  async aboutToAppear(): Promise<void> {
    console.log('Card9Component', JSON.stringify(this.contentDTO))
    this.titleInit();
    // this.loadImg = await onlyWifiLoadImg();
    const curRouter = router.getState().name;
    this.clicked = hasClicked(this.contentDTO.objectId, curRouter)
    this.initHideDetail();
  }

  titleInit() {
    const titleInitRes:titleInitRes = SearchShowRed.titleInit(this.contentDTO.title);
    this.titleMarked = titleInitRes.titleMarked;
    this.textArr = titleInitRes.textArr;
  }

  formatTime(timeStamp: number) {
    let todayDate = new Date().setHours(0,0,0,0);
    let paramsDate = new Date(timeStamp).setHours(0,0,0,0);
    let isToday = todayDate === paramsDate
    let format: string = isToday ? 'HH:mm' : 'MM月dd日 HH:mm';
    return DateTimeUtils.formatDate(timeStamp, format)
  }

  build() {
    Column() {
      // 顶部标题，最多两行
      if (this.contentDTO.titleShow === 1 && this.contentDTO.newsTitle) {
        Text() {
          if (this.titleMarked) {
            ForEach(this.textArr, (textItem: textItem) => {
              if (textItem.isRed) {
                Span(textItem.content)
                  .fontColor(0xED2800)
              } else {
                Span(textItem.content)
              }
            })
          } else {
            Span(this.contentDTO.newsTitle)
          }
        }
        .fontColor(this.clicked ? 0x848484 : 0x222222)
        .width(CommonConstants.FULL_WIDTH)
        .fontSize($r('app.float.font_size_18'))
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ top: 10, bottom: 10 })
        .fontWeight(400)
      }
      // 大图
      Stack() {
        Image(this.contentDTO.coverUrl)
          .backgroundColor(0xf5f5f5)
          .width('100%')
          .height(133)
          .borderRadius({
            topLeft: $r('app.float.image_border_radius'),
            topRight: $r('app.float.image_border_radius')
          })
        if(this.contentDTO.objectType == '5'){
          Notes({ objectType: this.contentDTO.objectType,objectLevel:this.contentDTO.objectLevel }).height(20).align(Alignment.Center)
            .margin({ left: 5, bottom: 5 })
        } else {
          if (this.contentDTO.seoTags) {
            Notes({ newTags: this.contentDTO.seoTags }).height(20).align(Alignment.Center)
          }
          if (this.contentDTO.newTags) {
            Notes({ newTags: this.contentDTO.newTags }).height(20).align(Alignment.Center)
          }
          if (this.contentDTO.top === 1) {
            Notes({ newTags: '置顶' }).height(20).align(Alignment.Center)
          }
        }

      }.alignContent(Alignment.BottomStart)

      // 时间线--后端返回三个，
      if (!this.hideDetail) {
        Column() {
          ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
            this.timelineItem(item, index, index === this.contentDTO.slideShows.length - 1)
          })
        }
      }

      // 底部-查看更多。根据接口返回的isMore判断是否显示查看更多
      if (this.contentDTO.hasMore == 1 && !this.hideDetail) {
        Row() {
          Text("查看更多")
            .fontSize($r("app.float.font_size_14"))
            .fontColor($r("app.color.color_222222"))
            .margin({ right: 1 })
          Image($r("app.media.more"))
            .width(14)
            .height(14)
        }
        .backgroundColor($r('app.color.color_F5F5F5'))
        .width(CommonConstants.FULL_WIDTH)
        .height(40)
        .borderRadius($r('app.float.button_border_radius'))
        .justifyContent(FlexAlign.Center)
        .margin({ top: 5 })
      }
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      top: 5,
      left: 16,
      right: 16,
      bottom: 14
    })
    .backgroundColor($r("app.color.white"))
    .margin({ bottom: 8 })
    .onClick((event: ClickEvent) => {
      InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
      if (router.getState().name !== 'MyCollectionListPage') {
        this.clicked = true;
      }
      persistentStorage(this.contentDTO.objectId);
      ProcessUtils.processPage(this.contentDTO)
    })
  }

  @Builder
  timelineItem(item: slideShows, index: number, isLastOne: boolean) {
    Column() {
      Stack() {
        if (index === 0) {
          Divider()
            .vertical(true)
            .color($r('app.color.color_EDEDED'))
            .strokeWidth(1)
            .margin({ top: 16, left: 4 })
            .height(16)
        } else {
          Divider()
            .vertical(true)
            .color($r('app.color.color_EDEDED'))
            .strokeWidth(1)
            .margin({ top: 0, left: 4 })
            .height(16)
          if (!isLastOne)
          {
            Divider()
              .vertical(true)
              .color($r('app.color.color_EDEDED'))
              .strokeWidth(1)
              .margin({ top: 16, left: 4 })
              .height(16)
          }
        }

        // Divider()
        //   .vertical(true)
        //   .color($r('app.color.color_EDEDED'))
        //   .strokeWidth(1)
        //   .margin({ top: index > 0 ? 0 : 32, left: 4 })
        //   .height(16)

        Column() {
          Row() {
            // 标题
            Image($r("app.media.timeAxis"))
              .width(9)
              .height(6)
              .margin({ right: 5 })
              .fillColor(item.newsTitleColor)

            Text(this.formatTime(item.publishTime))
              .fontSize($r('app.float.font_size_12'))
              .fontColor($r('app.color.color_222222'))
              .fontWeight(600)
          }
          .width(CommonConstants.FULL_WIDTH)
          .height(32)
          .alignItems(VerticalAlign.Center)

          Row() {
            Text(item.newsTitle)
              .fontSize($r('app.float.font_size_17'))
              .fontWeight(400)
              .fontColor($r('app.color.color_222222'))
              .layoutWeight(1)
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .alignSelf(ItemAlign.Center)
              .margin({ left: 4 })
              .padding({ bottom: 20, left: 12 })
              .border({ width: { left: isLastOne ? 0 : 1 }, color: 0xededed})
          }
        }
      }
      .alignContent(Alignment.TopStart)
    }
    .alignItems(HorizontalAlign.Start)
  }
}