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

const TAG = 'AlbumCardComponent';

@Preview
@Component
export struct AlbumCardComponent {
  @State compDTO: CompDTO = {} as CompDTO

  aboutToAppear() {
    Logger.debug(TAG + "this.compDTO.operDataList" + JSON.stringify(this.compDTO.operDataList));

  }

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

      RelativeContainer() {
        Image(this.compDTO.operDataList[0].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.compDTO.operDataList[0].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.compDTO.operDataList[0].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)
        }
        // .viewPort({ x: -2, y: -2, width: 304, height: 130 })
        .fill(0x000000)
        .fillOpacity(0.3)
        // .strokeDashArray([20])
        // .strokeDashOffset(10)
        .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.compDTO.operDataList[0].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.compDTO.operDataList?.[0].objectId,
            extra: {
              relType: this.compDTO.operDataList?.[0].relType,
              relId: `${this.compDTO.operDataList?.[0].relId}`,
            } as ExtraDTO
          } as Params,
        };
        WDRouterRule.jumpWithAction(taskAction)
      })

      Row() {
        if (this.compDTO.operDataList[0].source) {
          Text(this.compDTO.operDataList[0].source)
            .fontSize(13)
            .fontColor(0xB0B0B0)
          Image($r('app.media.point'))
            .width(16)
            .height(16)
        }
        if (this.compDTO.operDataList[0].publishTime && this.compDTO.operDataList[0].publishTime.length === 13) {
          Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.compDTO.operDataList[0].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
    })
  }
}