import measure from '@ohos.measure'
import { ContentDetailDTO } from 'wdBean/Index'
import { DetailDialog } from './DetailDialog'
import { componentUtils } from '@kit.ArkUI'

@Preview
@Component
export struct PlayerTitleView {
  @Consume contentDetailData: ContentDetailDTO
  @Consume windowWidth: number
  @Consume isOpenDetail: boolean
  @Consume isDragging: boolean
  @State titleHeight: number = 0
  dialogController: CustomDialogController = new CustomDialogController({
    builder: DetailDialog({
      name: this.getName(),
      title: this.getTitle(),
      summary: this.getSummary(),
      isOpenDetail: this.isOpenDetail

    }),
    autoCancel: false,
    customStyle: true,
    alignment: DialogAlignment.Bottom
  })

  getName(): string {
    // authTitle
    return this.contentDetailData?.rmhInfo?.rmhName || ''
  }

  getIcon(): string {
    return this.contentDetailData?.rmhInfo?.authIcon || ''
  }

  getTitle(): string {
    return this.contentDetailData?.newsTitle || ''
  }

  getSummary(): string {
    return this.contentDetailData?.newIntroduction || ''
  }

  aboutToAppear(): void {
    const info = measure.measureTextSize({
      textContent: this.getTitle(),
      fontSize: 15,
      fontWeight: 400,
      lineHeight: 20,
      constraintWidth: this.windowWidth - 100 - 16 - 22 + 'px',

    })
    this.titleHeight = info?.height as number || 0
    console.log('titleHeight:', this.titleHeight,)
  }

  build() {
    Column() {
      if (this.getName()) {
        Row() {
          Text("@" + this.getName())
            .fontColor(Color.White)
            .fontSize(17)
            .maxLines(1)
            .lineHeight(25)
            .fontWeight(600)
            .textOverflow({ overflow: TextOverflow.Ellipsis })

          if (this.getIcon()) {
            Image(this.getIcon()).height(10).margin({ left: 4 })
          }
        }.margin({ bottom: 8 })

      }

      Text(this.getTitle())
        .fontColor(Color.White)
        .fontSize(15)
        .maxLines(3)
        .lineHeight(20)
        .fontWeight(400)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ bottom: 8 })

      /**
       * 标题大于三行或存在简介显示查看详情按钮
       */
      if (this.titleHeight > 200 || this.getSummary()) {
        Text('查看详情 > ')
          .padding({ left: 6, right: 6, top: 4, bottom: 4 })
          .borderRadius(2)
          .backgroundColor('#99636363')
          .fontColor(Color.White)
          .fontSize(12)
          .lineHeight(14)
          .fontWeight(400)
          .margin({ bottom: 8 })
          .onClick(() => {
            this.isOpenDetail = true
            this.dialogController?.open()
          })
      }

    }
    .width(this.windowWidth - 100 + 'px')
    .padding({ left: 16, right: 22 })
    .alignItems(HorizontalAlign.Start)
    .visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
  }
}