import { ArticleListDTO, appStyleImagesDTO } from 'wdBean';
import { rmhTitle } from './rmhTitle'

const TAG = 'Card19Component';

/**
 * 人民号-动态---19：动态图文卡人民号； 从无图--9图
 */
@Entry
@Component
export struct Card19Component {
  @State articleListItem: ArticleListDTO = {} as ArticleListDTO

  aboutToAppear(): void {
  }

  build() {
    Column() {
      // rmh信息
      rmhTitle()
      // 标题
      if (this.articleListItem.title) {
        Text(this.articleListItem.title)
          .fontSize($r('app.float.font_size_17'))
          .fontColor($r('app.color.color_222222'))
          .textOverflowStyle(2)
          .margin({ bottom: 8 })
      }
      // 图片-从无图到9图展示
      createArticleListItem({ appStyleImages: this.articleListItem.appStyleImages })
      //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')
    })
  }
}

@Component
struct createArticleListItem {
  @Prop appStyleImages: appStyleImagesDTO[]

  build() {
    if (this.appStyleImages.length === 1) {
      Image(this.appStyleImages[0].fullUrl)
        .width('66%')
        .alignSelf(ItemAlign.Start)
    } else if (this.appStyleImages.length > 4 || this.appStyleImages.length === 2 || this
      .appStyleImages.length === 3) {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.appStyleImages, (item: appStyleImagesDTO, index: number) => {
          Image(item.fullUrl)
            .width('32%')
            .aspectRatio(1)
            .margin({ right: (index + 1) % 3 === 0 ? 0 : 2, bottom: 2 })
        })
      }
    } else if (this.appStyleImages.length === 4) {
      Flex({ wrap: FlexWrap.Wrap }) {
        ForEach(this.appStyleImages.slice(0, 2), (item: appStyleImagesDTO, index: number) => {
          Image(item.fullUrl)
            .width('32%')
            .aspectRatio(1)
            .margin({ right: (index + 1) % 3 === 0 ? 0 : 2, bottom: 2 })
        })
        Rect()
          .width('32%')
          .aspectRatio(1)
          .fill($r('app.color.color_transparent'))
        ForEach(this.appStyleImages.slice(2, 4), (item: appStyleImagesDTO, index: number) => {
          Image(item.fullUrl)
            .width('32%')
            .aspectRatio(1)
            .margin({ right: (index + 1) % 3 === 0 ? 0 : 2, bottom: 2 })
        })
      }
    }

  }
}


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