<template>
  <div class="wrap">
    <el-row :gutter="20" style="background:#fff;">
      <el-col :span="5">
        <p style="font-size:17px;font-weight:bold;">摄像机列表</p>
        <el-tree :data="cameraList" :props="defaultProps" @node-click="cameranodeClick"></el-tree>
      </el-col>
      <el-col :span="18" style="position:relative">
        <p style="font-size:17px;font-weight:bold;">录像回放</p>
        <el-row style="margin:15px 0px">
          <el-col :span="10">
            <div>摄像头名称及编码：{{cameraName}}</div>
          </el-col>
          <el-col :span="10">
            <div >位置：{{lampPoleLocation}}</div>
          </el-col>
        </el-row>
        <el-row style="margin:10px 0px">
          <el-col :span="10">
            <div>
              回放日期：<el-date-picker v-model="backDate" @change="changeBackDate" type="date" placeholder="请选择" :disabled-date="disabledDate" :clearable="false" />
            </div>
          </el-col>
          <el-col :span="10">
            录像列表：<el-select v-model="backVideo" @change="changemp4" placeholder="请选择" style="width: 250px">
                <el-option
                    v-for="item in chooseTimePlayArr"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
          </el-col>
        </el-row>
        <div style="position:relative;width:90%">
          <video width="100%"  controls v-if="reFresh" autoplay="autoplay" id="videoElementID" crossorigin="anonymous" style="margin-top:0;vertical-align:top;padding-bottom:20px">
            <source :src="playPath" :key="playPath"  type="video/mp4">
            您的浏览器不支持Video标签。
          </video>
          <img src="/img/map/jietu.png" class="jietu" @click="savePic('jietu.png')" />
          <div class="beisu-box">倍速
            <el-select v-model="rateValue" id="rate" @change="beisuHand" style="width:75px">
              <el-option v-for="item in rateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
        <div><el-button @click="kuaitui">快退</el-button><el-button @click="kuijin">快进</el-button></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {GetDevicesCameras, rewindText} from '@/api/playback'
import {ref,onMounted,nextTick} from 'vue'
import {useRoute} from "vue-router";
const route = useRoute()


//定义一些变量
const rateValue = ref("1.0")
const cameraName = ref("")
const lampPoleLocation = ref("")
const reFresh = ref(true)
const rateOptions = ref([{value:'0.5', label:'0.5'},{value:'1.0', label:'1.0'},{value:'1.25', label:'1.25'},{value:'1.5', label:'1.5'},{value:'2.0', label:'2.0'},{value:'3.0', label:'3.0'}])
const cameraList = ref([])
const streamId = ref("")
const backDate = ref("")
const playPath = ref("")
const chooseTimePlayArr = ref([])
const backVideo = ref("")

const defaultProps = ref({
  children: 'cameraList',
  label: 'poleGroupName'
})

function getTodayDate() {
  var today = new Date();
  var year = today.getFullYear();
  var month = (today.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
  var day = today.getDate().toString().padStart(2, '0'); // 获取日期并补零
  return `${year}-${month}-${day}`;
}

const disabledDate =  (time)=>{
    return new Date(time).getTime() > Date.now();
}
const cameranodeClick = (val)=>{
  if (!val.cameraList && val.cameraList !== null){
    backDate.value  = getTodayDate()
    streamId.value = val.streamId
    cameraName.value = val.deviceName + "("+val.deviceCode+")"
    lampPoleLocation.value = val.deviceAddress
    getAddress()
  }
}

onMounted(()=>{
  backDate.value = getTodayDate()
  getCameraLiveList()
})

const getCameraLiveList =async () => {
  const res = await GetDevicesCameras()
  if (res.code == 0){
    cameraList.value = res.data
    if (route.query.cameraName === "" || !route.query.cameraName){
      streamId.value = cameraList.value[0].cameraList[0].streamId
      cameraName.value = cameraList.value[0].cameraList[0].deviceName + "("+cameraList.value[0].cameraList[0].deviceCode+")"
      lampPoleLocation.value = cameraList.value[0].cameraList[0].deviceAddress
      getAddress()
    }else {
      cameraName.value =  route.query.cameraName
      streamId.value =  route.query.streamId
      lampPoleLocation.value =  route.query.deviceAddress
      getAddress()
    }
  }

}

const getAddress = async () => {
  // streamId.value = "34020000002000000001@34020000001320000015" backDate.value = "2024-08-01"
  const date = new Date(backDate.value);
  backDate.value = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
  // console.log(backDate.value)
  // console.log(streamId.value)
  const res = await rewindText(streamId.value,backDate.value);
  if (res.code == 0){
    var encrypturls = atob(res.data.substring(2));
    var urls = JSON.parse(encrypturls);

    let backVideoArr = []

    if (urls && urls.length>0){
      for (let i = 0; i < urls.length; i++) {
        backVideoArr.push(urls[i].slice(-9))
      }
    }else {
      backVideoArr = []
    }
    chooseTimePlayArr.value = backVideoArr

    reFresh.value = false
    nextTick(()=>{
      reFresh.value = true;
    })
    backVideo.value = chooseTimePlayArr.value[0]
    playPath.value = urls[0]
  }
}

const kuijin =()=>{
  let video = document.querySelector('#videoElementID');
  let time = video.currentTime;
  video.currentTime = time + 30;
}
const kuaitui =()=>{
  let video = document.querySelector('#videoElementID');
  let time = video.currentTime;
  video.currentTime = time - 30;
}

const beisuHand = (item)=>{
  let video = document.querySelector('#videoElementID');
  video.playbackRate = item;
}

const changeBackDate = (item)=>{
  backDate.value = item
  backVideo.value = ""
  playPath.value = ""
  getAddress()
}

const changemp4 = (item)=>{
  reFresh.value = false
  backVideo.value = item
  playPath.value = 'http://106.52.134.22:9099/live/'+streamId.value+"/"+backDate.value+"/"+item
  nextTick(()=>{
    reFresh.value = true
  })
}

const savePic = ()=>{
    let scale = 1;
    let video = document.querySelector('#videoElementID');
    let canvas = document.createElement('canvas');
    canvas.width = video.offsetWidth * scale;
    canvas.height = video.offsetHeight * scale;

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

    // 显示抓图
    let img = document.createElement('img');

    img.setAttribute("crossOrigin",'Anonymous');
    img.src = canvas.toDataURL('image/png');
    // 下载抓图
    let a = document.createElement('a');
    let event = new MouseEvent('click');
    a.download = 'vedio'
    a.href = canvas.toDataURL('image/png');
    a.dispatchEvent(event)

  console.log("截图")
}

</script>

<style scoped lang="scss">
.video-js .vjs-progress-control.vjs-control {
  display: none;
}
.wrap >>> .el-icon-circle-close{
  display: none;
}
.beisu-box >>> .el-input--suffix .el-input__inner{
  background: rgba(255,255,255,0.2);
  color:#fff;
}
.beisu-box >>> .el-input__inner{
  height:20px;
  line-height:20px;
  padding-right:0;
  width:72%;
}
.beisu-box >>> .el-input__suffix{
  display: none;
}
.control-box{
  position:absolute;
  width:120px;
  height:120px;
  border:1px solid #ccc;
  border-radius: 50%;
  bottom:10px;
  right:20px;
  z-index:99;
}
.control-box .shang{
  display: block;
  margin:0 auto;
  height:30px;
  cursor:pointer;
  animation: shake2 .2s infinite alternate ease-in-out;
}
.control-box .shang:hover{
  animation: shake2 0s infinite alternate ease-in-out;
}
.control-box .zuo{
  position:absolute;
  left:0;
  top:45px;
  width:30px;
  cursor:pointer;
  animation: shake .2s infinite alternate ease-in-out;
}
.control-box .zuo:hover{
  animation: shake 0s infinite alternate ease-in-out;
}
.control-box .xia{
  position:absolute;
  left:45px;
  bottom:0;
  cursor:pointer;
  width:30px;
  animation: shake2 .2s infinite alternate ease-in-out;
}
.control-box .xia:hover{
  animation: shake2 0s infinite alternate ease-in-out;
}
.control-box .you{
  position:absolute;
  right:0;
  top:45px;
  width:30px;
  cursor:pointer;
  animation: shake .2s infinite alternate ease-in-out;
}
.control-box .you:hover{
  animation: shake 0s infinite alternate ease-in-out;
}
.control-box-inner{
  width:60px;
  height:60px;
  position:absolute;
  top:30px;
  left:30px;
  border-radius:50%;

}
.control-box-inner .enlarge{
  width:48%;
  display: inline-block;
  border-right:1px solid #ccc;
  height:100%;
  background: rgba(255,255,255,0.5);
  opacity:0.5;
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
  font-size:12px;
  cursor:pointer;
}
.control-box-inner .enlarge:hover{
  background: #169fe6;
}
.control-box-inner .enlarge span{
  position:relative;
  display: block;
  width:13px;
  height:30px;
  top:14px;
  left:13px;
}
.control-box-inner .shrink{
  width:48%;
  display:inline-block;
  height:100%;
  font-size:12px;
  background: rgba(255,255,255,0.5);
  opacity:0.5;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  cursor:pointer;
}
.control-box-inner .shrink:hover{
  background: #169fe6;
}
.control-box-inner .shrink span{
  position:relative;
  display: block;
  width:13px;
  height:30px;
  top:14px;
  left:3px;

}
@keyframes shake{
  0% {
    transform:translateX(-2px)
  }
  100% {
    transfrom:translateX(2px)
  }
}
@keyframes shake2{
  0% {
    transform:translateY(-2px)
  }
  100% {
    transfrom:translateY(2px)
  }
}
.loading{
  width:50px;
  height:50px;
  display: block;
  margin:30px auto 0;
}
.change-time-box{
  width:263px;
  margin:20px auto;
  padding-bottom:20px;
}
.jietu{
  position:absolute;
  bottom:58px;
  right:140px;
  width:18px;
  height:18px;

}
#rate{
  width:75px;
}
.beisu-box{
  position:absolute;
  bottom:50px;
  right:170px;
  color:#fff;
}

</style>