import { LiveRoomItemBean, Action, PhotoListBean, Params } from 'wdBean/Index'
import { Logger, StringUtils } from 'wdKit/Index'
// import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index'
import { WDRouterRule } from 'wdRouter'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { LiveMessageOptType, LiveMessageRole } from 'wdBean/src/main/ets/bean/live/LiveRoomBean'
import { LengthMetrics, LengthUnit } from '@kit.ArkUI'

const TAG = "TabChatItemComponent"

@Component
export struct TabChatItemComponent {
  item: LiveRoomItemBean = {} as LiveRoomItemBean

  aboutToAppear(): void {
    Logger.debug(TAG, "评论内容: " + this.item.text + " 评论sender: " + this.item.senderUserName)
  }

  build() {
    Row() {
      Image(this.item.senderUserAvatarUrl)
        .alt($r('app.media.default_head'))
        .borderRadius(90)
        .width(24)
        .height(24)
      Column() {
        this.messageContentText()

        if (this.item.pictureUrls && this.item.pictureUrls.length > 0) {
          Image(this.item.pictureUrls[0])
            .width(this.item.customizeExpression === 1 ? 72 : `100%`)
            .objectFit(ImageFit.Contain)
            .borderRadius(4)
            .margin({
              top: 10, bottom: 4
            })
            .onClick(() => {
              if (this.item.customizeExpression == 1) {return}
              this.gotoMultipleListImagePage(this.item.pictureUrls[0])
            })
        }

      }
      .margin({
        left: 0,
        right: 8
      })
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .alignItems(VerticalAlign.Top)
    .padding({
      left: 15,
      top: 15,
      right: 15
    })

  }

  @Builder messageContentText() {
    Row() {
      Text() {

        if (this.item.receiverUserName && this.item.receiverUserName.length > 0) {
          /// 回复的消息处理

          Span((this.item.senderUserName ?? "游客") + " ").fontColor('#2696FF')
          if (this.item.role == LiveMessageRole.host) {
            Span(' 主持人 ')
              .fontSize(11)
              .lineHeight(20)
              .textBackgroundStyle({ color: "#F1EFEB"})
              .baselineOffset(new LengthMetrics(5,LengthUnit.PX))
              .fontColor('#968562')
              .borderRadius(2)
            Span(' ')
          }
          if (this.item.role == LiveMessageRole.guest) {
            Span(' 嘉宾 ')
              .fontSize(11)
              .lineHeight(20)
              .textBackgroundStyle({ color: "#F1EFEB"})
              .baselineOffset(new LengthMetrics(5,LengthUnit.PX))
              .fontColor('#968562')
              .borderRadius(2)
            Span(' ')
          }
          Span("回复了 ").fontColor('#222222')
          Span((this.item.receiverUserName ?? "游客") + ': ').fontColor('#666666')
          Span(this.item.text).fontColor('#222222')

        } else {
          // 普通消息
          Span((this.item.senderUserName ?? "游客") + ': ').fontColor('#666666')
          Span(this.item.text).fontColor('#222222')
        }
      }
      .margin({ left: 8 })
      .lineHeight(20)
      .layoutWeight(1)
      .fontSize('14fp')
      .fontWeight(400)
    }
    .alignItems(VerticalAlign.Top)
  }

  /**
   * 大图列表页
   * @param content
   * */
  gotoMultipleListImagePage(imgUrl: string) {
    const photoList: PhotoListBean[] = []
    photoList.push({
      width: 0,
      height: 0,
      picPath: imgUrl,
      picDesc: '',
      itemType: 2,
      id: 0
    })
    let taskAction: Action = {
      type: 'JUMP_DETAIL_PAGE',
      params: {
        detailPageType: 18,
        extra: {
          photoList: photoList,
          swiperIndex: 0,
        } as ExtraDTO
      } as Params,
    };
    WDRouterRule.jumpWithAction(taskAction)
  }

  aboutToDisappear(): void {

  }
}