import { Logger } from 'wdKit';
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.onCanplay = () => {
        this.playerController.play()
        this.isPlay = true
    }
    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))
    }
  }
}