import { Action, ContentDTO, Params } from 'wdBean';
import { CommonConstants, ConfigConstants, ScreenType } from 'wdConstant';
import { Logger, ToastUtils, DateTimeUtils } from 'wdKit';
import { CompUtils } from '../../utils/CompUtils';
import { ProcessUtils, WDRouterRule } from 'wdRouter';

const TAG: string = 'CardView';

/**
 * 轮播组件样式:
 * Carousel_Layout-01
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
 */
@Component
export struct CarouselLayout01CardView {
  private item: ContentDTO = {} as ContentDTO;
  private index: number = -1;

  build() {
    RelativeContainer() {
      Image(this.item.coverUrl)
        .width(CommonConstants.FULL_PARENT)
        .height(CommonConstants.FULL_PARENT)
        .objectFit(ImageFit.Cover)// .borderRadius($r("app.float.border_radius_6"))
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id('img_cover')

      // if (item.topLeftTipImgUrl) {
      //   Image(item.topLeftTipImgUrl)
      //     .width(CompCornerUtil.getCornerWidth(this.currentBreakpoint))
      //     .aspectRatio(CompCornerUtil.ASPECT_RATIO_75_45)
      //     .margin({ left: 6 })
      //     .objectFit(ImageFit.Cover)
      //     .alignRules({
      //       top: { anchor: '__container__', align: VerticalAlign.Top },
      //       left: { anchor: '__container__', align: HorizontalAlign.Start }
      //     })
      //     .id('img_corner_top_Left')
      // }

      Text(this.item.newsTitle)
        .width(CommonConstants.FULL_PARENT)
        .height(39)
        .padding({ left: 8, right: 69, bottom: 8 })
        .fontColor(Color.White)
        .fontSize($r('app.float.font_size_16'))
        .fontWeight(FontWeight.Medium)
        .textAlign(TextAlign.Start)
        .align(Alignment.Bottom)
        .maxLines(CompUtils.MAX_LINES_1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .linearGradient({
          direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
          colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
        })
        .borderRadius($r("app.float.border_radius_6"))
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id('txt_name')
    }
    .width(CommonConstants.FULL_PARENT)
    .aspectRatio(CompUtils.ASPECT_RATIO_2_1)
    .hoverEffect(HoverEffect.Scale)
    .onClick((event: ClickEvent) => {
      Logger.info(TAG, `BannerComponent onClick event index: ${this.index}`);
      ProcessUtils.processPage(this.item)
    })
  }
}

/**
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,由3部分:
 * 1.上部图片高度由图片的宽度及宽高比决定，上部图片宽度占父窗口'100%'，宽高比为16:9
 * 2.一行title文字高度
 * 3.一行author头像及名称高度
 */
@Component
export struct SingleColumn01CardView {
  private item: ContentDTO = {} as ContentDTO;
  private index: number = -1;

  build() {
    Column() {
      RelativeContainer() {
        // 1.海报图片
        Image(this.item.hImageUrl)
          .width(CommonConstants.FULL_PARENT)
          .aspectRatio(CompUtils.ASPECT_RATIO_16_9)
          .borderRadius($r("app.float.border_radius_6"))
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            left: { anchor: '__container__', align: HorizontalAlign.Start }
          })
          .id('img_cover')

        // 2.视频时长(Duration)
        if (this.item.startTime) {
          Text(this.item.startTime)
            .width(CommonConstants.FULL_PARENT)// .height($r('app.float.duration_bg_height'))
            .padding(10)
            .fontColor(Color.White)
            .fontSize($r('app.float.font_size_12'))
            .fontWeight(FontWeight.Normal)
            .textAlign(TextAlign.End)
            .align(Alignment.Center)
            .maxLines(CompUtils.MAX_LINES_1)// .backgroundColor(Color.Red)
            .linearGradient({
              direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
              colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
            })
            .borderRadius($r("app.float.border_radius_6"))
            .alignRules({
              bottom: { anchor: 'img_cover', align: VerticalAlign.Bottom }
            })
            .id('txt_duration')
        }
      }
      .width(CommonConstants.FULL_PARENT)
      .aspectRatio(CompUtils.ASPECT_RATIO_16_9)

      // 3.标题1行/title
      Text(this.item.title)
        .width(CommonConstants.FULL_PARENT)
        .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
        .fontWeight(FontWeight.Normal)
        .textAlign(TextAlign.Start)
        .fontSize($r('app.float.font_size_14'))
        .fontColor($r('app.color.color_333333'))
        .maxLines(CompUtils.MAX_LINES_1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .padding({ bottom: 8 })
    .backgroundColor(Color.White)
    .borderRadius($r("app.float.border_radius_6"))
    .hoverEffect(HoverEffect.Scale)
    .onClick((event: ClickEvent) => {
      Logger.info(TAG, `SingleColumn01CardView onClick event index: ${this.index}`);
      let taskAction: Action = {
        type: 'JUMP_H5_BY_WEB_VIEW',
        params: {
          url: ConfigConstants.DETAIL_URL
        } as Params,
      };
      WDRouterRule.jumpWithAction(taskAction)
    })
  }
}

/**
 * 卡片结构：上下结构，上部分再左右结构(左图右文)
 * 卡片宽度:充满父窗口
 * 卡片高度,由2部分组成:
 * 1.左侧图片高度由图片的宽度及宽高比决定，左侧图片宽度占父窗口'38%'，宽高比为3:4;右侧文本及按钮等垂直线性排列
 * 2.最多3行description文字高度
 */
@Component
export struct SingleColumn02CardView {
  private item: ContentDTO = {} as ContentDTO;
  private index: number = -1;

  build() {
    Column() {
      Row() {
        Image(this.item.vImageUrl)
          .width('38%')
          .aspectRatio(CompUtils.ASPECT_RATIO_3_4)
          .borderRadius($r("app.float.border_radius_6"))

        // Blank()
        Column() {
          Text(this.item.title)
            .margin({ right: 20 })
            .fontColor($r('app.color.color_333333'))
            .fontSize($r('app.float.font_size_16'))
            .fontWeight(FontWeight.Bold)// .textAlign(TextAlign.Start)
            .maxLines(CompUtils.MAX_LINES_1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })

          if (this.item.heatValue) {
            Text() {
              Span(`热度 `)
                .fontColor($r('app.color.color_666666'))

              Span(`${this.item.heatValue}`)
                .fontColor($r('app.color.color_333333'))
            }
            .height(20)
            .margin({ top: 8, right: 20 })
            .fontSize($r('app.float.font_size_14'))
            .maxLines(CompUtils.MAX_LINES_1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          }

          if (this.item.startTime) {
            Text() {
              Span(`开始 `)
                .fontColor($r('app.color.color_666666'))
              Span(`${this.item.startTime}`)
                .fontColor($r('app.color.color_333333'))
            }
            .height(20)
            .margin({ top: 8, right: 20 })
            .fontSize($r('app.float.font_size_14'))
            .maxLines(CompUtils.MAX_LINES_1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          }

          if (this.item.endTime) {
            Text() {
              Span(`结束 `)
                .fontColor($r('app.color.color_666666'))
              Span(`${this.item.endTime}`)
                .fontColor($r('app.color.color_333333'))
            }
            .height(20)
            .margin({ top: 8, right: 20 })
            .fontSize($r('app.float.font_size_14'))
            .maxLines(CompUtils.MAX_LINES_1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          }

          Text('即将开始')
            .width(96)
            .height(34)
            .margin({ top: 15 })
            .backgroundImage($r('app.media.bg_event_status_no_start'))
            .fontColor($r('app.color.color_FE4B05'))
            .fontSize($r('app.float.font_size_14'))
            .textAlign(TextAlign.Center)
            .maxLines(CompUtils.MAX_LINES_1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .width('62%')
        .margin({ left: 12, right: 12, top: 8, bottom: 8 })
        // .backgroundColor(Color.Red)
        .alignItems(HorizontalAlign.Start) // 内容靠左对齐

      }
      .width(CommonConstants.FULL_PARENT)
      .alignItems(VerticalAlign.Top)

      // .backgroundColor(Color.Orange)

      Text(this.item.description)
        .width(CommonConstants.FULL_PARENT)
        .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
        .fontWeight(FontWeight.Normal)
        .textAlign(TextAlign.Start)
        .fontSize($r('app.float.font_size_14'))
        .fontColor($r('app.color.color_666666'))
        .maxLines(CompUtils.MAX_LINES_3)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .padding({ bottom: 8 })
    .backgroundColor(Color.White)
    .borderRadius($r("app.float.border_radius_6"))
    .hoverEffect(HoverEffect.Scale)
    .onClick((event: ClickEvent) => {
      Logger.info(TAG, `SingleColumn02CardView onClick event index: ${this.index}`);
      let taskAction: Action = {
        type: 'JUMP_H5_BY_WEB_VIEW',
        params: {
          url: ConfigConstants.DETAIL_URL
        } as Params,
      };
      WDRouterRule.jumpWithAction(taskAction)
    })
  }
}

/**
 * 瀑布流组件样式:
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,由3部分:
 * 1.上部图片高度由图片的宽度及宽高比决定，上部图片宽度占父窗口'100%'，宽高比为可能是3:4或16:9
 * 2.两行title文字高度
 * // 3.一行author头像及名称高度
 */
@Component
export struct MasonryLayout01CardView {
  private item: ContentDTO = {} as ContentDTO;
  private index: number = -1;

  build() {
    Column() {
      RelativeContainer() {
        // 1.海报图片/screenTyp(是高分辨率横图0，highLandscapeCover,还是高分辨率竖图1，highPortraitCover)，根据宽高比设置图片参数及对应的图片
        Image(this.item.screenType == ScreenType.PORTRAIT ? this.item.vImageUrl : this.item.hImageUrl)
          .width(CommonConstants.FULL_PARENT)
          .height(CommonConstants.FULL_PARENT)
          .borderRadius($r("app.float.image_border_radius"))
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            left: { anchor: '__container__', align: HorizontalAlign.Start }
          })
          .id('img_cover')

        // 2.腰线
        if (this.item.startTime) {
          Text(this.item.startTime)
            .width(CommonConstants.FULL_PARENT)
            .height(35)
            .margin({ top: 8, right: 5 })
            .fontColor(Color.White)
            .fontSize($r('app.float.font_size_12'))
            .fontWeight(FontWeight.Normal)
            .textAlign(TextAlign.End)
            .align(Alignment.Center)
            .maxLines(CompUtils.MAX_LINES_1)// .backgroundColor(Color.Red)
            .linearGradient({
              direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
              colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
            })
            .borderRadius($r("app.float.image_border_radius"))
            .alignRules({
              bottom: { anchor: 'img_cover', align: VerticalAlign.Bottom }
            })
            .id('txt_duration')
        }
      }
      .width(CommonConstants.FULL_PARENT)
      .aspectRatio(this.item.screenType == ScreenType.PORTRAIT ? CompUtils.ASPECT_RATIO_3_4 : CompUtils.ASPECT_RATIO_16_9)

      // 2.标题2行
      Text(this.item.title)
        .width(CommonConstants.FULL_PARENT)
        .margin({ top: 4 })// .backgroundColor(Color.Brown)
        .fontWeight(FontWeight.Normal)
        .textAlign(TextAlign.Start)
        .fontSize($r('app.float.font_size_14'))
        .fontColor($r('app.color.color_666666'))
        .maxLines(CompUtils.MAX_LINES_2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      // Row() {
      //   // 3.pugc短视频/1行：avator 头像/author：名称
      //   Image(this.item.avator)
      //     .width(20)
      //     .height(20)
      //     .margin({ left: 3, top: 4 })
      //     .borderRadius(10)
      //   // .backgroundColor(Color.Yellow)
      //
      //   // Blank()
      //   Text(item.author)
      //     .margin({ left: 5, top: 4 })
      //     .fontColor(Color.White)
      //     .fontSize($r('app.float.font_size_12'))// .backgroundColor(Color.Red)
      //     .textOverflow({ overflow: TextOverflow.Ellipsis })
      //     .fontWeight(FontWeight.Medium)
      //     .textAlign(TextAlign.Start)
      //     .align(Alignment.Center)
      //     .maxLines(CompUtils.MAX_LINES_1)
      // }
      // .width(CommonConstants.FULL_PARENT)
      // .justifyContent(FlexAlign.Start)
      // .alignItems(VerticalAlign.Center)
    }
    // .padding({ bottom: 8, right: 4 })
    // .backgroundColor(Color.Orange)
    .hoverEffect(HoverEffect.Scale)
    .onClick((event: ClickEvent) => {
      Logger.info(TAG, `MasonryLayout01CardView onClick event index: ${this.index}`);
      let taskAction: Action = {
        type: 'JUMP_H5_BY_WEB_VIEW',
        params: {
          url: ConfigConstants.DETAIL_URL
        } as Params,
      };
      WDRouterRule.jumpWithAction(taskAction)
    })
  }
}

/**
 * 早晚报数据卡片
 */
@Component
export struct PaperSingleColumn999CardView {
  private item: ContentDTO = {} as ContentDTO;
  private index: number = -1;

  getPublishTime(): string {
    const publishTimestamp = parseInt(this.item?.publishTime)
    const currentTime = Date.now(); // 当前时间戳

    // 计算差异
    const timeDifference = currentTime - publishTimestamp;

    // 转换为分钟、小时和天
    const minutes = Math.floor(timeDifference / (1000 * 60));
    const hours = Math.floor(timeDifference / (1000 * 60 * 60));
    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));

    // 根据时间差返回对应的字符串
    let result: string;

    if (minutes < 60) {
      result = `${minutes}分钟前`;
    } else if (hours < 24) {
      result = `${hours}小时前`;
    } else {
      result = `${days}天前`;
    }

    console.log(result);
    return result
  }

  build() {
    Column() {
      Text(this.item?.newsTitle)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Start)
        .maxLines(3)
        .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
        .margin({ left: 22, right: 22, top: 28 })
      if (this.item?.coverUrl) {
        Stack({ alignContent: Alignment.BottomEnd }) {
          Image(this.item?.coverUrl)
            .borderRadius(5)
            .aspectRatio(16 / 9)
            .padding({ top: 10 })
          if (this.item?.videoInfo) {
            Row() {
              Image($r('app.media.card_play'))
                .width(14)
                .height(14)
                .objectFit(ImageFit.Contain)
              Text(DateTimeUtils.getFormattedDuration(this.item?.videoInfo.videoDuration * 1000))
                .fontColor(Color.White)
                .fontSize($r('app.float.vp_12'))
                .fontWeight(500)
                .textAlign(TextAlign.End)
                .lineHeight(18)
                .textShadow({
                  radius: 2,
                  color: 'rgba(0,0,0,0.3)',
                  offsetY: 2
                })
                .margin({
                  right: 10,
                  left: 3
                })
            }
            .margin({
              bottom: 3
            })
            .width(CommonConstants.FULL_PARENT)
            .justifyContent(FlexAlign.End)
          }
        }.margin({ left: 22, right: 22 })
      }
      if (this.item?.newsSummary) {
        Text(this.item?.newsSummary)
          .fontSize(14)
          .padding({ top: 10 })
          .alignSelf(ItemAlign.Start)
          .maxLines(3)
          .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
          .margin({ left: 22, right: 22 })
      }
      if (this.item?.visitorComment) {
        Row() {
          Row() {
            Text(this.item?.source)
              .fontSize(12)
              .fontColor(Color.Gray)
              .margin({ left: 22 })
            Image($r('app.media.point'))
              .width(16)
              .height(16)
              .margin({ top: 10, bottom: 10 })
            Text(this.getPublishTime())
              .fontSize(12)
              .fontColor(Color.Gray)
            Text(this.item?.visitorComment + "评")
              .fontSize(12)
              .fontColor(Color.Gray)
              .margin({ left: 6 })
          }
          .justifyContent(FlexAlign.Start)

          Image($r('app.media.icon_paper_share'))
            .width(16)
            .height(16)
            .margin({ left: 10, right: 22, top: 10, bottom: 10 })
            .alignRules({
              center: { anchor: '__container__', align: VerticalAlign.Center },
              right: { anchor: '__container__', align: HorizontalAlign.End }
            })
            .onClick(() => {
              ToastUtils.showToast('分享为公共方法，待开发', 1000)
            })
        }.width(CommonConstants.FULL_PARENT)
        .justifyContent(FlexAlign.SpaceBetween)
      }
    }
    .backgroundColor(Color.White)
    .margin({ bottom: 5, left: 12, right: 12 })
    .borderRadius(4)
    .onClick(() => {
      ProcessUtils.processPage(this.item)
    })
  }
}