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';
const TAG = 'AudioDetailComponent'
interface Arr{
  image:string,
  title:string
}

@Component
export struct AudioDetailComponent {
  private relId: string = ''
  private contentId: string = ''
  private relType: string = ''
  private 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 duration:number = 0    //时长
  @State audioUrl:string = ''   //音频路径
  @State outSetValueOne:number = 40 //播放进度

  @State @Watch('onIsPlayChanged')isPlay: boolean = true
  onIsPlayChanged(){
    if(this.isPlay){
      console.log('监听播放')
      // this.avPlayer.play()
    }else{
      console.log('监听暂停')
      // this.avPlayer.pause()
    }
  }

  async aboutToAppear() {
    await this.getContentDetailData()
    this.playerController.firstPlay(this.audioUrl);
  }
  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(){
              Progress({ value: this.outSetValueOne, type: ProgressType.Linear })
                .width('100%')
                .color('#ED2800')
                .backgroundColor('rgba(0,0,0,0.5)')
            }
            .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)
              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))
    }
  }
}