<script lang="ts">
export default {
  name: "silentmonitor", // 静默监视
};
</script>
<script setup lang="ts">
import Page from '@/components/Pagination/page.vue'
import { ref, onMounted, nextTick } from "vue";
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
import { ElMessage } from "element-plus";
import { getAlarmListByType,getAlarmListPage,getSubstationAreaByCode } from "@/api/silentmonitor";

import { getDeviceByType } from "@/api/device";
import moment  from 'moment'
import axios from 'axios';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const treeloading = ref(false)
const tableData:any = ref([])
// 查询参数
const queryInfo:any = ref({
  current: 1, // 当前页
  size:10, // 页大小
  stationId:userStore.stationId,
  areaId:'', // 区域ID
  patrolDeviceName:'', // 摄像机名称
  monitorType:'', // 告警类型
  startDate: '', // 开始时间
  endDate: '',// 结束时间
  desc:'',
})
const dateArr: any = ref([])
tableData.value = []
const alarmInfo:any = ref({})
const total = ref(0)
function getData() { // 获取列表信息
  queryInfo.value.startDate = ""
  queryInfo.value.endDate = ""
  if (dateArr.value != null  && dateArr.value.length != 0) {
    queryInfo.value.startDate = dateArr.value[0]
    queryInfo.value.endDate = dateArr.value[1]
  }
  treeloading.value = true
  getAlarmListByType(queryInfo.value).then((res: any) => {
    treeloading.value = false
    tableData.value = res.data.records
    total.value = res.data.total
  }).catch(()=>{
    treeloading.value = false
  })
}
//重置
function resetting() {
  queryInfo.value = {
    current: 1, // 当前页
    size:10, // 页大小
    stationId:userStore.stationId,
    areaId:'', // 区域ID
    patrolDeviceName:'', // 摄像机名称
    monitorType:'', // 告警类型
    startDate: '', // 开始时间
    endDate: '',// 结束时间
  }
  dateArr.value = []
  getData()
}
const playDeviceId = ref("")
const playChannelId = ref("")
function queryRecordDetails(row:any){
  playDeviceId.value = ""
  playChannelId.value = ""
  let startTimeStr = moment(new Date(row).getTime() - 15*1000).format("YYYY-MM-DD HH:mm:ss");
  let endTimeStr = moment(new Date(row).getTime() + 15*1000).format("YYYY-MM-DD HH:mm:ss");
  axios.get(userStore.webApiMonitorUrl + '/api/gb_record/queryNvrRecord/' + alarmInfo.value.patroldeviceCode + '/' +alarmInfo.value.patroldeviceCode + '?startTime=' + startTimeStr + '&endTime=' + endTimeStr, {}).then((res: any) => {
    if(res.data.code === 0) {
      // 处理时间信息
      clickNum.value = clickNum.value +1
      playDeviceId.value = res.data.data.deviceId
      playChannelId.value = res.data.data.channelId
      setTime(startTimeStr, endTimeStr);
      playRecord()
    }

  }).catch(function (error: any) {
  })
}
function rowClick(row:any){
 if(row.areaId == alarmInfo.value.areaId && row.monitorType == alarmInfo.value.monitorType ){
   return
 }
 alarmInfo.value = row
 queryRecordDetails(row.alarmDate)
 getGiveanalarm()
}
function rowGiveanalarmClick(row:any){
 queryRecordDetails(row.alarmDate)
}

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;
  tmpTime.value = new Date(endTimes).getTime() - new Date(startTimes).getTime()
  tmpStartTime.value = new Date(startTimes).getTime() 
}
const streamId = ref("")
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) {
    })
}
const videoUrl = ref('ws://192.168.1.119:81/rtp/47868E3C.live.flv')
const isCheckAll = ref(false)

const AreaList:any = ref([]) // 告警等级
const SilentMonitoringTypeList:any = ref([])
const checkFlagList:any = ref([{
    id:"0",
    itemcode:"0",
    dictname:"未核查"
  },{
    id:"1",
    itemcode:"1",
    dictname:"已审核"
  },{
    id:"2",
    itemcode:"2",
    dictname:"已修正"
  }
])
function getArrType() { // 查询字典方法
  const params = {
    stationCode: userStore.stationCode
  }
  getSubstationAreaByCode(params).then((res: any) => {
    AreaList.value = res.data
  })

  const paramstypes = {
    dictcode: 'SilentMonitoringType'
  }
  getDeviceByType(paramstypes).then((res: any) => {
    SilentMonitoringTypeList.value = res.data
  })


}
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}


const streamInfo:any = ref({})
 const app = ref("")
 const mediaServerId = ref("")
 const ssrc = ref("")
 const clickNum = ref(0)
 const recordVideoPlayer:any = ref(null)
 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 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 playRecord (){
  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 giveanalarmData:any = ref([])

const giveanalarmArr:any = ref([])
const searchInfo:any =ref({
  current: 1, // 当前页
  size:10, // 页大小
})
const giveanalarmloading:any =ref(false)
const giveanalarmtotal:any =ref(0)
function resetgiveanalarm() {// 重置告警信息
  giveanalarmArr.value = []
  getGiveanalarm()
}
function getGiveanalarm() { // 获取列表信息
  
  searchInfo.value.startDate = ""
  searchInfo.value.endDate = ""
  if (giveanalarmArr.value != null  && giveanalarmArr.value.length != 0) {
    searchInfo.value.startDate = giveanalarmArr.value[0]
    searchInfo.value.endDate = giveanalarmArr.value[1]
  }
  searchInfo.value.patrolDeviceCode = alarmInfo.value.patroldeviceCode
  searchInfo.value.monitorType = alarmInfo.value.monitorType
  
  giveanalarmloading.value = true
  getAlarmListPage(searchInfo.value).then((res: any) => {
    giveanalarmloading.value = false
    for(let i = 0 ;i<res.data.records.length;i++){
      res.data.records[i].smallFilePath = userStore.webApiBaseUrl +"/previewimage?size=small&filename=" + encodeURI(res.data.records[i].defectFilePath)
      res.data.records[i].srcList = [userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)]
      res.data.records[i].defectFilePath = userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)
    }
    giveanalarmData.value = res.data.records
    giveanalarmtotal.value = res.data.total
  }).catch(()=>{
    giveanalarmloading.value = false
  })
}

function sortChange(column:any){
  if(column.order == "descending"){
      if(column.prop == "count"){
        queryInfo.value.asc = "count"
        queryInfo.value.desc = null
      }else{
        queryInfo.value.asc = "alarmDate"
        queryInfo.value.desc = null
      }
   // 正序
  } else if(column.order == "ascending") {
    if(column.prop == "count"){
        queryInfo.value.asc = null
        queryInfo.value.desc = "count"
      }else{
        queryInfo.value.asc = null
        queryInfo.value.desc = "alarmDate"
      }
    // column.order == "ascending" 上升
  } else  {
    queryInfo.value.asc = null
    queryInfo.value.desc = null
  }
  getData()
}
const ImgPath = ref("")
onMounted(() => {
  let endDate = moment(new Date()).format('YYYY-MM-DD')
  const now = new Date(endDate)
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();
  let startDate =  moment(  new Date(year,month-1,day)).format('YYYY-MM-DD')
  giveanalarmArr.value=[startDate,endDate]
  getArrType()
  getData()
})
</script>
<template>
  <div class="alarmInfo-box">
    <div class="alarmInfo-left">
      <div style="position: relative;display: flex;align-items: center; justify-content: space-between;">
        <div style="display: flex;align-items: center;padding:5px 0;" >
          <el-input v-model="queryInfo.patrolDeviceName" style="width:200px" placeholder="摄像机名称"  clearable class="marginright" 
            @clear="getData()" @keyup.enter="getData()" />
          <el-select v-model="queryInfo.areaId" class="marginright"  placeholder="区域" @change="getData" :teleported="false" :popper-append-to-body="false" clearable>
            <el-option v-for="item in AreaList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
          </el-select>
          <el-select v-model="queryInfo.monitorType" placeholder="告警类型" @change="getData" :teleported="false" :popper-append-to-body="false" clearable>
            <el-option v-for="item in SilentMonitoringTypeList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
          </el-select>
          <el-button class="searchButton" type="primary" @click="getData">搜索</el-button>
          <el-button class="searchButton" type="primary" @click="resetting">重置</el-button>
        </div>
      </div>
      <el-table :data="tableData"
        v-loading="treeloading" highlight-current-row element-loading-background="rgb(11, 40, 34)"
        style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100vh - 270px); overflow: auto "
        stripe :header-cell-style="tableBg"
        @row-click="rowClick" @sort-change="sortChange"
        >
        <el-table-column type="index" align="center" label="序号" width="50px" />
        <el-table-column prop="patroldeviceName" label="摄像机名称" />
        <el-table-column prop="areaName" label="区域名称" />
        <el-table-column prop="place" label="安装位置" />
        <el-table-column prop="monitorType" label="告警类型" width="160px" align="center">
          <template #default="scope">
            <span>{{currency(SilentMonitoringTypeList,scope.row.monitorType)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="alarmDate" label="最近告警时间" width="170px" align="center" sortable="alarmDate"/>
        <el-table-column prop="count" label="告警次数" width="120px" align="center" sortable="custom">
          <template #default="scope">
            <span style="color: #FFBD00;">{{scope.row.count}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: center;margin-top: 5px;">
        <Page style="position: relative;z-index: 100;" :total="total" v-model:size="queryInfo.size"
        v-model:current="queryInfo.current" @pagination="getData()"></Page>
      </div>
    </div>
    <div class="alarmInfo-right">
      <div style="width: 100%;height: 50%;">
        <div style="display:flex;align-items: center;">
          <div class="alarmInfo-line"></div>
          <div class="alarmInfo-title">历史录像 <span style="font-weight: 100;color: #fff;font-size: 16px;"> (视频采集前后15秒)</span></div>
        </div>
        <div class="video-box">
          <div v-if="alarmInfo.patroldeviceCode == undefined">
            <img src="@/assets/monitorsystem/gjqr_wsp.png">   
            <div style="    font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding-top: 10px;">暂无视频</div>
          </div>
          <JessibucaPlayer v-if="alarmInfo.patroldeviceCode != undefined" ref="recordVideoPlayer" :isrecord="'alarmInfo'" :_uid="99" :visible.sync="true" :videoUrl="videoUrl" height="100px" 
            :tmpTime="tmpTime" 
            :endTime="endTime" :tmpStartTime="tmpStartTime"
           :hasAudio="false" fluent autoplay live 
           :clickNum="clickNum" @sliderChange="sliderChange" @gbPlay="gbPlay" @gbPause="gbPause"></JessibucaPlayer>
        </div>
      </div>
      <div class="alarmInfo-visitation">
        <div style="display:flex;align-items: center;height: 40px;padding-left: 15px;padding-top:10px">
          <div class="alarmInfo-line"></div>
          <div class="alarmInfo-title">告警列表</div>
        </div>
        <div class="alarmimg">
          <div v-if="alarmInfo.patroldeviceCode == undefined">
            <img src="@/assets/monitorsystem/jmjs_wnr.png">   
            <div  style="font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            padding-top: 10px;">暂无内容</div>
          </div>
          <div  style="width:100%;height:100%;padding:0 20px" v-if="alarmInfo.patroldeviceCode != undefined">
            <div style="display: flex;align-items: center;padding-top:20px">
              <span>告警时间：</span>
              <el-date-picker v-model="giveanalarmArr" type="daterange" range-separator="至" start-placeholder="开始时间"
              popper-class="elDatePicker"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间" :clearable="false" style="max-width: 370px;"
               @change="getGiveanalarm"/>
            </div>
            <el-table :data="giveanalarmData" stripe :header-cell-style="tableBg"
              v-loading="giveanalarmloading" highlight-current-row element-loading-background="rgb(11, 40, 34)"
              style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 85px); overflow: auto "
              @row-click="rowGiveanalarmClick">
              <el-table-column type="index" align="center" label="序号" width="50px" />
              <el-table-column prop="alarmDate" label="告警时间" width="170px" align="center"/>
              <el-table-column prop="content" label="告警信息" />
              <el-table-column prop="defectFilePath" label="告警图片" width="90px" show>
              <template #default="scope">
                <el-image
                    style="width: 40px; height: 40px"
                    :src="scope.row.smallFilePath"
                    :zoom-rate="1.2"
                    :preview-src-list="scope.row.srcList"
                    :preview-teleported="true" 
                    fit="cover"
                  />
              </template>
            </el-table-column>
            </el-table>
            <Page style="position: relative;z-index: 100;margin-top: 5px;" :total="giveanalarmtotal" v-model:size="searchInfo.size"
            v-model:current="searchInfo.current" @pagination="getGiveanalarm()"
            :jumper="'hide'"
            ></Page>

          </div>
          

        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.alarmInfo-box {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  padding-top: 60px;
  padding-bottom: 0;

  .alarmInfo-left{
    padding: 8px 15px;
    margin-right: 15px;
    width: calc(65vw);
    height: calc(100vh - 160px);
    background: url(@/assets/newimg/xsjk_1235_700.png);
    background-size: 100% 100%;
  }
  .alarmInfo-right{
    width: calc(33.5vw);
    height: calc(100vh - 160px);
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    overflow:auto;
    .alarmInfo-line{
      width: 4px;
      height: 15px;
      background: inherit;
      background-color: #009BFF;
      margin-right: 8px;
    }
    .alarmInfo-title{
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #ffffff;
    }
    .video-box{
      width: 100%;
      height: calc(100% - 45px);
      background-color: rgba(40, 40, 40, 1);
      margin-top: 10px;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .alarmInfo-visitation{
      width: 100%;
      height: 50%;
      background: url(@/assets/patrolmonitor/xsjk_640.png);
      background-size: 100% 100%;
    }
    .alarmimg{
      width: 100%;
      height: calc(100% - 65px);
      display:flex;
      align-items:center;
      justify-content:center;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #FFFFFF;
    }
  }
}



.searchButton {
  // border: #059a67 solid 1px;
  // background-color: #08503a;
  // color: #00F9A2;
  margin-left: 10px;
}
.marginright{
  margin-right: 10px;
}
</style>
