import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { ContentDetailDTO } from 'wdBean';
import media from '@ohos.multimedia.media';
import { OperRowListView } from './view/OperRowListView';
import { WDPlayerController } from 'wdPlayer/Index';

const TAG = 'AudioDetailComponent'

interface Arr {
  image: string,
  title: string
}

@Component
export struct AudioDetailComponent {
  private relId: string = ''
  private contentId: string = ''
  private relType: string = ''
  private avPlayer?: media.AVPlayer;
  @State playerController: WDPlayerController = new WDPlayerController();
  private arr: Arr[] = [
    { image: 'clock', title: '定时' },
    { image: 'theOriginal', title: '原文' },
    { image: 'list', title: '列表' },
  ]
  @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[] //详情
  @State coverImage: string = '' //封面图
  @State newsTitle: string = '' //标题
  @State audioUrl: string = '' //音频路径
  @State duration: number = 0 //时长
  @State outSetValueOne: number = 40 //播放进度
  @State isPlay: boolean = false

  async aboutToAppear() {
    await this.getContentDetailData()
    this.playerController.firstPlay(this.audioUrl);
    this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) => {
      console.log('现在时间', nowSeconds)
      console.log('总时间', totalSeconds)
      this.outSetValueOne = nowSeconds
      this.duration = totalSeconds
    }
  }

  onPageHide() {
    this.playerController?.pause();
  }

  build() {
    Row() {
      Column() {
        // 封面
        Row() {
          Image(this.coverImage)
            .width(240)
            .height(160)
            .borderRadius('0')
        }
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .margin({ top: 64 })

        // 标题
        Row() {
          Text(this.newsTitle)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#ffffff')
            .textAlign(TextAlign.Center)
            .lineHeight(28)
            .fontFamily('PingFang SC, PingFang SC')
        }
        .padding({ left: 34, right: 34 })
        .margin({ top: 32 })

        // 操作矩阵
        Row() {
          ForEach(this.arr, (item: Arr) => {
            Column() {
              Image(item.image == 'clock' ? $r('app.media.clock_close') : item.image == 'theOriginal' ? $r('app.media.theOriginal_close') : item.image == 'list' ? $r('app.media.list_close') : '')
                .width(28)
                .height(28)
              Text(item.title)
                .fontColor('#4D5258')
                .fontSize(12)
                .lineHeight(16)
                .margin(2)
            }
          })

        }
        .width('100%')
        .padding({ left: 49, right: 49 })
        .justifyContent(FlexAlign.SpaceBetween)
        .margin({ top: 60 })

        Column() {
          // 进度条
          Row() {
            Slider({
              value: this.outSetValueOne,
              step: 1
            })
              .showTips(true)
              .trackColor('rgba(0,0,0,0.5)')
              .selectedColor('#ED2800')
              .onChange((value: number, mode: SliderChangeMode) => {
                console.log('滑块长度', value)
                this.playerController?.setSeekTime(value, mode);
              })
          }
          .width('100%')
          .padding({ left: 24, right: 24 })
          .margin({ top: 110 })

          // 播放按钮
          Row() {
            Column() {
              Image($r('app.media.loop_close'))
                .width(24)
                .height(24)
              Text('循环')
                .fontColor('#4D5258')
                .fontSize(12)
                .lineHeight(16)
                .margin(2)
            }

            Image($r('app.media.Backward_close'))
              .width(24)
              .height(24)
            Stack({ alignContent: Alignment.Center }) {
              Image(this.isPlay ? $r('app.media.suspend') : $r('app.media.playicon'))
                .width(32)
                .height(32)
            }
            .padding(28)
            .backgroundColor('#4D5258')
            .borderRadius(50)
            .onClick(() => {
              if (this.isPlay) {
                this.playerController.pause()
              } else {
                this.playerController.play()
              }
              this.isPlay = !this.isPlay
            })

            Image($r('app.media.fastForward_close'))
              .width(24)
              .height(24)
            Column() {
              Image($r('app.media.doubleSpeed_close'))
                .width(24)
                .height(24)
              Text('倍速')
                .fontColor('#4D5258')
                .fontSize(12)
                .lineHeight(16)
                .margin(2)
            }
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .margin({ top: 56 })
          .padding({ left: 32, right: 32 })
        }
        .layoutWeight(1)

        // OperRowListView()
      }
    }

  }

  private async getContentDetailData() {
    try {
      let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
      this.contentDetailData = data;
      console.log('音乐详情', JSON.stringify(this.contentDetailData))
      this.newsTitle = this.contentDetailData[0].newsTitle
      console.log('标题', JSON.stringify(this.newsTitle))
      this.coverImage = this.contentDetailData[0].fullColumnImgUrls[0].url
      console.log('封面图', JSON.stringify(this.coverImage))
      this.duration = this.contentDetailData[0].audioList[0].duration
      console.log('音频时长', JSON.stringify(this.duration))
      this.audioUrl = this.contentDetailData[0].audioList[0].audioUrl
      console.log('音频时长', JSON.stringify(this.audioUrl))
    } catch (exception) {
      console.log('请求失败', JSON.stringify(exception))
    }
  }
}