import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
import { CommonConstants } from 'wdConstant/Index';
import { WDRouterRule } from 'wdRouter';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'

const TAG = 'Card17Component';

/**
 * 图卡集---2
 */
@Component
export struct Card17Component {
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  @ObjectLink compDTO: CompDTO
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []

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

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

  build() {
    Column({ space: 8 }) {
      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)
        }
      }
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .fontSize($r('app.float.font_size_17'))
      .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
      .lineHeight(25)
      .maxLines(3)
      .width(CommonConstants.FULL_WIDTH)

      Stack({ alignContent: Alignment.BottomEnd }) {
        // 三个图，
        GridRow({ gutter: 2 }) {
          GridCol({ span: { xs: 8 } }) {
            Image(this.loadImg ?
              this.contentDTO.fullColumnImgUrls.length > 0 ? this.contentDTO.fullColumnImgUrls[0].url || this.contentDTO.fullColumnImgUrls[0].fullUrl : '' : '')
              .backgroundColor(this.loadImg ? '#f5f5f5' : 0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .height(160)// .aspectRatio(CompUtils.ASPECT_RATIO_16_9)
              .borderRadius({
                topLeft: $r('app.float.image_border_radius'),
                bottomLeft: $r('app.float.image_border_radius'),
              })
          }

          GridCol({ span: { xs: 4 } }) {
            Image(this.loadImg ?
              this.contentDTO.fullColumnImgUrls.length > 1 ? this.contentDTO.fullColumnImgUrls[1].url || this.contentDTO.fullColumnImgUrls[1].fullUrl : '' : '')
              .backgroundColor(this.loadImg ? '#f5f5f5' : 0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .height(79)// .aspectRatio(CompUtils.ASPECT_RATIO_16_9)
              .margin({ bottom: 1 })
              .borderRadius({
                topRight: $r('app.float.image_border_radius'),
              })
          }
        }

        GridRow({ gutter: 2 }) {
          GridCol({ span: { xs: 8 } }) {
          }

          GridCol({ span: { xs: 4 } }) {
            Image(this.loadImg ?
              this.contentDTO.fullColumnImgUrls.length > 2 ? this.contentDTO.fullColumnImgUrls[2].url || this.contentDTO.fullColumnImgUrls[2].fullUrl : '' : '')
              .backgroundColor(this.loadImg ? '#f5f5f5' : 0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .height(79)// .aspectRatio(CompUtils.ASPECT_RATIO_16_9)
              .margin({ top: 1 })
              .borderRadius({
                bottomRight: $r('app.float.image_border_radius'),
              })
          }
        }

        CardMediaInfo({ contentDTO: this.contentDTO })
      }
      .width(CommonConstants.FULL_WIDTH)
      .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);
        let taskAction: Action = {
          type: 'JUMP_DETAIL_PAGE',
          params: {
            detailPageType: 9,
            contentID: this.contentDTO.objectId,
            extra: {
              relType: this.contentDTO.relType,
              relId: `${this.contentDTO.relId}`,
            } as ExtraDTO
          } as Params,
        };
        WDRouterRule.jumpWithAction(taskAction)
      })

      // 评论等信息
      CardSourceInfo({ compDTO: this.compDTO, contentDTO: this.contentDTO })
    }
    .padding({
      left: 10,
      right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width(CommonConstants.FULL_WIDTH)
  }
}