import { Action, ContentDTO, Params, ScreenType } from 'wdBean';
import { CommonConstants, ConfigConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { CompUtils } from '../utils/CompUtils';
import { 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.hImageUrl)
        .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.title)
        .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}`);
      let taskAction: Action = {
        type: 'JUMP_H5_BY_WEB_VIEW',
        params: {
          url: ConfigConstants.DETAIL_URL
        } as Params,
      };
      WDRouterRule.jumpWithAction(taskAction)
    })
  }
}

/**
 * 卡片结构：上下结构
 * 卡片宽度:充满父窗口
 * 卡片高度,由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)
    })
  }
}