//全标题 "appStyle":"2",
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { Notes } from './notes';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick';

const TAG: string = 'Card2Component'
interface textItem {
  content: string,
  isRed: boolean
}
/**
 * 大图卡:
 * compstyle:2
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
 */
@Component
export struct Card2Component {
  @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> {
    this.clicked = hasClicked(this.contentDTO.objectId)
    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] || '';

      const html: string = this.contentDTO.title;
      const pattern = /<[a-z]+[1-6]?\b[^>]*>(.*?)<\/[a-z]+[1-6]?>/g;
      const res: string[] = [];
      let match: RegExpExecArray | null;

      while ((match = pattern.exec(html)) !== null) {
        const content: string = match[1].trim();
        res.push(content);
      }

      let textArr: textItem[] = [];
      this.formatTitle(html, res, 0, textArr);
      this.textArr = textArr;
    }
  }

  formatTitle(textStr: string, matchArr: string[], index: number, textArr: textItem[]) {
    const item: string = matchArr[index];
    const arr = textStr.split(item);
    arr.forEach((str: string, ind: number) => {
      if (ind === 0) {
        textArr.push({
          content: str.replaceAll('<em>', '').replaceAll('</em>', ''),
          isRed: false
        } as textItem)
        textArr.push({
          content: item,
          isRed: true
        })
      } else if (ind === 1) {
        this.formatTitle(str, matchArr, index + 1, textArr)
      }
    })
  }

  build() {
    Column() {
      Column() {
        Stack() {
          // if(this.contentDTO.objectType == '5'){
          //   Notes({ objectType: this.contentDTO.objectType }).height(30).align(Alignment.Center)
          // }else if(this.contentDTO.objectType == '2'){
          //   if(this.contentDTO.seoTags){
          //      Notes({ newTags: this.contentDTO.seoTags }).height(30).align(Alignment.Center)
          //   }else if(this.contentDTO.newTags){
          //     Notes({ newTags: this.contentDTO.newTags }).height(30).align(Alignment.Center)
          //
          //   }
          // }else {
          //   if(this.contentDTO.newTags){
          //     Notes({ newTags: this.contentDTO.newTags }).height(30).align(Alignment.Center)
          //   }
          // }
          if(this.contentDTO.objectType == '5'){
            Notes({ objectType: this.contentDTO.objectType }).height(30).align(Alignment.Center)
          } else {
            if (this.contentDTO.seoTags) {
              Notes({ newTags: this.contentDTO.seoTags }).height(30).align(Alignment.Center)
            }
            if (this.contentDTO.newTags) {
              Notes({ newTags: this.contentDTO.newTags }).height(30).align(Alignment.Center)
            }
          }
          //新闻标题
          // 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)
              ForEach(this.textArr, (textItem: textItem) => {
                if (textItem.isRed) {
                  Span(textItem.content)
                    .fontColor(0xED2800)
                } else {
                  Span(textItem.content)
                }
              })
            } else {
              Span(this.contentDTO.newsTitle)
            }
          }
          .fontSize($r('app.float.font_size_18'))
          .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
          .maxLines(2)
          .lineHeight(27)
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
          .align(Alignment.Start)
          .textIndent((this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) > 2 &&
            (this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) < 5 ? 58 :
            ((this.contentDTO.newTags?.length > 0 || this.contentDTO.seoTags?.length > 0) || this.contentDTO.objectType == '5') ? 35 :
              0 )
        }.alignContent(Alignment.TopStart)

        //.textIndent(this.contentDTO.objectType == '5' ? 35 : 0)
        // }
        // .alignContent(Alignment.TopStart)

        //大图
        Stack() {
          Image(this.loadImg ? this.contentDTO.coverUrl : '')
            .width(CommonConstants.FULL_WIDTH)
            .aspectRatio(16 / 9)
            .borderRadius($r('app.float.image_border_radius'))
            .backgroundColor(0xf5f5f5)
          //播放状态+时长
          CardMediaInfo({
            contentDTO: this.contentDTO
          })
        }
        .alignContent(Alignment.BottomEnd)
        .margin({ top: 8 })
      }
      .width(CommonConstants.FULL_WIDTH)
      .alignItems(HorizontalAlign.Start)

      //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')
    })
    .onClick((event: ClickEvent) => {
      InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
      this.clicked = true;
      persistentStorage(this.contentDTO.objectId);
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

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