import { Action, CompDTO, ContentDTO, Params } from 'wdBean';
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
import { CommonConstants } from 'wdConstant/Index';
import { DateTimeUtils } from 'wdKit';
import { WDRouterRule } from 'wdRouter';

const TAG = 'Card17Component';
/**
* 图卡集---2
*/

@Component
export struct Card17Component {
  @State compDTO: CompDTO = {} as CompDTO
  @State contentDTO: ContentDTO = {} as ContentDTO;

  build() {
    Column({ space: 8 }) {
      Text(this.contentDTO.newsTitle)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontSize(17)
        .fontColor(0x222222)
        .lineHeight(25)
        .maxLines(3)
        .width(CommonConstants.FULL_WIDTH)

      RelativeContainer() {
        Image(this.contentDTO.fullColumnImgUrls[0].url)
          .width('66.6%')
          .aspectRatio(16 / 9)
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            left: { anchor: "__container__", align: HorizontalAlign.Start }
          })
          .id('mainImage')

        Image(this.contentDTO.fullColumnImgUrls[1].url)
          .width('33%')
          .aspectRatio(16 / 9)
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            right: { anchor: "__container__", align: HorizontalAlign.End }
          })
          .id('subTopImage')

        Image(this.contentDTO.fullColumnImgUrls[2].url)
          .width('33%')
          .aspectRatio(16 / 9)
          .alignRules({
            right: { anchor: "__container__", align: HorizontalAlign.End },
            bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
          })
          .id('subBottomImage')
        // 下面是渲染右下角图标
        Shape() {
          Rect().width(33).height(18)
        }
        .fill(0x000000)
        .fillOpacity(0.3)
        .strokeLineCap(LineCapStyle.Round)
        .strokeLineJoin(LineJoinStyle.Round)
        .antiAlias(true)
        .id('shape')
        .alignRules({
          right: { anchor: "__container__", align: HorizontalAlign.End },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
        })
        .margin({
          right: 4,
          bottom: 4
        })

        Image($r('app.media.album_card_shape'))
          .width(22)
          .height(18)
          .alignRules({
            left: { anchor: "shape", align: HorizontalAlign.Start },
            top: { anchor: "shape", align: VerticalAlign.Top }
          })
          .id('shapeSubImage')

        Text(this.contentDTO.fullColumnImgUrls.length + '')
          .fontSize(13)
          .fontColor(0xFFFFFF)
          .id('pageIndex')
          .alignRules({
            right: { anchor: "shape", align: HorizontalAlign.End },
            top: { anchor: "shape", align: VerticalAlign.Top }
          })
          .margin({ right: 2 })
          .textAlign(TextAlign.Center)
          .width(17)
          .height(17)
      }
      .width(CommonConstants.FULL_WIDTH)
      .aspectRatio(24 / 9)
      .onClick((event: ClickEvent) => {
        let taskAction: Action = {
          type: 'JUMP_DETAIL_PAGE',
          params: {
            detailPageType: 17,
            contentID: this.contentDTO.objectId,
            extra: {
              relType: this.contentDTO.relType,
              relId: `${this.contentDTO.relId}`,
            } as ExtraDTO
          } as Params,
        };
        WDRouterRule.jumpWithAction(taskAction)
      })

      Row() {
        if (this.contentDTO.source) {
          Text(this.contentDTO.source)
            .fontSize(13)
            .fontColor(0xB0B0B0)
          Image($r('app.media.point'))
            .width(16)
            .height(16)
        }
        if (this.contentDTO.publishTime && this.contentDTO.publishTime.length === 13) {
          Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTime)))
            .fontSize(13)
            .fontColor(0xB0B0B0)
        }
        Text('328评')
          .fontSize(13)
          .fontColor(0xB0B0B0)
          .margin({
            left: 6
          })
      }
      .width(CommonConstants.FULL_WIDTH)
      .height(16)
      .id('label')
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      top: 14,
      left: 16,
      right: 16,
      bottom: 14
    })
  }
}