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';

const TAG = 'Card17Component';

/**
 * 图卡集---2
 */
@Component
export struct Card17Component {
  @State contentDTO: ContentDTO = new ContentDTO();
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  @ObjectLink compDTO: CompDTO
  @State titleMarked: boolean = false;
  @State str01: string = '';
  @State str02: string = '';
  @State str03: string = '';

  async aboutToAppear(): Promise<void> {
    this.titleInit();
    this.loadImg = await onlyWifiLoadImg();
  }

  titleInit() {
    if (this.contentDTO.title?.includes('<em>') && this.contentDTO.title?.includes('</em>')) {
      this.titleMarked = true;
      this.str01 = this.contentDTO.title?.split('<em>')[0] || '';
      this.str02 = this.contentDTO.title?.split('<em>')[1].split('</em>')[0] || '';
      this.str03 = this.contentDTO.title?.split('<em>')[1].split('</em>')[1] || '';
    }
  }

  build() {
    Column({ space: 8 }) {
      Text() {
        if (this.titleMarked) {
          Span(this.str01)
          Span(this.str02)
            .fontColor(0xED2800)
          Span(this.str03)
        } 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 : '' : '')
              .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 : '' : '')
              .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 : '' : '')
              .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) => {
        this.clicked = true;
        let taskAction: Action = {
          type: 'JUMP_DETAIL_PAGE',
          params: {
            detailPageType: 17,
            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 })
    }
    .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')
    })
  }
}