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

const TAG: string = 'Card6Component-Card13Component';

/**
 * 卡片样式："appStyle":"21" 小视频卡人民号
 */
@Component
export struct Card21Component {
  @State contentDTO: ContentDTO = {} as ContentDTO;
  @State loadImg: boolean = false;
  @State clicked: boolean = false;

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

  build() {
    Column() {
      // 顶部 rmh信息
      RmhTitle({ rmhInfo: this.contentDTO.rmhInfo, publishTime: this.contentDTO.publishTime })
      // 中间内容
      Grid() {
        GridItem() {
          Text(`${this.contentDTO.newsTitle}`)
            .fontSize($r('app.float.selected_text_size'))
            .fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
            .width(CommonConstants.FULL_WIDTH)
            .maxLines(4)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .padding({ right: 12 })
            .lineHeight(26)
        }

        GridItem() {
          Stack() {
            Image(this.loadImg ? this.contentDTO.coverUrl : '')
              .backgroundColor(0xf5f5f5)
              .width(CommonConstants.FULL_WIDTH)
              .borderRadius($r('app.float.image_border_radius'))
            CardMediaInfo({ contentDTO: this.contentDTO })
          }
          .alignContent(Alignment.BottomEnd)
        }
      }
      .columnsTemplate('2fr 1fr')
      .maxCount(1)
      CarderInteraction({contentDTO: this.contentDTO})
      //TODO  底部的：分享、评论、点赞 功能；需要引用一个公共组件
    }
    .onClick((event: ClickEvent) => {
      this.clicked = true;
      ProcessUtils.processPage(this.contentDTO)
    })
    .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')
    })
    .width(CommonConstants.FULL_WIDTH)
  }
}