import { CompDTO, ContentDTO, FullColumnImgUrlDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { Notes } from './notes';
const TAG: string = 'Card4Component';

/**
 * 三图卡:
 * compstyle:4
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
 */
@Component
export struct Card4Component {
  @State contentDTO: ContentDTO = new ContentDTO();
  @State loadImg: boolean = false;
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State str01: string = '';
  @State str02: string = '';
  @State str03: string = '';
  @ObjectLink compDTO: CompDTO

  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() {
      //body
      Column() {
        //新闻标题
         if (this.contentDTO.newTags) {
          Notes({ newTags: this.contentDTO.newTags })
        } else if (this.contentDTO.objectType == '5') {
          Notes({ objectType: this.contentDTO.objectType })
        }
        Text() {
          if (this.titleMarked) {
            Span(this.str01)
            Span(this.str02)
              .fontColor(0xED2800)
            Span(this.str03)
          } else {
            Span(this.contentDTO.newsTitle)
          }
        }
          .fontSize($r('app.float.font_size_18'))
          .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
          .maxLines(3)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        .textIndent(this.contentDTO.newTags?.length < 5 && this.contentDTO.newTags?.length > 2 ? 58 :
          (this.contentDTO.newTags?.length != 0 && this.contentDTO.newTags?.length) ||
            this.contentDTO.objectType == '5' ? 30 : 0)
        .alignContent(Alignment.TopStart)// 超出的部分显示省略号。
        //三图
        Stack(){
          Row() {
            GridRow({ gutter: 2 }) {
              ForEach(this.contentDTO.fullColumnImgUrls, (item: FullColumnImgUrlDTO, index: number) => {
                if (index < 3) {
                  GridCol({ span: { xs: 4 } }) {
                    Image(this.loadImg ? item.url : '')
                      .backgroundColor(0xf5f5f5)
                      .width('100%')
                      .aspectRatio(113 / 75)
                      .borderRadius({
                        topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
                        topRight: index === 2 ? $r('app.float.image_border_radius') : 0,
                        bottomLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
                        bottomRight: index === 2 ? $r('app.float.image_border_radius') : 0,
                      })
                  }
                }
              })
            }
          }
          .width(CommonConstants.FULL_PARENT)
          .margin({ top: 8 })
          CardMediaInfo({
            contentDTO: this.contentDTO
          })
        }
        .width(CommonConstants.FULL_PARENT)
        .alignContent(Alignment.BottomEnd)
      }
      .width('100%')
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
      .onClick((event: ClickEvent) => {
        this.clicked = true;
        ProcessUtils.processPage(this.contentDTO)
      })
      //bottom 评论等信息
      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')
    })
  }
}


@Extend(Text)
function bottomTextStyle() {
  .fontSize(12)
  .fontColor('#B0B0B0')
}