<template>
  <div :ref="'container'+ _uid"  style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
    <div class="buttons-box" id="buttonsBox" v-if="isrecord == undefined">
      <div class="buttons-box-left">
        <img v-if="!playing" src="@/assets/monitorpublic/spjk_ks1.png" class="iconfont jessibuca-btn" @click="playBtnClick">
        <img v-if="playing" src="@/assets/monitorpublic/spjk_zt1.png" class="iconfont jessibuca-btn" @click="pause">
      </div>
      <div class="buttons-box-right">
        <!-- <div @click="startRecord" style="color: #ffffff;margin-left: 10px;cursor: pointer;" v-if="isrecording == false" >开始</div>
        <div @click="stopRecordAndSave" style="color: #ffffff;margin-left: 10px;cursor: pointer;"  v-if="isrecording == true" >结束</div> -->
        <img v-if="isClose" src="@/assets/monitorpublic/u4018.png" class="iconfont jessibuca-btn" @click.stop="playbackClick">
        <img v-if="isNotMute && hasAudio==true" src="@/assets/monitorpublic/spjk_sy.png" class="iconfont jessibuca-btn" @click="mute()">
        <img v-if="!isNotMute && hasAudio==true" src="@/assets/monitorpublic/spjk_sy1.png" class="iconfont jessibuca-btn" @click="cancelMute()">
        <img title="开始录像" v-if="isrecording == false" src="@/assets/monitorpublic/startpicture.png" class="iconfont jessibuca-btn" @click="startRecord">
        <img title="结束录像" v-if="isrecording == true" src="@/assets/monitorpublic/endpicture.png" class="iconfont jessibuca-btn" @click="stopRecordAndSave">
        <img title="截取视频" src="@/assets/monitorpublic/spjk_jt.png" class="iconfont jessibuca-btn" @click="screenshot">
        <img title="拷贝视频路径" src="@/assets/monitorpublic/copy.png" class="iconfont jessibuca-btn" @click="copyCode">
        <img src="@/assets/monitorpublic/spjk_sx.png" class="iconfont jessibuca-btn" @click="playBtnClick">
        <img v-if="!fullscreen" src="@/assets/monitorpublic/spjk_qp.png" class="iconfont jessibuca-btn" @click="fullscreenSwich">
        <img v-if="fullscreen" src="@/assets/monitorpublic/spjk_qp2.png" class="iconfont jessibuca-btn" @click="fullscreenSwich">
        <img v-if="isClose" src="@/assets/monitorpublic/spjk_gb.png" class="iconfont jessibuca-btn" @click.stop="closeClick">
        
      </div>
    </div>
    <!-- v-show="isdisplay" -->
    <div v-if="isrecord =='playback'" class="buttondisplay-box" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <div @click="switchClick"  class="slider-buttonbox" v-show="isdisplay">
        <el-slider v-model="value4" 
        :min="sliderMIn"
        :max="sliderMax"
        :format-tooltip="playTimeFormat"
        @change="playTimeChange"
        style="position:absolute;width: 99%; bottom:50px;z-index: 99;margin-left: 10px;" />
      </div>
    
      <div class="buttonsrescord-box" id="buttonsBox" v-show="isdisplay">
        <div  class="timebox"><span style="color: rgb(0, 155, 255);">{{ playStartTime }}</span> / {{ playEndTime }}</div>
        <div  style="display: flex;
          align-items: center;">
          <!-- <img src="@/assets/monitorsystem/u3137.png" style="margin-right:20px;cursor: pointer;" > -->
          <img v-if="!playing" src="@/assets/monitorsystem/lxhf_ks.png"  style="cursor: pointer;" @click="gbPlay">
          <img v-if="playing" src="@/assets/monitorsystem/lxhf_zt.png"  style="cursor: pointer;" @click="gbPause">
          <!-- <img src="@/assets/monitorsystem/u3139.png"  style="margin-left:20px;cursor: pointer;"> -->
        </div>
        <div  style="display: flex; align-items: center;">
          <!-- <el-dropdown size="mini" title="播放倍速"  @command="gbScale">
            <el-button size="mini">
                    倍速 <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>
                  <el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>
                  <el-dropdown-item command="1.0">1倍速</el-dropdown-item>
                  <el-dropdown-item command="2.0">2倍速</el-dropdown-item>
                  <el-dropdown-item command="4.0">4倍速</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
          <!-- <img v-if="isNotMute" src="@/assets/monitorpublic/spjk_sy.png" class="iconfont jessibuca-btn" @click="mute()">
          <img v-if="!isNotMute" src="@/assets/monitorpublic/spjk_sy1.png" class="iconfont jessibuca-btn" @click="cancelMute()"> -->
          <img title="截取视频" src="@/assets/monitorpublic/spjk_jt.png" class="iconfont jessibuca-btn" @click="screenshot">
          <img src="@/assets/monitorpublic/spjk_sx.png" class="iconfont jessibuca-btn" @click="playBtnClick">
          <img v-if="!fullscreen" src="@/assets/monitorpublic/spjk_qp.png" class="iconfont jessibuca-btn" @click="fullscreenSwich">
          <img v-if="fullscreen" src="@/assets/monitorpublic/spjk_qp2.png" class="iconfont jessibuca-btn" @click="fullscreenSwich">
        </div>
      </div>
    </div>
    <div v-if="isrecord =='alarmInfo'" class="buttondisplay-box" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <div @click="switchClick"  class="slider-buttonbox" v-show="isdisplay">
        <el-slider v-model="value4" 
        :min="sliderMIn"
        :max="sliderMax"
        :format-tooltip="playTimeFormat"
        @change="playTimeChange"
        style="position:absolute;width: 99%; bottom:50px;z-index: 99;margin-left: 10px;" />
      </div>
    
      <div class="buttonsrescord-box" id="buttonsBox" v-show="isdisplay">
        <div  class="timebox"><span style="color: rgb(0, 155, 255);">{{ playStartTime }}</span> / {{ playEndTime }}</div>
        <div  style="display: flex;
          align-items: center;">
          <!-- <img src="@/assets/monitorsystem/u3137.png" style="margin-right:20px;cursor: pointer;" > -->
          <img v-if="!playing" src="@/assets/monitorsystem/lxhf_ks.png"  style="cursor: pointer;" @click="gbPlay">
          <img v-if="playing" src="@/assets/monitorsystem/lxhf_zt.png"  style="cursor: pointer;" @click="gbPause">
          <!-- <img src="@/assets/monitorsystem/u3139.png"  style="margin-left:20px;cursor: pointer;"> -->
        </div>
        <div  style="display: flex; align-items: center;">
          <img v-if="!fullscreen" src="@/assets/monitorpublic/spjk_qp.png" class="iconfont jessibuca-btn" @click="fullscreenSwich">
          <img v-if="fullscreen" src="@/assets/monitorpublic/spjk_qp2.png" class="iconfont jessibuca-btn" @click="fullscreenSwich">
        </div>
      </div>
    </div>
    
    <div v-if="isrecording == true" style="display: flex;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      justify-content: space-around;
      align-items: center;
      width: 95px;
      height: 20px;
      background: #000;
      opacity: 1;
      padding: 0 3px;
      border-radius: 0 0 8px 8px;
      margin: auto;
      ">
       <div style="width: 8px;
        height: 8px;
        background: #ff1f1f;
        border-radius: 50%;
        animation: magentaPulse 1s linear infinite;"></div>
          <div style="    font-size: 14px;
            font-weight: 500;
            color: #ddd;">{{ datettime }}</div>
              <div title="结束录像" class="bofang" @click="stopRecordAndSave"></div>
        
    </div>
  </div>
</template>

<script>
let jessibucaPlayer = {};
import moment  from 'moment'
import axios from 'axios';
import useClipboard from 'vue-clipboard3'
import { useUserStore } from '@/store/modules/user';
export default {
  name: 'jessibuca',
  data() {
    return {
      datettime:'00:00:00',
      tableTimer:null,
      isrecording:false,
      isdisplay:false,
      value4:"",
      sliderMIn:0,
      sliderMax:0,
      playStartTime:"00:00:00",
      playEndTime:'00:00:00',
      playing: false,
      isNotMute: false,
      quieting: false,
      fullscreen: false,
      loaded: false, // mute
      speed: 0,
      performance: "", // 工作情况
      kBps: 0,
      btnDom: null,
      videoInfo: null,
      rotate: 0,
      recordType: "webm",
      vod: true, // 点播
      forceNoOffscreen: false,
      isswitch:false,
      timer: null,
      showOperateBtns:false,
      sliderTimer: null
    };
  },
  props: ['devicechannelInfo','videoUrl','videofmp4', 'error', 'hasAudio', 'height','_uid','isrecord','isClose','tmpTime','endTime','tmpStartTime','clickNum'],
  mounted() {
    window.onerror = (msg) => {
    };
    let paramUrl = decodeURIComponent(this.$route.params.url)
    this.$nextTick(() => {
      this.updatePlayerDomSize()
      window.onresize = () => {
        this.updatePlayerDomSize()
      }
      if (typeof (this.videoUrl) == "undefined" &&this.videoUrl != undefined) {
        this.videoUrl = paramUrl;
      }
      this.btnDom = document.getElementById("buttonsBox");
      this.play(this.videoUrl)
    })
    this.sliderMax = this.tmpTime
    if(this.tmpStartTime !=null &&this.tmpStartTime !=0){
      this.playStartTime = moment(this.tmpStartTime).format("YYYY-MM-DD HH:mm:ss").split(' ')[1];
    }
    if( this.endTime != null  &&this.endTime !=0){
      this.playEndTime = this.endTime.split(' ')[1];
    }
  },
  watch: {
    videoUrl(newData, oldData) {
      if(this.tmpStartTime !=null){
        this.playStartTime = moment(this.tmpStartTime).format("YYYY-MM-DD HH:mm:ss").split(' ')[1];
        
      }
      if( this.endTime != null){
        this.playEndTime = this.endTime.split(' ')[1];
      }
      this.play(newData)
    },
    tmpTime(newData, oldData){
      this.sliderMax = newData
      if(this.tmpStartTime !=null){
        this.playStartTime = moment(this.tmpStartTime).format("YYYY-MM-DD HH:mm:ss").split(' ')[1];
      }
      if( this.endTime != null){
        this.playEndTime = this.endTime.split(' ')[1];
      }
      // this.value4 = 0
    },
    tmpStartTime(newData, oldData){
      // this.sliderMIn = newData
    },
    playing(newData, oldData){
       if(newData == true){
        this.sliderTimer =  setInterval(()=>{
        this.value4 = this.value4 + 1000
          if(this.value4>this.sliderMax){
            clearInterval(this.sliderTimer);
            this.playing =false
            this.value4 = 0
          }
          },1000)
       }else{
        clearInterval(this.sliderTimer);
       }
    },
    clickNum(newData, oldData){
      clearInterval(this.sliderTimer);
      this.value4 = 0
    },
    immediate: true
  },
  methods: {
    tableTimerFun(){
      let sec = 0
      this.datettime = "00:00:00"
      this.tableTimer = setInterval(() => {
        sec = sec + 1
        let hour = Math.floor(sec / 3600);
          let minute = Math.floor((sec - hour * 3600) / 60);
          let second = sec - hour * 3600 - minute * 60;
          if (hour < 10) {
              hour = "0" + hour;
          }
          if (minute < 10) {
              minute = "0" + minute;
          }
          if (second < 10) {
              second = "0" + second;
          }
          this.datettime =  hour + ":" + minute + ":" + second;
      }, 1000);
    },
    copyCode(){
      const {	toClipboard } = useClipboard();
		  toClipboard(this.videofmp4)
      this.$notify({
          title: '成功',
          message: '视频路径拷贝成功！',
          type: 'success'
        });
     
    },
  
    mouseenter(){
      this.isdisplay = true
    },
    mouseleave(){
      this.isdisplay = false
    },
    gbScale(command){
        this.$emit("gbScale",command)
        // this.$axios({
        //   method: 'get',
        //   url: `/api/playback/speed/${this.streamId }/${command}`
        // }).then(function (res) {});
      },
    switchClick(){
      this.isswitch = true
    },
    playTimeChange(val){
      let startTimeStr = moment(Date.parse(new Date(this.endTime)) - (this.tmpTime-val)).format("YYYY-MM-DD HH:mm:ss");
  
      if(this.isswitch == true){
        this.$emit('sliderChange',startTimeStr)
        this.isswitch = false
      }
    },
    playTimeFormat(tmp){
      let  a = moment(this.tmpStartTime + tmp).format("YYYY-MM-DD HH:mm:ss").split(' ')[1];
      return a
      },
    ceshi(){
      let startTimeStr = moment(Date.parse(new Date(this.endTime)) - (this.tmpTime-this.value4)).format("YYYY-MM-DD HH:mm:ss");
      this.$emit('sliderChange',startTimeStr)
    },
    updatePlayerDomSize() {
      let dom = this.$refs['container'+this._uid];
      let width = dom.parentNode.clientWidth
      let height = (9 / 16) * width

      const clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight)
      if (height > clientHeight) {
        height = clientHeight
        width = (16 / 9) * height
      }

      dom.style.width = width + 'px';
      dom.style.height = height + "px";
    },
    create() {
      let options = {};
      jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
        {
          container: this.$refs['container'+this._uid],
          autoWasm: true,
          background: "",
          controlAutoHide: false,
          debug: false,
          decoder: "./static/js/decoder.js",
          forceNoOffscreen: true,
          hasAudio: this.hasAudio,
          hasVideo: true,
          heartTimeout: this.isrecord == undefined? 5:1000,
          heartTimeoutReplay: true,
          heartTimeoutReplayTimes: 3,
          hiddenAutoPause: false,
          hotKey: false,
          isFlv: false,
          isFullResize: false,
          isNotMute: this.isNotMute,
          isResize: false,
          keepScreenOn: false,
          loadingText: "请稍等, 视频加载中......",
          loadingTimeout: 10,
          loadingTimeoutReplay: true,
          loadingTimeoutReplayTimes: 3,
          openWebglAlignment: false,
          operateBtns: {
            fullscreen: false,
            screenshot: false,
            play: false,
            audio: false,
            record: false
          },
          recordType: "webm",
          rotate: 0,
          showBandwidth: false,
          supportDblclickFullscreen: false,
          timeout: 10,
          useMSE: false && location.protocol !== "https:", // 此参数改为true，影响视频暂停功能
          useOffscreen: false,
          useWCS: false || location.protocol === "https",
          useWebFullScreen: false,
          videoBuffer: 0,
          wasmDecodeAudioSyncVideo: true,
          wasmDecodeErrorReplay: true,
          wcsUseVideoRender: true
        },
        options
      ));
      let jessibuca = jessibucaPlayer[this._uid];
      let _this = this;
      jessibuca.on("load", function () {
      });

      jessibuca.on("log", function (msg) {
      });
      jessibuca.on("record", function (msg) {
      });
      jessibuca.on("pause", function () {
        _this.playing = false;
      });
      jessibuca.on("play", function () {
        _this.playing = true;
        //   :min="sliderMIn"
        // :max="sliderMax"

        // 355000

          
     


        // if(document.getElementById('contentid')!=null){
        //   let contentid = document.getElementById('contentid')
        //   let video =  contentid.getElementsByTagName('video')[0]
        //   if(video != null){
        //     setInterval(()=>{
     
        //     },300)
           
        //     video.currentTime;
        //   }
         
          
         
        // }
       
      });
      jessibuca.on("fullscreen", function (msg) {
        _this.fullscreen = msg
      });

      jessibuca.on("mute", function (msg) {
        _this.isNotMute = !msg;
      });
      jessibuca.on("audioInfo", function (msg) {
      });

      jessibuca.on("bps", function (bps) {
      });
      let _ts = 0;
      jessibuca.on("timeUpdate", function (ts) {
        _ts = ts;
      });

      jessibuca.on("videoInfo", function (info) {
  
      });

      jessibuca.on("error", function (error) {
      });

      jessibuca.on("timeout", function () {
        if(_this.isrecord != undefined){
         _this.$emit('timeout',_this.videoUrl)
        }
        
      });

      jessibuca.on('start', function () {
        
        // if(_this.timer) {
        //   clearTimeout(_this.timer);
        // }
        // let tmpa =  _this.tmpTime /180
        // let i= 0
        // _this.timer = setInterval(()=>{

    
        //   _this.value4 =tmpa *i
        //   _this.playStartTime = moment(_this.tmpStartTime + tmpa *i ).format("YYYY-MM-DD HH:mm:ss").split(' ')[1];
        //   i++
        //   if(tmpa>=_this.tmpTime){
        //     clearTimeout(_this.timer);
        //     }
        // }, 1000)
        
      })

      jessibuca.on("performance", function (performance) {
        let show = "卡顿";
        if (performance === 2) {
          show = "非常流畅";
        } else if (performance === 1) {
          show = "流畅";
        }
        _this.performance = show;
     
      });
      jessibuca.on('buffer', function (buffer) {
      })

      jessibuca.on('stats', function (stats) {
      })

      jessibuca.on('kBps', function (kBps) {
        _this.kBps = Math.round(kBps);
      });

      // 显示时间戳 PTS
      jessibuca.on('videoFrame', function () {

      })

      //
      jessibuca.on('metadata', function () {

      });
    },
    playBtnClick: function (event) {
      this.play(this.videoUrl)
    },
    play: function (url) {
      if (jessibucaPlayer[this._uid]) {
        this.destroy();
      }
      this.create();
      jessibucaPlayer[this._uid].on("play", () => {
        this.playing = true;
        this.loaded = true;
        this.quieting = jessibuca.quieting;
      });
      if (jessibucaPlayer[this._uid].hasLoaded()) {
        jessibucaPlayer[this._uid].play(url);
      } else {
        jessibucaPlayer[this._uid].on("load", () => {
          jessibucaPlayer[this._uid].play(url);
        });
      }
    },
    pause: function () {
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].pause();
      }
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    screenshot: function () {
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].screenshot();
      }
    },
    mute: function () {
      this.isNotMute = false
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].mute();
      }
    },
    cancelMute: function () {
      this.isNotMute = true
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].cancelMute();
      }
    },
    destroy: function () {
      if (jessibucaPlayer[this._uid]) {
        jessibucaPlayer[this._uid].destroy();
      }
      if (document.getElementById("buttonsBox") == null) {
        this.$refs['container'+this._uid].appendChild(this.btnDom)
      }
      jessibucaPlayer[this._uid] = null;
      this.playing = false;
      this.err = "";
      this.performance = "";

    },
    eventcallbacK: function (type, message) {
    },
    fullscreenSwich: function () {
      const userStore = useUserStore()
      if (this.devicechannelInfo) {
        if(this.zhu){
          let isFull = this.isFullscreen()
          jessibucaPlayer[this._uid].setFullscreen(!isFull)
          this.fullscreen = !isFull;
          return
        }
        if (this.fullscreen) {
          axios.get(userStore.webApiMonitorUrl + '/api/play/stop/' + this.devicechannelInfo.deviceId + '/' + this.devicechannelInfo.channelId, {}).then((res) => { })
          axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + this.devicechannelInfo.deviceId + '/' + this.devicechannelInfo.channelId + '_sub', {}).then((res) => {
            this.play(res.data.data.ws_flv)
            let isFull = this.isFullscreen()
            jessibucaPlayer[this._uid].setFullscreen(!isFull)
            this.fullscreen = !isFull;
          })
        } else {
          axios.get(userStore.webApiMonitorUrl + '/api/play/stop/' + this.devicechannelInfo.deviceId + '/' + this.devicechannelInfo.channelId + '_sub', {}).then((res) => { })
          axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + this.devicechannelInfo.deviceId + '/' + this.devicechannelInfo.channelId, {}).then((res) => {
            this.play(res.data.data.ws_flv)
            let isFull = this.isFullscreen()
            jessibucaPlayer[this._uid].setFullscreen(!isFull)
            this.fullscreen = !isFull;
            
          })
        }
      } else {
        let isFull = this.isFullscreen()
        jessibucaPlayer[this._uid].setFullscreen(!isFull)
        this.fullscreen = !isFull;
      }

      // if(this.fullscreen
    },
    isFullscreen: function () {
      return document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement || false;
    },
    closeClick: function (){
      this.$emit("closeVideo",this._uid -1)
    },
    playbackClick: function (){
      this.$emit("playbackVideo", this._uid -1)
    },
    gbPlay: function (){
      this.playing = true
      this.ceshi()
      // this.$emit("gbPlay")
      // if (jessibucaPlayer[this._uid]) {
      //   this.destroy();
      // }
      // this.create();
      // jessibucaPlayer[this._uid].on("play", () => {
      //   this.playing = true;
      //   this.loaded = true;
      //   this.quieting = jessibuca.quieting;
      // });
      // if (jessibucaPlayer[this._uid].hasLoaded()) {
      //   jessibucaPlayer[this._uid].play(this.videoUrl);
      // } else {
      //   jessibucaPlayer[this._uid].on("load", () => {
      //     jessibucaPlayer[this._uid].play(this.videoUrl);
      //   });
      // }
      
    },
    gbPause: function (){
      this.$emit("gbPause")
      // if (jessibucaPlayer[this._uid]) {
      //   jessibucaPlayer[this._uid].pause();
      // }
      this.playing = false;
      this.err = "";
      this.performance = "";
    },
    startRecord: function (){
      var myDate = new Date()
      jessibucaPlayer[this._uid].startRecord('视频回放' + myDate.toLocaleString( ) , 'mp4');
      this.isrecording = true
      this.tableTimerFun()
    },
    stopRecordAndSave: function (){
      this.isrecording = false
     
      jessibucaPlayer[this._uid].stopRecordAndSave();
      clearInterval(this.tableTimer);
     
   
    }
  },
  unmounted() {
  clearInterval(this.sliderTimer);
  clearInterval(this.tableTimer);
  const userStore = useUserStore()

   if(this.timer) {
      clearTimeout(this.timer);
    }
    if (jessibucaPlayer[this._uid]) {
      jessibucaPlayer[this._uid].destroy();
    }
    if(this.devicechannelInfo != undefined &&  this.devicechannelInfo.channelId!= undefined){
     axios.get(userStore.webApiMonitorUrl + '/api/play/stop/' + this.devicechannelInfo.deviceId + '/' + this.devicechannelInfo.channelId, {}).then((res) => { })
   }
    this.playing = false;
    this.loaded = false;
    this.performance = "";
  },

}
</script>

<style>
.buttons-box {
  width: 100%;
  height: 28px;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  left: 0;
  bottom: 0;
  user-select: none;
  z-index: 10;
}

.jessibuca-btn {
  width: 20px;
  color: rgb(255, 255, 255);
  line-height: 27px;
  margin: 0px 10px;
  padding: 0px 2px;
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem !important;
}
.buttons-box-left{
  display: flex;
  align-items: center;
}
.buttons-box-right {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  height: 28px;
}
.jessibuca-container.jessibuca-controls-show{
  width: 100% !important;
  height: 100% !important;
}
.jessibuca-container.jessibuca-controls-show video{
  width: 100% !important;
  height: 100% !important;
}
.buttonsrescord-box{
  width: 100%;
  height: 60px;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 align-items: center;
 justify-content: space-between;
  left: 0;
  bottom: 0;
  user-select: none;
  z-index: 10;
  padding-left: 10px;
}
.buttondisplay-box{
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: 0;
  user-select: none;
  z-index: 10;
}

 .timebox{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}

.slider-buttonbox .el-slider__bar {
      background-color: rgb(0, 155, 255);
    }

.slider-buttonbox .el-slider__button {
  border: solid 2px rgb(0, 155, 255);
}


.bofang{
  width: 16px;
  height: 14px;
  cursor: pointer;
  background: url(@/assets/monitorpublic/endpicture.png);
  background-size: 100% 100%;
}
.bofang:hover{
 /* background-color: red; */
 background: url(@/assets/monitorpublic/endpicturea.png);
  background-size: 100% 100%;
 
}
</style>
