<script setup lang="ts">
 import { computed,ref,onMounted,onBeforeUnmount } from "vue"
 import { ElMessage } from "element-plus";
import Giveanalarm from "@/views/monitorsystem/giveanalarm.vue";
import { useUserStore } from '@/store/modules/user';
import { getNotCheckAlarmCount } from '@/api/home';
const userStore = useUserStore();
const ws1 = new WebSocket( userStore.wsApiBaseUrl+ '/websocket/'+ userStore.stationId + "_" + userStore.userId);  
const ws2 = new WebSocket( userStore.wsApiBaseUrl+ "/websocket/check_" + userStore.stationId + "_" + userStore.userId);  
function setupWebSocket() {
 
  ws1.onopen = () => {  
  };  
  ws1.onerror = (error:any) => {  
  };  
  ws1.onmessage = (e:any) => {  
    if(e.data != 0) {
      console.log(JSON.parse(e.data))
      userStore.giveanalarmInfo = e.data
      userStore.alarmCount = JSON.parse(e.data).alarmCount
      giveanalarmInfo.value = JSON.parse(e.data)
      if(giveanalarmInfo.value.taskAlarmType =="3" ){
        isEquipmentGiveanalarm.value = true
      }else{
        let civeanalarmInfo: any = {}
        civeanalarmInfo = JSON.parse(e.data)
        giveanalarmInfo.value.defectFilePath = userStore.webApiBaseUrl +"/previewimage?type=alarm&filename=" + encodeURI(civeanalarmInfo.defectFilePath)
        giveanalarmInfo.value.checkResult = "1"
        examinationData.value.push(giveanalarmInfo.value)
        isGiveanalarm.value = true
      }
    }
  };  
  ws1.onclose = () => {  
  };  
}
function setCloseNavWebSocket() {
  
  ws2.onopen = () => {  
  };  
  ws2.onerror = (error:any) => {  
  };  
  ws2.onmessage = (e:any) => {  
    if(e.data != 0) {
      getNotCheckAlarmCount({stationId:userStore.stationId}).then((res: any) => {
        userStore.alarmCount =  res.data.count
      })
      userStore.trendsInfo = e.data
    }
  };  
  ws2.onclose = () => {  
  };  
}
const CloseNav:any = ref(0) 

const isGiveanalarm = ref(false)
function closeGiveanalarm(type:any){
  if(type == true){
    ElMessage({
      type: "success",
        message: "核查成功",
    });
  }
    
    examinationData.value  = []
    isGiveanalarm.value  = false
}
const examinationData:any = ref([])
const isEquipmentGiveanalarm = ref(false)
// var source:any = new EventSource(userStore.webApiBaseUrl+ `/sse/connect/` + userStore.stationId + "_" + userStore.userId );
// var source1:any = new EventSource(userStore.webApiBaseUrl+ `/sse/connect/check_` + userStore.stationId + "_" + userStore.userId );
const giveanalarmInfo:any =  ref({})
onMounted(() => {
  setupWebSocket()
  setCloseNavWebSocket()
  isGiveanalarm.value  = false
 
  // if ("EventSource" in window) {
  //   source.onmessage = (e:any)=> {
  //     if(e.data != 0) {
  //       userStore.giveanalarmInfo = e.data
  //       userStore.alarmCount = JSON.parse(e.data).alarmCount
  //       giveanalarmInfo.value = JSON.parse(e.data)
  //       if(giveanalarmInfo.value.taskAlarmType =="3" ){
  //         isEquipmentGiveanalarm.value = true
  //       }else{
  //         let civeanalarmInfo: any = {}
  //         civeanalarmInfo = JSON.parse(e.data)
  //         giveanalarmInfo.value.defectFilePath = userStore.webApiBaseUrl +"/previewimage?type=alarm&filename=" + encodeURI(civeanalarmInfo.defectFilePath)
  //         giveanalarmInfo.value.checkResult = "1"
  //         examinationData.value.push(giveanalarmInfo.value)
  //         isGiveanalarm.value = true
  //       }
  //     }
  //   };
  //   source.onopen = function(e:any) {
  //   };
  //   source.onerror = function(e:any) {
  //     if (e.readyState == EventSource.CLOSED) {
  //     } else {
  //     }
  //   };
  //   source1.onmessage = (e:any)=> {
  //     if(e.data != 0) {
  //       getNotCheckAlarmCount({stationId:userStore.stationId}).then((res: any) => {
  //         userStore.alarmCount =  res.data.count
  //       })
  //       userStore.trendsInfo = e.data

  //     }
  //   };
  //   source1.onopen = function(e:any) {
  //   };
  //   source1.onerror = function(e:any) {
  //     if (e.readyState == EventSource.CLOSED) {
  //     } else {
  //     }
  //   };
  // }
})
onBeforeUnmount(() => {
  if(ws1 != null){
    ws1.close()
  }
  if(ws2 != null){
    ws2.close()
  }
  // if(source != null){
  //   source.close()
  // }if(source != null){
  //   source.close()
  // }
  
  
  // source = null
  // source1 = null
});

</script>

<template>
  <section style="position: absolute;top: 0; z-index: 2005;">
    <Giveanalarm v-if="isGiveanalarm" style="position: absolute;top: 0;z-index: 2102;"
    :examinationData="examinationData"
     @closeGiveanalarm="closeGiveanalarm"/>
     <div class="giveanalarm-box" v-if="isEquipmentGiveanalarm == true">
        <div class="giveanalarm-bg">
          <img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/giveanalarm/x.png" alt=""
            @click="isEquipmentGiveanalarm = false ">
          <div style="display:flex;align-items:center;justify-content:center;padding-top:20px;">
            <img src="@/assets/giveanalarm/jg_tb1.png">
            <img src="@/assets/giveanalarm/gjtext.png">
          </div>
          <div class="giveanalarm-content">
            <div>设备编号: {{giveanalarmInfo.patroldeviceCode}}</div>
            <div>设备名称: {{giveanalarmInfo.patroldeviceName}}</div>
            <div>告警描述: {{giveanalarmInfo.content}}</div>
            <div>告警时间: {{giveanalarmInfo.alarmDate}}</div>
          </div>
          
        </div>
     </div>
    <!-- <div class="sectionimgbg" @click="closeClick">
    </div> -->
  </section>
</template>
<style lang="scss" scoped>
.sectionimgbg{
  width: 100vw;
  height: 100vh;
  background: url(@/assets/monitorsystem/u4.png);
  background-size: 100% 100%;
}
.giveanalarm-box{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2003;
  height: 100%;
  background: url(@/assets/giveanalarm/jg_bj.png);
  background-size: 100% 100%;
  overflow: auto;
  .giveanalarm-bg{
    width: 550px;
    height: 350px;
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background: url(@/assets/giveanalarm/gjbg.png);
    .giveanalarm-content{
      font-size:16px;
      color:#ffffff;
      padding-left:60px;
      padding-top:30px;
      div{
        padding:6px 0;
      }
    }
  }
}
</style>
