import { ContentDTO, slideShows, VideoInfoDTO, CompDTO, InteractDataDTO } from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant';
import { ProcessUtils } from 'wdRouter';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { Notes } from './notes';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'
import { BasePageHelp } from '../page/template/BasePageHelp';
import { Logger } from 'wdKit/Index';
import { hasClicked, persistentStorage } from '../../utils/persistentStorage';

/**
 * 大专题卡--CompStyle:  10
 */
const TAG: string = 'Card10Component';

@Preview
@Component
export struct Card10Component {
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @State loadImg: boolean = false;
  @ObjectLink compDTO: CompDTO
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []
  @State hideDetail: boolean = false;
  basePageHelp: BasePageHelp = new BasePageHelp
  // 稿件参与批查，需要对列表信息单独重绘
  @State isBatchData: boolean = false

  async aboutToAppear(): Promise<void> {
    console.log('Card10Component-compDTO', JSON.stringify(this.compDTO))
    console.log('Card10Component-contentDTO', JSON.stringify(this.contentDTO))

    this.titleInit();
    this.loadImg = await onlyWifiLoadImg();
    this.initHideDetail();

    if (!this.hideDetail) {
      this.isBatchData = false
      // 批查评论数据
      let interactArray = this.basePageHelp.getCompInteractParams(this.contentDTO.slideShows)
      if (interactArray.contentList != null && interactArray.contentList.length > 0) {
        this.basePageHelp.requestCompInteractData(interactArray)
          .then((result) => {
            if (result != null && result.length > 0) {
              this.isBatchData = true
              this.contentDTO.slideShows.forEach((slideShowBean) => {
                let newsId = slideShowBean.newsId
                for (let interactBean of result) {
                  console.debug(TAG, JSON.stringify(interactBean))
                  if (newsId == interactBean.contentId) {
                    slideShowBean.interactDataDto = interactBean
                    break
                  }
                }
              })
            }
          })
      }
    }

  }

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

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

  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)
          }
        }
        .width(CommonConstants.FULL_WIDTH)
        .fontSize($r('app.float.font_size_18'))
        .fontWeight(FontWeight.Normal)
        .maxLines(this.contentDTO.appStyle === CompStyle.Card_09?2:1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ bottom: 19 })
        .onClick((event: ClickEvent) => {
          InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
          ProcessUtils.processPage(this.contentDTO)
        })
      }
      // 大图
      Stack() {
        Image(this.loadImg ? this.contentDTO?.coverUrl : '')
          .backgroundColor(0xf5f5f5)
          .width('100%')
          .borderRadius({
            topLeft: $r('app.float.image_border_radius'),
            topRight: $r('app.float.image_border_radius')
          })
          .onClick((event: ClickEvent) => {
            InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
            ProcessUtils.processPage(this.contentDTO)
          })
        if (this.contentDTO.objectType == '5') {
          Notes({ objectType: 5,objectLevel:this.contentDTO.objectLevel }).margin({ left: 5, bottom: 5 })
        }
      }.alignContent(Alignment.BottomStart)

      // 专题列表--后端返回三个，
      if (!this.hideDetail) {

        if (this.isBatchData) {
          this.drawCompList()
        } else {
          this.drawCompList()
        }

      }

      // 底部-查看更多。根据接口返回的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 })
        .onClick((event: ClickEvent) => {
          InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
          ProcessUtils.processPage(this.contentDTO)
        })
      }
    }
    .width(CommonConstants.FULL_WIDTH)
    .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"))
    .margin({ bottom: 8 })
  }

  @Builder
  drawCompList() {

    Column() {
      ForEach(this.contentDTO.slideShows, (item: slideShows, index: number) => {
        this.timelineItem(item, index)
        if (index < this.contentDTO.slideShows.length - 1) {
          // 在不是最后一个元素的情况下添加分隔符
          Divider().strokeWidth(1).color('#f5f5f5').padding({ left: 0, right: 0 });
        }
      })
    }
  }

  @Builder
  timelineItem(item: slideShows, index: number) {
    Card10ComponentTimelineItem({
      compDTO:this.compDTO,
      slideItem:item,
      contentDTO:this.contentDTO,
      loadImg:this.loadImg
    })
  }
}

@Component
export struct Card10ComponentTimelineItem {
  slideItem: slideShows = new slideShows;
  @State contentDTO: ContentDTO = new ContentDTO();
  @ObjectLink compDTO: CompDTO
  @State loadImg: boolean = false;
  @State isRead: boolean = false;//已读状态

  build() {
    Row() {
      // 有图片资源的
      if (this.slideItem.fullColumnImgUrls && this.slideItem.fullColumnImgUrls[0] && this.slideItem.fullColumnImgUrls[0].url) {

        Column() {
          Stack() {
            if (this.slideItem.objectType == '5') {
              Notes({ objectType: 5,objectLevel:this.slideItem.objectLevel })
            }
            Text(this.slideItem.newsTitle)
              .fontSize($r('app.float.font_size_17'))
              .fontWeight(400)
              .fontColor(this.isRead ? 0x848484 : '#222222')
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .textIndent(this.slideItem.objectType == '5' ? 38 : 0)
          }.alignContent(Alignment.TopStart)

          Blank()
          //bottom 评论等信息
          CardSourceInfo(
            {
              isCompInnerSource: true,
              compDTO: this.compDTO,
              contentDTO: this.createContent(this.slideItem)
            }
          )
        }
        .layoutWeight(1)
        .height(78)
        .alignItems(HorizontalAlign.Start)

        Stack() {
          Image(this.loadImg ? this.slideItem.fullColumnImgUrls[0].url : '')
            .backgroundColor(0xf5f5f5)
            .width(117)
            .height(78)
            .objectFit(ImageFit.Cover)
            .borderRadius($r('app.float.image_border_radius'))
            .margin({ left: 12 })
          CardMediaInfo({
            contentDTO: this.createMediaInfoContent(this.slideItem)
          })
        }
        .alignContent(Alignment.BottomEnd)
        .height(78)
      }else{
        Column() {
          Stack() {
            if (this.slideItem.objectType == '5') {
              Notes({ objectType: 5,objectLevel:this.slideItem.objectLevel })
            }
            Text(this.slideItem.newsTitle)
              .fontSize($r('app.float.font_size_17'))
              .fontWeight(400)
              .fontColor($r('app.color.color_222222'))
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .textIndent(this.slideItem.objectType == '5' ? 38 : 0)
          }.alignContent(Alignment.TopStart)

          //bottom 评论等信息
          CardSourceInfo(
            {
              isCompInnerSource: true,
              compDTO: this.compDTO,
              contentDTO: this.createContent(this.slideItem)
            }
          )
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)

      }
    }
    .padding({ top: 10, bottom: 10 })
    .onClick((event: ClickEvent) => {
      this.isRead = true
      persistentStorage(this.slideItem.newsId);

      const str: string = JSON.stringify(this.contentDTO);
      const data: ContentDTO = JSON.parse(str)
      data.objectId = this.slideItem.newsId
      data.relId = this.slideItem.relId
      data.linkUrl = this.slideItem.linkUrl
      data.objectType = String(this.slideItem.objectType)
      ProcessUtils.processPage(data)
    })
  }

  aboutToAppear(): void {
    this.isRead = hasClicked(this.slideItem.newsId, '')
  }


  private createContent(item: slideShows): ContentDTO {
    let contentDTO = new ContentDTO()
    contentDTO.publishTime = item.publishTime?.toString() || '';
    contentDTO.source = item.source || '';
    contentDTO.interactData = item.interactDataDto
    return contentDTO;
  }

  private createMediaInfoContent(item: slideShows): ContentDTO {
    let contentDTO = new ContentDTO()
    contentDTO.objectType = String(item.objectType);
    contentDTO.videoInfo = { videoDuration: Number(item.videoDuration) as number } as VideoInfoDTO;
    contentDTO.photoNum = Number(item.photoNum);
    contentDTO.voiceInfo = { voiceDuration: Number(item.voiceDuration) as number };
    return contentDTO;
  }
}