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')
    })
  }
}

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

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

  caclImageRadius(index: number) {
    let radius: radiusType = {
      topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
      topRight: 0,
      bottomLeft: 0,
      bottomRight: 0,
    }
    if (this.appStyleImages.length === 1) {
      radius.topRight = index === 0 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 0 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 0 ? $r('app.float.image_border_radius') : 0
    } else if (this.appStyleImages.length === 4) {
      radius.topRight = index === 1 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 2 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 3 ? $r('app.float.image_border_radius') : 0
    } else {
      radius.topRight = index === 2 ? $r('app.float.image_border_radius') : 0
      radius.bottomLeft = index === 6 ? $r('app.float.image_border_radius') : 0
      radius.bottomRight = index === 8 ? $r('app.float.image_border_radius') : 0
    }
    return radius
  }

  build() {
    GridRow({
      gutter: { x: 2, y: 2 }
    }) {
      ForEach(this.appStyleImages, (item: appStyleImagesDTO, index: number) => {
        if (this.appStyleImages.length === 1) {
          GridCol({
            span: { xs: 8 }
          }) {
            Image(item.fullUrl)
              .width('100%')
              .borderRadius(this.caclImageRadius(index))
          }
        } else if (this.appStyleImages.length === 4) {
          GridCol({
            span: { xs: 5 }
          }) {
            Image(item.fullUrl)
              .aspectRatio(1)
              .borderRadius(this.caclImageRadius(index))
          }
        } else {
          GridCol({
            span: { sm: 4, lg: 3 }
          }) {
            Image(item.fullUrl)
              .aspectRatio(1)
              .borderRadius(this.caclImageRadius(index))
          }
        }
      })
    }
  }
}


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