import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
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('14fp')
            .fontWeight(400)
            .fontColor('#222222')
          Text('主持人')
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('11fp')
            .fontWeight(400)
            .fontColor('#968562')
            .backgroundColor('#F1EFEB')
            .padding({
              left: 4,
              top: 1,
              right: 4,
              bottom: 1
            })
            .borderRadius(2)
            .margin({ left: 8 })
            .visibility('host' == this.item.role ? Visibility.Visible : Visibility.None)
          Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('12fp')
            .fontWeight(400)
            .fontColor('#999999')
            .margin({ left: 8 })
            .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)

          Text('置顶')
            .fontSize('11fp')
            .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('14fp')
          .fontWeight(400)
          .fontColor('#222222')
          .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 === 'ZH_TEXT_AND_IMAGE_MSG') {
          List({ space: this.item.pictureUrls.length == 1 ? 0 : 5 }) {
            ForEach(this.item.pictureUrls, (item: string, index: number) => {
              ListItem() {
                Image(item)
                  .width(`${100 / this.item.pictureUrls.length}%`)
                  .height(this.item.pictureUrls.length > 1 ? 70 : 174)
                  .objectFit(ImageFit.Auto)
                  .borderRadius(4)
              }.onClick(() => {
                this.photoList = []
                for (let item of this.item.pictureUrls) {
                  this.photoList.push({
                    width: 0,
                    height: 0,
                    picPath: item,
                    picDesc: ''
                  })
                }
                this.gotoMultipleListImagePage(index)
              })
            })
          }
          .listDirection(Axis.Horizontal)
          .margin({
            top: 8,
          })
        }
        //音频
        else if (this.item.dataType === 'ZH_AUDIO_MSG') {
          AudioRowComponent({
            audioUrl: this.item.audioUrl,
            duration: this.item.duration
          })
        }
        //视频
        else if (this.item.dataType === 'ZH_VIDEO_MSG') {
          RelativeContainer() {
            Image(this.item.transcodeImageUrl)
              .width('100%')
              .objectFit(ImageFit.Cover)
              .borderRadius(4)
              .id('iv_id')
            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,
          })
          .aspectRatio(Number.parseFloat(this.item.pictureResolutions[0]?.split('*')[0]) / Number.parseFloat(this.item.pictureResolutions[0]?.split('*')[1]))
          .onClick(() => {
            this.gotoVideoPlayPage()
          })
        }
      }
      .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) {
    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 {

  }
}