import { ContentDTO, CompDTO } 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';
import { persistentStorage, hasClicked } from '../../utils/persistentStorage';
import { InfomationCardClick } from '../../utils/infomationCardClick'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';
import router from '@ohos.router'
import { Notes } from './notes';
import { getNotesContentWidth } from '../../utils/FuncUtils'

const TAG = 'Card20Component';

/**
 * 人民号-动态---20：动态视频卡人民号   分横屏和竖屏；
 */
@Component
export struct Card20Component {
  @ObjectLink compDTO: CompDTO
  @State pageId: string = '';
  @State pageName: string = '';
  @State contentDTO: ContentDTO = new ContentDTO();
  @State clicked: boolean = false;
  @State titleMarked: boolean = false;
  @State textArr: textItem[] = []
  @Prop loadImg: boolean = true;
  isPeopleShipHome: boolean = false;

  aboutToAppear(): 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.contentDTO.newsTitle);
    this.titleMarked = titleInitRes.titleMarked;
    this.textArr = titleInitRes.textArr;
  }

  build() {
    Column() {
      // rmh信息
      RmhTitle(
        {
          rmhInfo: this.contentDTO.rmhInfo,
          publishTime: this.contentDTO.publishTime,
          contentDTO: this.contentDTO,
          compDTO: this.compDTO,
          pageId: this.pageId,
          pageName: this.pageName,
          isPeopleShipHome:this.isPeopleShipHome, loadImg: this.loadImg
        }
      )      // 标题
      if (this.contentDTO.title || this.contentDTO.newsTitle) {
        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(3)
        .lineHeight(25)
        .margin({bottom:8})
        .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)
      }
      if (this.contentDTO.fullColumnImgUrls[0]) {
        createImg({ compDTO:this.compDTO,contentDTO: this.contentDTO, loadImg: this.loadImg })
      }
      CarderInteraction({contentDTO: this.contentDTO})
      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
    }
    .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);
      ProcessUtils.processPage(this.contentDTO)
    })
  }
}

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

@Component
struct createImg {
  @State compDTO: CompDTO = new CompDTO()
  @Prop contentDTO: ContentDTO
  @Prop loadImg: boolean = true;

  async aboutToAppear(): Promise<void> {
    console.log("createImg", JSON.stringify(this.contentDTO.fullColumnImgUrls))
    // this.loadImg = await onlyWifiLoadImg();
  }


  build() {
    GridRow() {
      if (this.contentDTO.fullColumnImgUrls[0].landscape === 1) {
        // 横屏
        GridCol({
          span: { xs: 12 }
        }) {
          Stack() {
            Image(this.loadImg ? this.contentDTO.fullColumnImgUrls?.[0]?.url || this.contentDTO.fullColumnImgUrls?.[0]?.fullUrl : '')
              .backgroundColor(0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .aspectRatio(16 / 9)
              .borderRadius($r('app.float.image_border_radius'))
              .border({
                width: 0.5,
                color: '#0D000000',  // 5% 透明度的黑色
                style: BorderStyle.Solid
              })
            CardMediaInfo({ contentDTO: this.contentDTO })
          }
          .align(Alignment.BottomEnd)
        }
        .onClick((event: ClickEvent) => {
          ///我的收藏 编辑状态点击
          if (this.compDTO.isCollectionEditting) {
            this.compDTO.isSelect = this.compDTO.isSelect?false:true
            return;
          }

          ProcessUtils.gotoVod(this.contentDTO)
        })
      } else {
        // 竖图显示，宽度占50%，高度自适应
        GridCol({
          span: { xs: 6 }
        }) {
          Stack() {
            Image(this.loadImg ? this.contentDTO.fullColumnImgUrls?.[0]?.url || this.contentDTO.fullColumnImgUrls?.[0]?.fullUrl : '')
              .backgroundColor(0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .borderRadius($r('app.float.image_border_radius'))
              .aspectRatio(172 / 230)
              .border({
                width: 0.5,
                color: '#0D000000',  // 5% 透明度的黑色
                style: BorderStyle.Solid
              })
            CardMediaInfo({ contentDTO: this.contentDTO })
          }
          .align(Alignment.BottomEnd)
          .onClick((event: ClickEvent) => {
            ///我的收藏 编辑状态点击
            if (this.compDTO.isCollectionEditting) {
              this.compDTO.isSelect = this.compDTO.isSelect?false:true
              return;
            }

            ProcessUtils.gotoVod(this.contentDTO)
          })
        }
      }
    }
  }
}


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