import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { LiveMessageOptType, LiveMessageRole } from 'wdBean/src/main/ets/bean/live/LiveRoomBean'
import { AudioRowComponent } from 'wdComponent/Index'
import { DateTimeUtils, StringUtils } from 'wdKit/Index'
import { WDRouterRule } from 'wdRouter/Index'

@Component
export struct TabLiveItemComponent {
  item: LiveRoomItemBean = {} as LiveRoomItemBean
  photoList: PhotoListBean[] = []

  aboutToAppear(): void {

  }

  build() {
    Row() {
      Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
        .borderRadius(90)
        .width(24)
        .height(24)

      Column() {
        Row() {
          Text(this.item.senderUserName)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('14vp')
            .fontWeight(400)
            .fontColor('#222222')
          Text(this.item.role === 'host' ? '主持人' : '嘉宾')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('11vp')
            .fontWeight(400)
            .fontColor('#968562')
            .backgroundColor('#F1EFEB')
            .padding({
              left: 4,
              top: 1,
              right: 4,
              bottom: 1
            })
            .borderRadius(2)
            .margin({ left: 8 })
            .visibility(StringUtils.isNotEmpty(this.item.role) ? Visibility.Visible : Visibility.None)

          Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('12vp')
            .fontWeight(400)
            .fontColor('#999999')
            .margin({ left: 8 })
            .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)

          Text('置顶')
            .fontSize('11vp')
            .fontWeight(400)
            .fontColor('#ED2800')
            .backgroundColor('#F1EFEB')
            .padding({
              left: 4,
              top: 1,
              right: 4,
              bottom: 1
            })
            .borderRadius(2)
            .margin({ left: 8 })
            .width(100)
            .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)
        }

        Text(this.item.text)
          .fontSize('14vp')
          .fontWeight(400)
          .fontColor('#222222')
          .lineHeight('20vp')
          .margin({
            top: 6
          })
          .width('100%')
          .textAlign(TextAlign.Start)
        //ZH_TEXT_AND_IMAGE_MSG ：图文，ZH_TEXT_MSG：文本，ZH_VIDEO_MSG：视频，ZH_AUDIO_MSG：音频
        //图文
        if (this.item.dataType === LiveMessageOptType.ZH_TEXT_AND_IMAGE_MSG) {
          List({ space: this.item.pictureUrls.length == 1 ? 0 : 5 }) {
            ForEach(this.item.pictureUrls, (itemSub: string, index: number) => {
              ListItem() {
                if (this.item.pictureUrls.length > 1) {
                  Image(itemSub)
                    .width(`${100 / this.item.pictureUrls.length}%`)
                    // .height(70)
                    .objectFit(ImageFit.Contain)
                    .borderRadius(4)
                } else {
                  Image(itemSub)
                    .width(`100%`)
                    // .aspectRatio(this.getAspectRation())
                    // .height(177)
                    .objectFit(ImageFit.Contain)
                    .borderRadius(4)
                }
              }.onClick(() => {
                this.gotoMultipleListImagePage(index)
              })
            })
          }
          .listDirection(Axis.Horizontal)
          .margin({
            top: 8,
          })
        }
        //音频
        else if (this.item.dataType === LiveMessageOptType.ZH_AUDIO_MSG) {
          AudioRowComponent({
            audioUrl: this.item.audioUrl,
            duration: this.item.duration
          })
        }
        //视频
        else if (this.item.dataType === LiveMessageOptType.ZH_VIDEO_MSG) {
          RelativeContainer() {
            Image(this.item.transcodeImageUrl)
              .width('100%')
              .height(174)
              .objectFit(ImageFit.Cover)
              .borderRadius(4)
              .id('iv_id')
            Row()
              .backgroundColor('#30000000')
              .borderRadius(4)
              .alignRules({
                left: { anchor: "iv_id", align: HorizontalAlign.Start },
                right: { anchor: "iv_id", align: HorizontalAlign.End },
                top: { anchor: "iv_id", align: VerticalAlign.Top },
                bottom: { anchor: "iv_id", align: VerticalAlign.Bottom }
              })
            Stack() {
              Row()
                .borderRadius(90)
                .width(32)
                .height(32)
                .backgroundColor('#000000')
              Image($r('app.media.player_play_ic'))
                .height(16)
                .aspectRatio(1)
            }
            .alignRules({
              left: { anchor: "iv_id", align: HorizontalAlign.Start },
              bottom: { anchor: "iv_id", align: VerticalAlign.Bottom }
            })
            .margin({
              left: 12,
              bottom: 12
            })
            .id('play_id')
          }
          .margin({
            top: 8,
          })
          .height(174)
          .onClick(() => {
            this.gotoVideoPlayPage()
          })
        }

        // 上墙或回复消息
        else if (this.item.receiverUserName && this.item.receiverUserName.length > 0) {
          this.wallOrReplySubMessage()
        }
      }
      .margin({
        left: 8,
        right: 16
      })
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .alignItems(VerticalAlign.Top)
    .padding({
      left: 17,
      top: 8,
      bottom: 8,
    })
  }

  /**
   * @param content
   * */
  gotoVideoPlayPage() {
    let taskAction: Action = {
      type: 'JUMP_DETAIL_PAGE',
      params: {
        detailPageType: 19,
        videoUrl: this.item.videoUrl,
        videoCoverUrl: this.item.transcodeImageUrl
      } as Params,
    };
    WDRouterRule.jumpWithAction(taskAction)
  }

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

  aboutToDisappear(): void {

  }

  getAspectRation(): number {
    try {
      if (this.item && this.item.pictureResolutions && this.item.pictureResolutions.length > 0) {
        let temp: string[] = this.item.pictureResolutions[0]?.split('*')
        if (temp && temp.length == 2) {
          let width = Number.parseFloat(this.item.pictureResolutions[0]?.split('*')[0])
          let height = Number.parseFloat(this.item.pictureResolutions[0]?.split('*')[1])
          return height / width
        }
      }
    } catch (e) {
      return 1
    }
    return 1
  }

  // 上墙子消息
  @Builder wallOrReplySubMessage() {
    Row() {
      Image(StringUtils.isEmpty(this.item.receiverAvatarUrl) ? $r('app.media.default_head') : this.item.receiverAvatarUrl)
        .borderRadius(90)
        .width(24)
        .height(24)
      Column() {
        Row() {
          Text() {
            Span((this.item.receiverUserName ?? "游客") + ': ').fontColor('#666666')
          }.lineHeight(20).fontSize('14fp').fontWeight(400)

          if (this.item.isWall == 1) {
            Blank().layoutWeight(1)
            Text(' 上墙 ')
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .fontSize(11)
              .fontWeight(400)
              .fontColor("#CB0000")
              .backgroundColor('#F1EFEB')
              .padding({
                left: 4,
                top: 1,
                right: 4,
                bottom: 1
              })
              .borderRadius(2)
          }
        }
        .alignItems(VerticalAlign.Top)

        Text() {
          Span(this.item.receiverText ?? "").fontColor('#222222')
        }
        .margin({top: 8})
        .lineHeight(20)
        .fontSize('14fp')
        .fontWeight(400)

        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(() => {
              this.gotoMultipleListImagePage(0)
            })
        }

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