import dayjs from 'dayjs'
import { NewsQrCode, ShareOptions } from '../model/Model'

@ComponentV2
export struct Screenshot {
  @Require @Param qrCodeInfo: ShareOptions

  build() {
    Column() {
      Column() {
        Column() {
          Image("https://agc-storage-drcn.platform.dbankcloud.cn/v0/news-hnp2d/news_tra_2.jpg").height(143).width('100%')
        }

        Column() {
          Text(this.qrCodeInfo.title)
            .fontWeight(FontWeight.Medium)
            .fontSize(14)
            .maxLines(2)
            .fontColor($r('sys.color.font_primary'))
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .margin({ top: 12 })
          Row({ space: 8 }) {
            Text(this.qrCodeInfo.articleFrom)
              .fontSize(12)
              .fontColor($r('sys.color.font_secondary'))
            Text(this.qrCodeInfo.createTime)
              .fontSize(12)
              .fontColor($r('sys.color.font_secondary'))
          }
          .margin({ top: '20%', bottom: 16 })
          .width('100%')
          .justifyContent(FlexAlign.Start)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .padding({ left: 8, right: 8 })
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .backgroundColor($r('sys.color.background_secondary'))
      .borderRadius(8)

      Row({ space: 8 }) {
        QRCode(this.qrCodeInfo.link).width(64).height(64)
        Text('长按二维码查看详情')
          .fontSize(12)
          .fontColor($r('sys.color.font_secondary'))
      }
      .width('100%')
      .margin({ top: 12 })
      .justifyContent(FlexAlign.Start)
    }
    .id(this.qrCodeInfo.id)
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor($r('sys.color.background_primary'))
    .borderRadius(8)
    .width(270)
    .height(this.qrCodeInfo.link ? 370 : 270)
    .padding(16)
  }
}