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

const TAG = 'PlayerTitleView';
@Preview
@Component
export struct PlayerTitleView {
  @Consume contentDetailData: ContentDetailDTO
  @Consume windowWidth: number
  @Consume isOpenDetail: boolean
  @Consume isDragging: boolean
  @State titleHeight: number = 0
  @State rmhPlatform: number = 0 // 1是人民号
  @State isOverLines: boolean = false
  @State summary: string = ''

  @State private titleLines: number = 0
  @State private summaryLines: number = 0


  dialogController: CustomDialogController = new CustomDialogController({
    builder: DetailDialog({
      name: this.getName(),
      title: this.getTitle(),
      summary: this.getSummary(),
      isOpenDetail: this.isOpenDetail

    }),
    cancel:()=>{
      this.isOpenDetail = !this.isOpenDetail
    },
    customStyle: true,
    alignment: DialogAlignment.Bottom
  })

  getName(): string {
    // authTitle
    if (this.rmhPlatform == 0) {
      return this.contentDetailData?.newsSourceName || ''
    } else {
      return this.contentDetailData?.rmhInfo?.rmhName || ''
    }
  }

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

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

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

  /**
   * 截断文本
   * @param {string} str   要截断的文本   '啊啊啊啊啊'
   * @param {number} fontSize  字体大小(px)
   * @param {number} maxLines  最大行数   3
   * @param {number} textWidth 文本宽度(px)  vp 需要转换vp2px()
   * @returns {string} clipStr  截断后的文本 '啊啊'
   */
  clipText(str: string, fontSize: number, maxLines: number, textWidth: number): string {
    let strArr: string[] = str.split("")
    let truncateContent: string = '啊啊啊啊啊啊' // ...比正常文字宽度更小，这里使用啊啊啊(任意三个文字)代替计算
    let measureTruncateWidth: number = measure.measureText({
      textContent: truncateContent,
      fontSize: fontSize,
      fontWeight: 400,
      lineHeight: 20,
      wordBreak:WordBreak.BREAK_ALL
    })
    let clipStr: string = ''
    for (let i = 0; i < strArr.length; i++) {
      if (measure.measureText({
        textContent: clipStr,
        fontSize: fontSize,
        fontWeight: 400,
        lineHeight: 20,
        wordBreak:WordBreak.BREAK_ALL
      }) >= textWidth * maxLines - measureTruncateWidth) {
        this.isOverLines = true
        break;
      }
      clipStr += strArr[i]
    }
    console.log(TAG, 'clipStr:', clipStr)
    return clipStr
  }

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

    })
    this.titleHeight = info?.height as number || 0
    console.log('titleHeight:', this.titleHeight,)
    console.log(TAG, 'this.contentDetailData:', JSON.stringify(this.contentDetailData))
    this.summary = this.getSummary()
  }


  private updateSummaryLines() {
    this.summaryLines = Math.max(1, 4 - this.titleLines)
    this.isOverLines = this.summary.length > this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)).length
  }


  build() {
    Column() {
      if (this.getName()) {
        Row() {
          Text("@" + this.getName())
            .fontColor(Color.White)
            .fontSize(14)
            .maxLines(1)
            .lineHeight(25)
            .fontWeight(600)
            .fontFamily('PingFang SC-Semibold')
            .textOverflow({ overflow: TextOverflow.Ellipsis })

          if (this.getIcon()) {
            Image(this.getIcon()).height(11).margin({ left: 4, top: 3 })
          }
        }.margin({ bottom: 8 })

      }

      Text(this.getTitle())
        .fontColor(Color.White)
        .fontSize(15)
        .maxLines(3)
        .lineHeight(20)
        .fontWeight(600)
        .fontFamily('PingFang SC-Regular')
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .margin({ bottom: 2 }) //8
        .onAreaChange((oldArea: Area, newArea: Area) => {
          this.titleLines = Math.ceil((newArea.height as number) / 20) // 20是行高
          this.updateSummaryLines()
        })
      /**
       * 标题大于三行或存在简介显示查看详情按钮
       */
      // if (this.rmhPlatform == 1) {
      //   if (this.titleHeight > 200 || this.summary) {
      //     Text('查看详情 > ')
      //       .padding({
      //         left: 6,
      //         right: 6,
      //         top: 4,
      //         bottom: 4
      //       })
      //       .borderRadius(2)
      //       .backgroundColor('#99636363')
      //       .fontFamily('PingFang SC-Regular')
      //       .fontColor(Color.White)
      //       .fontSize(12)
      //       .lineHeight(14)
      //       .fontWeight(400)
      //       .onClick(() => {
      //         this.isOpenDetail = true
      //         this.dialogController?.open()
      //       })
      //   }
      // } else {
        if(this.summary) {
          Text() {
            Span(this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)))
              .fontSize(14)
              .fontColor(Color.White)
              .lineHeight(21)
              .fontWeight(400)
              .fontFamily('PingFang SC-Regular')
            if (this.isOverLines) {
              Span('...    全文')
                .fontColor('#888888')
                .fontWeight(400)
                .fontFamily('PingFang SC-Regular')
                .fontSize(12)
                .onClick(() => {
                  this.isOpenDetail = true
                  this.dialogController?.open()
                })
              ImageSpan($r('app.media.comment_unfold_svg'))
                .width(14)
                .height(14)
                .objectFit(ImageFit.Fill)
                .verticalAlign(ImageSpanAlignment.BOTTOM)
                .margin({bottom:1})
                // .padding({
                //   bottom: 4
                // })
                .onClick(() => {
                  this.isOpenDetail = true
                  this.dialogController?.open()
                })

            }
          }
            .padding({
              left: 0,//6
              right: 6,
              top: 0,//4
              bottom: 4
            })

        }
      // }
      Text(DateTimeUtils.formatDate(new Date(this.contentDetailData?.publishTime).getTime(), DateTimeUtils.PATTERN_DATE_TIME_HYPHEN_MM))
        .fontSize(12)
        .fontColor(Color.White)
        .opacity(0.7)
        .lineHeight(16)
        .fontWeight(400)
        .fontFamily('PingFang SC-Regular')
        .margin({ top: 8, bottom: 8 })

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