//*
// 伴音控制栏
// */

import Loger from "../Loger";
import Ape from "./Ape";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
import TimerCounterTool from "libs/TimerCounterTool";

let loger = Loger.getLoger('PC-MusicControlBarApe');
let curMusicVolOn;
class MusicControlBarApe extends Ape {
  constructor() {
    super();
    this.playStatus = "";
    this.isShowVolumeBar = false;//
    this.isProgressMouseDown = false;//进度条是否按下
    this.isProVolMouseDown = false;//音量控制条是否已经按钮
    this.isOpenUpdateStatusInfo = false;//是否开同步信息
    this.audio = null;//需要控制的播放器
    this.controlCallback = null;
    this.totalTime = 0;
    this.musicVolume = 60;//当前音量
    this.seekPercent = 0;//当前进度
    this.seekTime = 0;//

    this.updateCounter = 0;//定时更新数据的计数器
    this.updateStatusDelay = 5;//每5秒更新一次数据
    this.timerCounter = new TimerCounterTool();//计时器
    this.timerCounter.addTimerCallBack(this.timerCounterUptate.bind(this), 1);//计时器监听 每秒更新一次

    this.init();
    this.addEvent();
  }

  init() {
    this.stop();
    this.updatePlayProgressBar();
    this.updaterVolumeProgressBar()
  }

  addEvent() {
    $("#musicShareVolumePlay").on("click", this._openVolumeControl.bind(this));//打开音量控制
    //音量控制
    $('#musicShareVoice_btn').on('mousedown', this._changeVolume.bind(this));//音量进度条
    //伴音音量直接点击到某个地方
    $("#musicShareVoice_bg").on("mousedown",this._musicProVolBg.bind(this));
    $("#musicShareVoice_color").on("mousedown",this._musicProVolBg.bind(this));

    //暂停播放伴音按钮
    $("#musicShareProgressPause").on("click", this._clickPause.bind(this));
    //继续播放伴音按钮
    $("#musicShareProgressPlay").on("click", this._clickPlay.bind(this));

    //进度条控制
    $('#musicShareProgress_btn').on('mousedown', this._changeProgressBar.bind(this));

    //静音
    $("#musicShareVolumePlay").on("click", this._clickSilenceMusicHandler.bind(this));
    //取消静音
    $("#musicShareVolumePause").on("click", this._clickCancelSilenceMusicHandler.bind(this));
    //关闭音乐盒子
    $('#closeMusicClose').on('mousedown', this._closeMusicCloseHandler.bind(this));
    //音乐盒子移动
    $('#musicShareGroup').on('mousedown', this._mouseDownHandler.bind(this));

    //给整个进度条可以点击seek
    $('#musicShareProgress_bg').on('mousedown', this._clickProgressBarBg.bind(this));
    $('#musicShareProgress_color').on('mousedown', this._clickProgressBarBg.bind(this));
  }

  //计时器-------------------
  //开启计时器
  startTimerCounter() {
    loger.log("开启计时器")
    this.updateCounter = 0;
    this.stopTimerCounter();
    if (this.timerCounter) {
      this.timerCounter.startTimer();
    }
  }

  //停止计时器
  stopTimerCounter() {
    loger.log("停止计时器")
    this.updateCounter = 0;
    if (this.timerCounter) {
      this.timerCounter.stopTimer();
    }
  }

  timerCounterUptate() {
    if (this.audio && !this.isProgressMouseDown) {
      this.totalTime = this.audio.duration || 0;
      this.seekTime = this.audio.currentTime || 0;
      this.seekPercent = parseInt(this.seekTime / this.totalTime * 100);
      let curtotalTime = this.totalTime;
      let curseekTime = this.seekTime;
      let curTimeTotal = this.timerCounterLayOut(curtotalTime);
      let curTime = this.timerCounterLayOut(curseekTime);
      $("#musicPresentTime").html(curTime);
      $("#musicSumTime").html(curTimeTotal);
      this.updatePlayProgressBar();
    }
    if (this.seekTime >= this.totalTime && this.seekTime != 1) {
      if (this.totalTime > 0) {
        this.sendCallBack(MusicControlBarApe.STOP)
      }
      this.stopTimerCounter();
      this.stop();
    }

    //定时更新同步数据
    this.updateCounter++;
    if (this.updateCounter >= this.updateStatusDelay) {
      this.updateCounter = 0;
      loger.warn("定时同步更新媒体共享的状态")
      this.sendCallBack(this.playStatus);
    }
  }

  timerCounterLayOut(timestamp) {
    let minute = 0,
      second = 0;
    minute = Math.floor(timestamp / 60);
    second = Math.floor(timestamp - minute * 60)
    let timeValue = ((minute < 10) ? "0" : "") + minute;
    timeValue += ((second < 10) ? ":0" : ":") + second;
    return timeValue;
  }

  //外部接口调用------------------------------
  play(_seek) {
    loger.log("play");
    this.playStatus = MusicControlBarApe.PLAY;
    this.showPauseUI();
    this.showBox();
    this.startTimerCounter();
  }

  pause() {
    loger.log("pause");
    this.playStatus = MusicControlBarApe.PAUSE;
    this.showPlayUI();
    this.showBox();
    this.stopTimerCounter();
  }

  stop() {
    loger.log("stop");
    this.seekPercent = 0;
    this.seekTime = 0;
    this.totalTime = 0;
    this.playStatus = MusicControlBarApe.STOP;
    this._hideMusicSharePlayProgressVoiceBox();
    this.updatePlayProgressBar();
    this.showPlayUI();
    this.hideBox();
    this.stopTimerCounter();
  }

  seek(_seek) {
    loger.log("seek");
    this.showBox();
    this.seekTime = _seek || 0;
    this.seekPercent = parseInt(this.seekTime / this.totalTime * 100);
    this.updateVideoProgress();
    this._hideMusicSharePlayProgressVoiceBox();
  }

  changeVolume(_volume) {
    loger.log("changeVolume");
    this.showBox();
    this.musicVolume = _volume || 0;
    this.updaterVolumeProgressBar();
  }


  //-UI
  showPlayUI() {
    $("#musicShareProgressPause").hide();
    $("#musicShareProgressPlay").show();
  }

  showPauseUI() {
    $("#musicShareProgressPause").show();
    $("#musicShareProgressPlay").hide();
  }

  showBox() {
    $("#h5MusicShareControls").show();
  }

  hideBox() {
    $("#h5MusicShareControls").hide();
  }

  //开启声音
  _musicVoiceOpenHandler() {
    $('#musicShareVolumePlay').show();
    $('#musicShareVolumePause').hide();
  }

  //静音
  _musicVoiceCloseHandler() {
    $('#musicShareVolumePause').show();
    $('#musicShareVolumePlay').hide();
    $('#musicPlayPercentage').html("0%");
    $('#musicShareVoice_btn').css("left", 0);
    $('#musicShareVoice_color').css("width", 0);
  }

  //------------------------------------
  //播放按钮
  _clickPlay() {
    loger.log("播放按钮点击===>");
    this.updateCounter = 0;
    this.playStatus = MusicControlBarApe.PLAY;
    this.showPauseUI();
    this.startTimerCounter();
    this.sendCallBack(MusicControlBarApe.PLAY);
  }

  //暂停播放
  _clickPause() {
    loger.log("暂停播放按钮点击===>");
    this.updateCounter = 0;
    this.playStatus = MusicControlBarApe.PAUSE;
    this.showPlayUI();
    this.stopTimerCounter();
    this.sendCallBack(MusicControlBarApe.PAUSE);
  }

  //静音
  _clickSilenceMusicHandler() {
    loger.log("静音按钮点击===>");
    curMusicVolOn = document.getElementById("h5Music").volume;
    document.getElementById("h5Music").volume = 0;
    this.updateCounter = 0;

    this.musicVolume = 0;
    if (this.playStatus == MusicControlBarApe.PLAY) {
      this.sendCallBack(MusicControlBarApe.PLAY)
    } else if (this.playStatus == MusicControlBarApe.PAUSE) {
      this.sendCallBack(MusicControlBarApe.PAUSE)
    } else {
      this.sendCallBack(MusicControlBarApe.STOP)
    }

    this.updateVideoProgress();

    this._musicVoiceCloseHandler();
  }

  //取消静音
  _clickCancelSilenceMusicHandler() {
    loger.log("取消静音按钮点击===>");
    /*  document.getElementById("h5Music").volume=curMusicVolOn;
     this.changeVolume(curMusicVolOn*100)
     this.updateCounter = 0;
     this._musicVoiceOpenHandler();
     this.playStatus = MusicControlBarApe.PLAY;
     this.sendCallBack(MusicControlBarApe.PLAY);*/
    this._musicVoiceOpenHandler();
  }

  //关闭音乐盒子
  _closeMusicCloseHandler() {
    $('#musicShareGroup').hide();
    // this.updateCounter = 0;
    this.sendCallBack(MusicControlBarApe.STOP);
    this.stopTimerCounter();
    this.stop();
  }

  //音乐盒子移动
  _mouseDownHandler(evt) {
    this.pointGrou = {};
    let _musicShareGroup = document.getElementById('musicShareGroup');
    let windowX = (evt || window.event).clientX;
    let windowY = (evt || window.event).clientY;
    let prevX = windowX - _musicShareGroup.offsetLeft;
    let prevY = windowY - _musicShareGroup.offsetTop;
    this.pointGroux = Math.round(prevX);
    this.pointGrouy = Math.round(prevY);
    document.onmousemove = this._mouseMoveHandler.bind(this);
    document.onmouseup = this._mouseUpHandler.bind(this);

  }

  //音乐盒子移动
  _mouseMoveHandler(evt) {
    let _musicShareGroup = document.getElementById('musicShareGroup');
    let docBox = $('.docBox')[0];
    let windowX = (evt || window.event).clientX;
    let windowY = (evt || window.event).clientY;
    let toX = windowX - this.pointGroux;
    let toY = windowY - this.pointGrouy;
    let vieww = document.documentElement.clientWidth || document.body.clientWidth;
    let viewh = document.documentElement.clientHeight || document.body.clientHeight;
    if (toX < 0) {
      toX = 0;
    } else if (toX > docBox.offsetWidth - _musicShareGroup.offsetWidth) {
      toX = docBox.offsetWidth - _musicShareGroup.offsetWidth;
    }
    if (toY < 0) {
      toY = 0;
    } else if (toY > docBox.offsetHeight - _musicShareGroup.offsetHeight) {
      toY = docBox.offsetHeight - _musicShareGroup.offsetHeight;
    }
    $("#musicShareGroup").css({'left': toX + 'px', 'top': toY + 'px'});
    return false;
  }

  //鼠标抬起
  _mouseUpHandler(evt) {
    document.onmousemove = null;
    document.onmouseup = null;
  }

//打开音量控制条
  _openVolumeControl() {
    if (this.isShowVolumeBar == true) {
      this._hideMusicSharePlayProgressVoiceBox();
    } else {
      this._showMusicSharePlayProgressVoiceBox();
    }
  }

  //音量进度条-----------------------------------------
  //音量控制鼠标按下
  _changeVolume(evt) {
    this.updateCounter = 0;
    this.isProVolMouseDown = true;
    document.onmousemove = this._mouseMoveMusicVoiceHandler.bind(this);
    document.onmouseup = this._mouseUpMusicVoiceHandler.bind(this);
    return false;
  }

  //音量条移动
  _mouseMoveMusicVoiceHandler(evt) {
    let per = this._moveMethod(evt);
    this.musicVolume = per;
    this.updaterVolumeProgressBar();
  }
  _musicProVolBg(evt){
    this.isProgressMouseDown = true;
    let per = this._moveMethod(evt);
    this.musicVolume = per;
    if (this.musicVolume > 0) {
      //音量大于零  声音图标是正常图标
      this._musicVoiceOpenHandler();
    }
    this.updaterVolumeProgressBar();
    this. _mouseUpMusicVoiceHandler(evt);
  }

  _mouseUpMusicVoiceHandler(evt) {
    if (this.isProVolMouseDown) {
      if (this.playStatus == MusicControlBarApe.PLAY) {
        this.sendCallBack(MusicControlBarApe.PLAY)
      } else if (this.playStatus == MusicControlBarApe.PAUSE) {
        this.sendCallBack(MusicControlBarApe.PAUSE)
      } else {
        this.sendCallBack(MusicControlBarApe.STOP)
      }
      let per = this._moveMethod(evt);
      if (per == 0) {
        this._musicVoiceCloseHandler();
      }
      if (per > 0) {
        //音量大于零  声音图标是正常图标
        this._musicVoiceOpenHandler();
      }
    }
    this.isProVolMouseDown = false;
    document.onmousemove = null;
    document.onmouseup = null
  }

  updaterVolumeProgressBar() {
    let _color = $('#musicShareVoice_color');
    let _btn = $('#musicShareVoice_btn');
    let _vol = $('#musicPlayPercentage');
    let perChange = this.musicVolume / 100;
    if (this.audio) {
      this.audio.volume = perChange;//设置音量
    }
    _btn.css('left', this.musicVolume + '%');
    _color.css('width', this.musicVolume + '%');
    _vol.html(this.musicVolume + '%');
  }

  _showMusicSharePlayProgressVoiceBox() {
    this.isShowVolumeBar = true;
    $(".musicSharePlayProgressVoiceBox").show();
  }

  _hideMusicSharePlayProgressVoiceBox() {
    this.isShowVolumeBar = false;
    $(".musicSharePlayProgressVoiceBox").hide();
  }

  //播放进度条控制-------------------------------------
  _changeProgressBar(evt) {
    this._hideMusicSharePlayProgressVoiceBox();
    this.isProgressMouseDown = true;
    document.onmousemove = this._mouseMoveMusicProgressHandler.bind(this);
    document.onmouseup = this._mouseUpMusicaHandler.bind(this);
    return false;
  }

  //鼠标在进度条上移动
  _mouseMoveMusicProgressHandler(evt) {
    let per = this._moveMethod(evt);
    this.seekPercent = per;
    this.updatePlayProgressBar();
    //console.log("进度条移动百分比", this.seekPercent);
  }

  _clickProgressBarBg(evt) {
    this.isProgressMouseDown = true;
    let per = this._moveMethod(evt);
    this.seekPercent = per;
    this.updatePlayProgressBar();
    this. _mouseUpMusicaHandler(evt);
  }

  updatePlayProgressBar() {
    let _color = $('#musicShareProgress_color');
    let _btn = $('#musicShareProgress_btn');
    _btn.css('left', this.seekPercent + '%');
    _color.css('width', this.seekPercent + '%');
  }

  updateVideoProgress() {
    try {
      this.audio.currentTime = this.seekTime;//设置音量
    } catch (err) {
      loger.warn("无法设置audio的currentTime");
    }
  }

  //鼠标进度条抬起
  _mouseUpMusicaHandler(evt) {
    if (this.isProgressMouseDown) {
      this.seekTime = parseInt(this.seekPercent * this.totalTime * 0.01);

      if (this.playStatus == MusicControlBarApe.PLAY) {
        this.sendCallBack(MusicControlBarApe.PLAY)
      } else if (this.playStatus == MusicControlBarApe.PAUSE) {
        this.sendCallBack(MusicControlBarApe.PAUSE)
      } else {
        this.sendCallBack(MusicControlBarApe.STOP)
      }
      this.updateVideoProgress();
    }
    this.isProgressMouseDown = false;
    document.onmousemove = null;
    document.onmouseup = null
  }

  //进度条移动函数
  _moveMethod(evt) {
    let windowX = (evt || window.event).clientX;
    let _width = $('#musicShareProgress_bg')
    let left = _width.offset().left;
    let _percentage = _width.innerWidth();
    let prevX = parseInt(windowX - left);
    if (prevX < 0)prevX = 0;
    if (prevX > _percentage)prevX = _percentage;
    let per = Math.floor(100 * prevX / _percentage);
    return per;
  }

  //调用回调函数通知外部
  sendCallBack(_action, _data) {
    if (!this.isOpenUpdateStatusInfo) {
      return
    }
    if (this.controlCallback) {
      this.controlCallback({
        action: _action,
        data: {
          seek: this.seekTime,
          musicVolume: this.musicVolume
        }
      })
    }
  }
}
MusicControlBarApe.prototype.STOP = MusicControlBarApe.STOP = "stop";//0
MusicControlBarApe.prototype.PLAY = MusicControlBarApe.PLAY = "play";//1
MusicControlBarApe.prototype.PAUSE = MusicControlBarApe.PAUSE = "pause";//2
MusicControlBarApe.prototype.SEEK = MusicControlBarApe.SEEK = "seek";//3
MusicControlBarApe.prototype.CHANGE_VOLUME = MusicControlBarApe.CHANGE_VOLUME = "change_volume";//4

export default MusicControlBarApe;