import { Logger } from 'wdKit';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { ContentDetailDTO, PhotoListBean } from 'wdBean';
import media from '@ohos.multimedia.media';
import { OperRowListView } from './view/OperRowListView';
const TAG = 'AudioDetailComponent'
@Component
export struct AudioDetailComponent {
  private relId: string = ''
  private contentId: string = ''
  private relType: string = ''
  // private avPlayer:media.AVPlayer

  @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]
  @State iocClock: string = '定时';
  @State iconTheOriginal: string = '原文';
  @State iconList: string = '列表';
  @State text: string = ''
  @State coverImage:string = 'app.media.audio'
  @State newsTitle:string = '夜读'

  @State palyIcon:string = "app.media.playicon"

  @State showList: boolean = false
  @State outSetValueOne:number = 40
  //
  // @State @Watch('onIsPlayChanged')isPlay: boolean = false
  // onIsPlayChanged(){
  //   if(this.isPlay){
  //     this.avPlayer.play()
  //     this.palyIcon = "app.media.suspend"
  //   }else{
  //     this.avPlayer.pause()
  //     this.palyIcon = "app.media.playicon"
  //   }
  // }
  //
  async aboutToAppear() {
    this.getContentDetailData()
    // // 创建avPlayer实例对象
    // this.avPlayer = await media.createAVPlayer()
    // // 创建状态机变化回调函数
    // this.setAVPlayerCallback()
  }
  //
  // // 注册avplayer回调函数
  // setAVPlayerCallback() {
  //   // seek操作结果回调函数
  //   this.avPlayer.on('seekDone', (seekDoneTime) => {
  //     console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  //   })
  //   // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  //   this.avPlayer.on('error', (err) => {
  //     console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  //     this.avPlayer.reset(); // 调用reset重置资源，触发idle状态
  //   })
  //   // 状态机变化回调函数
  //   this.avPlayer.on('stateChange', async (state, reason) => {
  //     switch (state) {
  //       case 'idle': // 成功调用reset接口后触发该状态机上报
  //         console.info('AVPlayer state idle called.');
  //         this.avPlayer.release(); // 调用release接口销毁实例对象
  //         this.isPlay = false
  //         break;
  //       case 'initialized': // avplayer 设置播放源后触发该状态上报
  //         console.info('AVPlayerstate initialized called.');
  //         this.avPlayer.prepare().then(() => {
  //           console.info('AVPlayer prepare succeeded.');
  //         })
  //         this.isPlay = false
  //         break;
  //       case 'prepared': // prepare调用成功后上报该状态机
  //         console.info('AVPlayer state prepared called.');
  //         this.isPlay = false
  //         this.avPlayer.play(); // 调用播放接口开始播放
  //         break;
  //       case 'playing': // play成功调用后触发该状态机上报
  //         console.info('AVPlayer state playing called.');
  //         this.isPlay = true
  //         break;
  //       case 'paused': // pause成功调用后触发该状态机上报
  //         console.info('AVPlayer state paused called.');
  //         this.avPlayer.play(); // 再次播放接口开始播放
  //         this.isPlay = false
  //         break;
  //       case 'completed': // 播放结束后触发该状态机上报
  //         console.info('AVPlayer state completed called.');
  //         this.avPlayer.stop(); //调用播放结束接口
  //         break;
  //       case 'stopped': // stop接口成功调用后触发该状态机上报
  //         console.info('AVPlayer state stopped called.');
  //         this.avPlayer.reset(); // 调用reset接口初始化avplayer状态
  //         this.isPlay = false
  //         break;
  //       case 'released':
  //         console.info('AVPlayer state released called.');
  //         break;
  //       default:
  //         console.info('AVPlayer state unknown called.');
  //         break;
  //     }
  //   })
  // }
  // gotoPlay(){
  //   this.avPlayer.url = this.contentDetailData[0].audioList[0].audioUrl
  // }
  build() {
      Row() {
        Column() {
          // 封面
          Row() {
            Image($r('app.media.audio'))
              .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() {
            // 定时
            Column() {
              Image($r('app.media.clock'))
                .width(28)
                .height(28)
              Text(this.iocClock)
                .fontColor('#fff')
                .fontSize(12)
                .lineHeight(16)
                .margin(2)
            }

            // 原文
            Column() {
              Image($r('app.media.theOriginal'))
                .width(28)
                .height(28)
              Text(this.iconTheOriginal)
                .fontColor('#fff')
                .fontSize(12)
                .lineHeight(16)
                .margin(2)
            }

            // 列表
            Column() {
              Image($r('app.media.list'))
                .width(28)
                .height(28)
              Text(this.iconList)
                .fontColor('#fff')
                .fontSize(12)
                .lineHeight(16)
                .margin(2)
            }
            .onClick(() => {
              this.showList = !this.showList
              Logger.info(TAG,'这里')
              console.log('列表', this.showList)
            })
          }
          .width('100%')
          .padding({ left: 49, right: 49 })
          .justifyContent(FlexAlign.SpaceBetween)
          .margin({ top: 60 })

          Column(){
            // 进度条
            Row(){
              Slider({
                value: this.outSetValueOne,
                min: 0,
                max: 100,
                style: SliderStyle.OutSet
              })
                .trackColor('rgba(0,0,0,0.5)')
                .selectedColor('#ED2800')
                .showTips(true)
                .onChange((value: number, mode: SliderChangeMode) => {
                  this.outSetValueOne = value
                  console.info('value:' + value + 'mode:' + mode.toString())
                })
            }
            .width('100%')
            .padding({left:24,right:24})
            .margin({top:110})
            // 播放按钮
            Row(){
              Image($r('app.media.loop'))
                .width(24)
                .height(24)
              Image($r('app.media.Backward'))
                .width(24)
                .height(24)
              Stack(){
                Image($r('app.media.playicon'))
                  .width(32)
                  .height(32)

              }
              .backgroundColor('rgba(255,255,255,0.1)')
              .width(60)
              .height(60)
              .borderRadius(50)
              .alignContent(Alignment.Center)
              .onClick(()=>{
                // this.gotoPlay()
                console.log('播放')
                this.getContentDetailData()
              })

              Image($r('app.media.fastForward'))
                .width(24)
                .height(24)
              Image($r('app.media.doubleSpeed'))
                .width(24)
                .height(24)
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            .margin({top:56})
            .padding({left:32,right:32})
          }
          // OperRowListView()
        }
      }

  }

  private async getContentDetailData() {
    try {
      let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
      this.contentDetailData = data;
      this.coverImage = this.contentDetailData[0].audioList[0].fullColumnImgUrls[0].url
      this.newsTitle = this.contentDetailData[0].newsTitle
      Logger.info(TAG, `contentDetailData：${JSON.stringify(this.contentDetailData)}`)
      console.log(JSON.stringify(this.contentDetailData))
      console.log(this.newsTitle)
      console.log(this.coverImage)

    } catch (exception) {

    }
  }
}