<script lang="ts">
export default {
    name: "videorecord", // 视频回放
};
</script>

<script setup lang="ts">
  // import recordDownload from './recordDownload.vue'
import { ref, onMounted, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { getCameraByArea, getSubstationDeviceById } from "@/api/videomonitor/index";
import moment  from 'moment'
import { Search } from '@element-plus/icons-vue'
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import axios from 'axios';
import { useUserStore } from '@/store/modules/user';
const props = defineProps({
  playbackInfo: {
    type: Object,
    default: false
  }
});

const userStore = useUserStore();

const clickNum = ref(0)
const recordVideoPlayer:any = ref(null)

const deviceId = ref("")  // 摄像头国标编号
const channelId = ref("") // 通道国标编号

function videoInit(row: any) {
    deviceId.value = row.deviceId
    channelId.value = row.channelId
    queryRecordDetails()
}



const pictureList:any = ref([]) // 录像信息列表
const pictureactive = ref(-1)

const chooseFile = ref({})
        
function checkedFile(file:any,index:any){ // 点击播放录像
  pictureactive.value = index
  chooseFile.value = file;
  setTime(file.startTime, file.endTime);
  playRecord()
}
 const streamId = ref("")
 const streamInfo:any = ref({})
 const app = ref("")
 const mediaServerId = ref("")
 const ssrc = ref("")
 const videoUrl = ref("")
 function stopPlayRecord (callback:any) {
  recordVideoPlayer.value.pause()
        videoUrl.value = '';
          axios.get(userStore.webApiMonitorUrl + '/api/playback/stop/' + playDeviceId.value + "/" + playChannelId.value + "/" + streamId.value, {}).then((res: any) => {
          if (callback) callback()
        })
      }
 function playRecord (){
  clickNum.value = clickNum.value +1
  if (streamId.value !== "") {
          stopPlayRecord(()=> {
            streamId.value = "";
            playRecord();
          })
        } else {
         axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' +  playDeviceId.value + "/" + playChannelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
         
            if(res.data.code === 0) {
              // 处理时间信息
                streamInfo.value = res.data.data;
                app.value = res.data.data.app;
                streamId.value = res.data.data.stream;
                mediaServerId.value = res.data.data.mediaServerId;
                ssrc.value = res.data.data.ssrc;
                videoUrl.value = getUrlByStreamInfo()

            }
          }).catch(function (error: any) {
          });
        }
}
function getUrlByStreamInfo(){
  
  if (location.protocol === "https:") {
    videoUrl.value = streamInfo.value["wss_flv"]
  }else {
    videoUrl.value = streamInfo.value["ws_flv"]
  }
  return videoUrl.value;

}
const chooseDate = ref("")
const playTime:any = ref([])
const timeRange:any = ref([])

const startTime = ref('')
const endTime = ref('')
const tmpTime = ref(0)
const tmpStartTime = ref(0)
function setTime(startTimes:any, endTimes:any){
  startTime.value = startTimes;
  endTime.value = endTimes;
  let start:any = (new Date(startTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime())/1000;
  let end:any = (new Date(endTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime())/1000;

  playTime.value = [start, end];
  timeRange.value = [startTime, endTime]
  tmpTime.value = new Date(endTimes).getTime() - new Date(startTimes).getTime()
  tmpStartTime.value = new Date(startTimes).getTime() 
  Model_data_click(tmpTime.value)
}
const playEndTime = ref("00:00:00")
function Model_data_click(tmp:any){
    let xiaoshi = 0
    let fen = 0
    let miao = 0
    let time =  parseInt((tmp/1000).toString())
    if(time<=59){
      miao = time
    }else if(time>59&&time<=3599){
      fen = parseInt((time/60).toString())
      miao =parseInt((time-(fen*60)).toString())
    }else if(time>3599){
      xiaoshi =  parseInt((time/3600).toString())
      fen  =parseInt(((time-(xiaoshi*60*60))/60).toString())
      miao = parseInt(((time-(xiaoshi*60*60))-(fen*60)).toString())

    }
    if(xiaoshi<10){
      xiaoshi = parseInt("0" + xiaoshi)
    }
    if(fen<10){
      fen =parseInt("0" + fen)
    }
    if(miao<10){
      miao =parseInt("0" + miao)
    }
    playEndTime.value = xiaoshi +":"+fen +":"+miao
}
const playDeviceId = ref("")
const playChannelId = ref("")

function queryRecordDetails(){
  setTime(chooseDate.value + " 00:00:00", chooseDate.value  + " 23:59:59");
  pictureList.value = [];
  playDeviceId.value = ""
  playChannelId.value = ""
  axios.get(userStore.webApiMonitorUrl + '/api/gb_record/queryNvrRecord/' + deviceId.value + '/' +channelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
    if(res.data.code === 0) {
      // 处理时间信息
      pictureList.value = res.data.data.recordList;
      playDeviceId.value = res.data.data.deviceId
      playChannelId.value = res.data.data.channelId
    }
  }).catch(function (error: any) {
  })
}
const sliderMIn = ref(0)
const sliderMax = ref(86400)
const playTimeSliderMarks = ref({
  0: "00:00",
  3600: "01:00",
  7200: "02:00",
  10800: "03:00",
  14400: "04:00",
  18000: "05:00",
  21600: "06:00",
  25200: "07:00",
  28800: "08:00",
  32400: "09:00",
  36000: "10:00",
  39600: "11:00",
  43200: "12:00",
  46800: "13:00",
  50400: "14:00",
  54000: "15:00",
  57600: "16:00",
  61200: "17:00",
  64800: "18:00",
  68400: "19:00",
  72000: "20:00",
  75600: "21:00",
  79200: "22:00",
  82800: "23:00",
  86400: "24:00",
}) 
function  playTimeFormat(val:any){
        let h = parseInt((val/3600).toString());
        let m = parseInt(((val - h*3600)/60).toString());
        let s = parseInt((val - h*3600 - m*60).toString());
        let hStr:any = h;
        let mStr:any = m;
        let sStr:any = s;
        if (h < 10) {
          hStr = "0" + hStr;
        }
        if (m < 10) {
          mStr = "0" + mStr;s
        }
        if (s < 10) {
          sStr = "0" + sStr;
        }
        return hStr + ":" + mStr + ":" + sStr
      }


function playTimeChange(val:any){
  let startTimeStr = moment(new Date(chooseDate.value + " 00:00:00").getTime() + val[0]*1000).format("YYYY-MM-DD HH:mm:ss");
  let endTimeStr = moment(new Date(chooseDate.value + " 00:00:00").getTime() + val[1]*1000).format("YYYY-MM-DD HH:mm:ss");
  setTime(startTimeStr, endTimeStr)
  playRecord();
}
function sliderChange(e:any){
  if (streamId.value !== "") {
    stopPlayRecord(()=> {
      streamId.value = "";
      sliderChange(e);
    })
  } else {
  axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' +  playDeviceId.value + "/" + playChannelId.value + '?startTime=' + e + '&endTime=' + endTime.value, {}).then((res: any) => {
         
    if(res.data.code === 0) {
      // 处理时间信息
        streamInfo.value = res.data.data;
        app.value = res.data.data.app;
        streamId.value = res.data.data.stream;
        mediaServerId.value = res.data.data.mediaServerId;
        ssrc.value = res.data.data.ssrc;
        videoUrl.value = getUrlByStreamInfo()
    }
  }).catch(function (error: any) {
  });
}
}
function getTimeForFile(file:any){
        let startTime = new Date(file.startTime);
        let endTime = new Date(file.endTime);
        return [startTime, endTime, endTime.getTime() - startTime.getTime()];
      }
function  getDataWidth(item:any){
        let timeForFile:any = getTimeForFile(item);
        let result = (timeForFile[2])/((86400 - 0)*1000)
        return result*100
      }
function  getDataLeft(item:any){
  let timeForFile:any = getTimeForFile(item);
  let differenceTime:any = timeForFile[0].getTime() - new Date(chooseDate.value + " 00:00:00").getTime()
  return parseFloat(((differenceTime - 0 * 1000)/((86400 - 0)*1000)).toString())*100  
}
const calenda:any = ref("")
const calendar:any = ref("")
const selectDate = (val: string) => {
  calendar.value.selectDate(val)

}
function clickDay(row: any) {
  chooseDate.value = row.day
  if(channelId.value == "" || channelId.value == null){
     return
  }
  queryRecordDetails()
}

function gbPlay(){// 视频回放播放功能
  axios.get(userStore.webApiMonitorUrl + '/api/playback/resume/' + streamId.value, {}).then((res: any) => {
    }).catch(function (error: any) {
    });
}
function gbPause(){ // 视频回放暂停功能
  axios.get(userStore.webApiMonitorUrl + '/api/playback/pause/' + streamId.value, {}).then((res: any) => {
    }).catch(function (error: any) {
    })
}
function downloadRecord(row:any){
  axios.get(userStore.webApiMonitorUrl + 
  
  '/api/gb_record/downloadRecord/start/' + deviceId.value + '/' + channelId.value + '?startTime=' + row.startTime + '&endTime=' +
  row.endTime + '&downloadSpeed=4', {}).then((res: any) => {
    if (res.data.code === 0) {
      let streamInfo = res.data.data;
      // this.$refs.recordDownload.openDialog(this.deviceId, this.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
    }else{
      ElMessage({
             type: 'error',
             message: res.data.msg,
         })
    }
     
    }).catch(function (error: any) {
    })
}

function gbScale(row:any){
  axios.get(userStore.webApiMonitorUrl + 
  
  `/api/playback/speed/${streamId.value }/${row}`, {}).then((res: any) => {
   
    }).catch(function (error: any) {
    })
}
const ishide = ref(true)
onMounted(() => {
  chooseDate.value = moment().format('YYYY-MM-DD')
  videoInit(props.playbackInfo)
})
</script>

<template>
  <div>
    <div class="videomonitor-box">
      <div class="videomonitor-right" id="richright">
        <div class="stationboard-box-title">
          <div class="imgname">回放时间</div>
        </div>
        <el-calendar ref="calendar" style="height:310px ;">
            <template #header="{ date }">
              <div style="z-index:100;cursor:pointer; " @click="selectDate('prev-month')"><img
                 src="@/assets/videoimg/smallleft.png" style="z-index:100" alt=""></div>
              <div style="z-index:100;cursor:pointer; color: #fff;" @click="selectDate('today')">{{ date }}
              </div>
              <div style="z-index:100;cursor:pointer;" @click="selectDate('next-month')"><img
                 src="@/assets/videoimg/smallright.png" alt="" style="z-index:100"></div>
            </template>
            <template #dateCell="{ data }">
              <div @click="clickDay(data)">
                {{ data.day.split("-").slice(2).join("-") }}
              </div>
            </template>
          </el-calendar>
        <img src="@/assets/videoimg/u1227.png" style="height: 2px;margin: 25px 20px;" alt="" />
        <div style="padding-left:20px;padding-bottom:10px;font-family: 'Arial Normal', 'Arial'; 
          font-weight: 400; font-style: normal; font-size: 14px;color: rgb(0, 155, 255);display: flex;
          align-items: center;">
          <div style="width: 4px;
            height: 10px;
            background: inherit;
            background-color:rgb(0, 155, 255);margin-right: 5px;"></div>
          <div>录像信息</div>
        </div>
          <el-scrollbar height="calc(100vh - 580px )">
            <div v-for="(item,index) in pictureList" :key="item.name" @click="checkedFile(item,index)" class="pictureli" 
              :class="{'pictureactive':index == pictureactive}">
                <div><span style="padding-right: 10px;">{{ item.startTime.split(' ')[0] }} </span> {{ item.startTime.split(' ')[1] }} - {{ item.endTime.split(' ')[1] }}</div>
                <!-- <img src="@/assets/monitorsystem/lxhf_xz.png" alt="" @click.stop="downloadRecord(item)"> -->
              </div>
        </el-scrollbar>
      </div>
      <div class="videomonitor-content" id="contentid">
        <div class="Jessibuca-box">
          <div class="Camera-img">
            <JessibucaPlayer ref="recordVideoPlayer" :isrecord="'playback'" :_uid="9999" :visible.sync="true" :videoUrl="videoUrl" height="100px" 
            :playEndTime="playEndTime" :tmpTime="tmpTime" 
            :endTime="endTime" :tmpStartTime="tmpStartTime"  :pictureList="pictureList" :chooseDate="chooseDate"
            :hasAudio="false" fluent autoplay live @sliderChange="sliderChange"
            :clickNum="clickNum"
            @gbScale="gbScale"
            @gbPlay="gbPlay" @gbPause="gbPause"></JessibucaPlayer>
          </div>
        </div>
        <div class="videorecord-content-nav">
          
          <el-slider
            :disabled="videoUrl ==''"
            class="playtime-slider"
            v-model="playTime"
            id="playtimeSlider"
    
            :min="sliderMIn"
            :max="sliderMax"
            :range="true"
            :format-tooltip="playTimeFormat"
            @change="playTimeChange"
            :marks="playTimeSliderMarks">
          </el-slider>
          <div class="slider-val-box">
            <div class="slider-val" v-for="item of pictureList" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.videomonitor-box {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding:8px;
  padding-bottom:0;
  height: calc(100vh - 120px);
  .stationboard-box-title {
    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .imgname {
    padding-left: 10px;
  }

  .titleline {
    width: 100%;
    height: 1px;
    // background-image: linear-gradient(to right, rgb(0, 249, 162, 0.5), transparent);
  }
}

.videomonitor-content {
  margin: 0 8px;

  width: calc(100vw - 300px);
  // background: #000000;

  .videorecord-content-nav {
    height: 40px;
    width: calc(100% - 40px);
    margin: auto;

    img {
      margin: 0 10px;
      cursor: pointer;
    }

    :deep(.el-slider__bar) {
      background-color: transparent;
    }

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

    :deep(.el-slider__runway.is-disabled .el-slider__bar) {
      background-color: var(--el-slider-disabled-color);
    }


  }
}

.Camera-img {
  width: 100%;
  height: calc(100vh - 180px);
}

.Jessibuca-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.videomonitor-right {
  position: relative;
  width: 281px;
  min-width: 281px;
  height: calc(100vh - 140px);
  background: url(@/assets/videoimg/xsjk_280.png) no-repeat center center;
  background-size: 100% 100%;
  :deep(.el-scrollbar) {
    height: calc(100vh - 560px);
    min-height: 100px;
  }

:deep(.el-input__icon) {
  display: none;
}
  // 日历
  :deep(.el-calendar) {
    --el-calendar-cell-width: 30px;
    background-color: #ffffff00;
  }

  :deep(.el-calendar-table .el-calendar-day) {
    background: rgb(31, 41, 56) ;
    border: 1px solid rgb(34, 55, 71) ;
    padding: 0px !important;
    line-height: 28px;
    width: 32px;
  }

  :deep(.el-calendar-table__row) {
    display: flex;
  }

  :deep(.el-calendar-table__row td) {
    display: block;
    border: none !important;
    margin: 2px 2px;
    z-index: 100;
    color: #B5D7FF;
    box-sizing: border-box;
  }

  :deep(.el-calendar-table__row td div div) {
    border: 1px solid rgb(27,40, 56, 0) !important;
    font-size: 14px;
    text-align: center;
  }

  :deep(.el-calendar-table__row .is-today div div) {
    color: #fff;
    z-index: 100;

  }

  :deep(.el-calendar-table__row .is-selected) {
    border-radius: 4px;
  }

  :deep(.el-calendar-table__row .is-selected div div) {
    background-color: rgb(0,153,255);
    border: 1px solid rgb(0,153,255) !important;
    border-radius: 4px;
  }
  :deep(.el-calendar-table__row .is-selected div div:hover) {
    color: #ffffff;
  }
  :deep(.el-calendar-table__row td :hover) {
    box-sizing: border-box;
    border-radius: 4px;
  }

  :deep(.el-calendar-table__row td div div:hover) {
    color: rgba(0, 118, 253, 1);
    box-sizing: border-box;
    border-radius: 4px;
  }
  :deep(.el-calendar__body) {
    padding: 12px 10px 35px;
    padding-left: 14px;
  }

  :deep(.el-calendar-table thead th) {
    display: block;
    padding: 5px 0px;
    margin: 0px 11px;
    z-index: 100;
    color: #fff;
  }

  :deep(.el-calendar-table thead) {
    display: flex;
  }

  //日历

    :deep(.el-calendar__header) {
      justify-content: space-around !important;
      align-items: center !important;
      border: none;
    }
//日历
  .pictureli {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 36px;
    font-family: "Arial Normal", Arial;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
  }

  .pictureli:hover {
    color: #009BFF;
  }

  .pictureactive {
    color: rgb(0, 155, 255);
    background: -webkit-linear-gradient(left, rgba(0, 155, 255, 0.2), rgba(0, 249, 162, 0));
  }
}
.slider-val-box{
    height: 6px;
    position: relative;
    top: -19px;
  }
  .slider-val{
    height: 6px;
    background-color: rgb(0, 155, 255);
    position: absolute;
  }
</style>
 
