//全标题 "appStyle":"2",
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants, CompStyle } from 'wdConstant/Index';
import { ProcessUtils } from 'wdRouter';
import { CardMediaInfo } from '../cardCommon/CardMediaInfo';
import { CardSourceInfo } from '../cardCommon/CardSourceInfo';
import { Notes } from './notes';
import { getNotesContentWidth } from '../../utils/FuncUtils'
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick';
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'
import { ToastUtils } from 'wdKit';
import MinePageDatasModel from '../../model/MinePageDatasModel';

const TAG: string = 'Card2Component'
/**
 * 大图卡:
 * compstyle:2
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
 */
@Component
export struct Card2Component {
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @Prop loadImg: boolean = true;
  @State clicked: boolean = false;
  @ObjectLink compDTO: CompDTO
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []
  @State compIndex: number = 0;

  async aboutToAppear(): Promise<void> {
    this.titleInit();
    const curRouter = router.getState().name;
    this.clicked = hasClicked(this.contentDTO.objectId, curRouter)
  }

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

  getCover() {
    if (this.compDTO.compStyle === CompStyle.Zh_Single_Column_03) {
      return this.contentDTO.coverUrl
    } else {
      return this.contentDTO.fullColumnImgUrls?.[0]?.url || this.contentDTO.fullColumnImgUrls?.[0]?.fullUrl
    }
  }

  build() {
    Column() {
      Column() {
        Stack() {
          if(this.contentDTO.objectType == '5'){
            Notes({ objectType: this.contentDTO.objectType,objectLevel:this.contentDTO.objectLevel }).height(29).align(Alignment.Center)
          } else {
            if (this.contentDTO.seoTags) {
              Notes({ newTags: this.contentDTO.seoTags }).height(29).align(Alignment.Center)
            }
            if (this.contentDTO.newTags) {
              Notes({ newTags: this.contentDTO.newTags }).height(29).align(Alignment.Center)
            }
            if (this.contentDTO.top === 1) {
              Notes({ newTags: '置顶' }).height(29).align(Alignment.Center)
            }
          }

          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)
            }
          }
          .fontSize($r('app.float.font_size_18'))
          .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
          .maxLines(2)
          .lineHeight(25)
          .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
          .align(Alignment.Start)
          .textIndent(
            getNotesContentWidth(
              this.contentDTO.seoTags || this.contentDTO.newTags,
              this.contentDTO.objectType,
              this.contentDTO.objectLevel,
              this.contentDTO.top
            )
          )
          .width('100%')
        }.alignContent(Alignment.TopStart)

        //大图
        Stack() {
          Image(this.loadImg ? this.getCover() : '')
            .width(CommonConstants.FULL_WIDTH)
            .aspectRatio(16 / 9)
            .borderRadius($r('app.float.image_border_radius'))
            .borderStyle(BorderStyle.Solid)
            .borderWidth(0.5)
            .borderColor($r('app.color.color_0D000000'))
            .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 })
    }
    .borderRadius({
      topLeft:this.compIndex === 0 ? $r('app.float.image_border_radius'):0,
      topRight:this.compIndex === 0 ? $r('app.float.image_border_radius'):0
    })
    .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)
    .onClick((event: ClickEvent) => {
      ///我的收藏 编辑状态点击
      if (this.compDTO.isCollectionEditting) {
        this.compDTO.isSelect = this.compDTO.isSelect?false:true
        return;
      }

      InfomationCardClick.track(this.compDTO, this.contentDTO, this.pageId, this.pageName)
      if (router.getState().name !== 'MyCollectionListPage') {
        this.clicked = true;
      }
      persistentStorage(this.contentDTO.objectId);
      // console.log(TAG,'this.contentDTO.objectType', this.contentDTO.objectType)
      this.jumpDetail()
    })
  }

  /**
   * 是否需要判断某种类型才需要判断内容是否存在的场景，目前测试没发现问题
   */
  jumpDetail(){
    MinePageDatasModel.getAssertDetailData(this.contentDTO.relId,this.contentDTO.objectId,this.contentDTO.relType).then((value) => {
      if(value == "1"){
        ProcessUtils.processPage(this.contentDTO)
      } else {
        ToastUtils.shortToast("内容不存在")
      }
    }).catch((err: Error) => {
      console.log(TAG, JSON.stringify(err))
      // 网络出小差了进入详情页
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

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