import { ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { CompUtils } from '../utils/CompUtils';

const TAG = 'CardView';

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

/**
 * 卡片结构：上下结构，上部分再左右结构(左图右文)
 * 卡片宽度:充满父窗口
 * 卡片高度,由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}`);
    })
  }
}