import { ContentDTO } from 'wdBean';
import { RmhTitle } from '../cardCommon/RmhTitle'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CommonConstants } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import {CarderInteraction} from '../CarderInteraction'
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';

const TAG = 'Card20Component';

/**
 * 人民号-动态---20：动态视频卡人民号   分横屏和竖屏；
 */
@Component
export struct Card20Component {
  @State contentDTO: ContentDTO = new ContentDTO();
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State str01: string = '';
  @State str02: string = '';
  @State str03: string = '';

  aboutToAppear(): void {
    this.titleInit();
  }

  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() {
      // rmh信息
      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo, publishTime: this.contentDTO.publishTime })
      // 标题
      if (this.contentDTO.newsTitle) {
        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_17'))
          .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
          .width(CommonConstants.FULL_WIDTH)
          .textOverflowStyle(3)
          .margin({ bottom: 8 })
          .lineHeight(22)
      }
      if (this.contentDTO.fullColumnImgUrls[0]) {
        createImg({ contentDTO: this.contentDTO })
      }
      CarderInteraction({contentDTO: this.contentDTO})
      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
    }
    .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) => {
      this.clicked = true;
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

interface radiusType {
  topLeft: number | Resource;
  topRight: number | Resource;
  bottomLeft: number | Resource;
  bottomRight: number | Resource;
}

@Component
struct createImg {
  @Prop contentDTO: ContentDTO
  @State loadImg: boolean = false;

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


  build() {
    GridRow() {
      if (this.contentDTO.fullColumnImgUrls[0].landscape === 1) {
        // 横屏
        GridCol({
          span: { xs: 12 }
        }) {
          Stack() {
            Image(this.loadImg ? this.contentDTO.coverUrl : '')
              .backgroundColor(0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .aspectRatio(16 / 9)
              .borderRadius($r('app.float.image_border_radius'))
            CardMediaInfo({ contentDTO: this.contentDTO })
          }
          .align(Alignment.BottomEnd)
        }
        .onClick((event: ClickEvent) => {
          ProcessUtils.gotoVod(this.contentDTO)
        })
      } else {
        // 竖图显示，宽度占50%，高度自适应
        GridCol({
          span: { xs: 6 }
        }) {
          Stack() {
            Image(this.loadImg ? this.contentDTO.coverUrl : '')
              .backgroundColor(0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .borderRadius($r('app.float.image_border_radius'))
            CardMediaInfo({ contentDTO: this.contentDTO })
          }
          .align(Alignment.BottomEnd)
          .onClick((event: ClickEvent) => {
            ProcessUtils.gotoVod(this.contentDTO)
          })
        }
      }
    }
  }
}


@Extend(Text)
function textOverflowStyle(maxLine: number) {
  .maxLines(maxLine)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}