<template>
    <div :class="$style['container']">
      <div class="header">
        <div class="title">
          <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.Offsite')" :titleTip="[]" :typeFun="['AbnormalData','time']" :alarmType="['outplant']"></header2>
        </div>
      </div>
  
      <div class="content" ref="Acontent">
          <el-row>
            <el-col :span="10">
                <left :width="size.oWidth*10" :height="size.oHeight"></left>
            </el-col>
            <el-col :span="9">
                <center :width="size.oWidth*9" :height="size.oHeight"></center>
            </el-col>
            <el-col :span="5">
                <right :width="size.oWidth*5" :height="size.oHeight"></right>
            </el-col>
          </el-row>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, onUnmounted, reactive, ref } from "vue";
  import left from './content/left.vue'
  import center from './content/center.vue'
  import right from './content/right.vue'
  import header2 from '@/components/headerBox/header2.vue'
  import {calcWH} from '@/components/ts/selfAdaption'
  import { ElRow, ElCol } from "element-plus";
  import { deviceCountsOfOutPlantData,deviceTypeCountsOfOutPlantData,deviceStatusCountsOfOutPlantData,getDeviceOutPlantData } from "@/http/offsite";
  import {connectWebsocket,closeWebsocket} from "@/utils/websocket"
  import { Offsite } from "@/store/module/offsite"
  import { useI18n } from 'vue-i18n'
let {t} = useI18n();
  const store = Offsite()
  
  let Acontent=ref()
  let headerref=ref()
  let time=ref(null)
//   let Timedom=ref()
//   let {timeHtml}=useNowTime()
  
  let size=reactive({
    oWidth:0,
    oHeight:0
  });
  function WH(div:HTMLElement){
    let a=calcWH(div.offsetHeight,div.offsetWidth,1,24,0)
  size.oWidth=a.oWidth
  size.oHeight=a.oHeight
    
  }
  async function deviceCountsOfOutPlantDatafun(){
    let result:any = await deviceCountsOfOutPlantData()
   
    if(result.code==200){
      store.setoffsitegatewayStatus(result.data)
    }
  }
  async function deviceTypeCountsOfOutPlantDatafun(){
    let result:any = await deviceTypeCountsOfOutPlantData()
   
    if(result.code==200){
      result.data.forEach(res=>{
        if(res.name){
          store.setdevtype(res)
        }
        
      })
    }
  }
  async function deviceStatusCountsOfOutPlantDatafun(){
    let result:any = await deviceStatusCountsOfOutPlantData()
   
    if(result.code==200){
      result.data.forEach(res=>{
        if(res.deptId=='true'){
          res.name=t('messages.OnProduct')
        }else{
          res.name=t('messages.OffProduct')
        }
        
      })
      store.setdevitem(result.data)
    }
  }
  async function getDeviceOutPlantDatafun(){
    let result:any = await getDeviceOutPlantData()
   
    if(result.code==200){
      store.setdevlist(result.data)
      // result.data.forEach(res=>{
      //   store.setdevitem(res)
      // })
    }
  }
  function getWebsocket(val){
    headerref.value.HeadergetWebsocket(val)
    try{
      let data=JSON.parse(val)
      if(data.type=='deviceStatusCountsOfOutPlant'){     
        console.log(data.msg);
        data.msg.forEach(res=>{
        if(res.deptId=='true'){
          res.name=t('messages.OnProduct')
        }else{
          res.name=t('messages.OffProduct')
        }
        store.setdevitem(res)
      })
        // store.socketMechanicsDatadata(data.msg)
      }
      if(data.type=='DeviceOutPlant'){
        store.changeDevList(data.msg)
      }

    }catch(err){

    }

  }
  function errWebsocket(val){
    headerref.value?headerref.value.HeadererrWebsocket(val):''
    // headerref.value.HeadererrWebsocket(val)
    // console.log(val);
}
  onMounted(() => {
    let contentBox=Acontent.value
    // let Timedombox=Timedom.value
    window.document.title=t('messages.Offsite')
    WH(contentBox)
    window.addEventListener('resize',()=>{
      if(time.value){
        clearTimeout(time.value)
        time.value=null
      }
      time.value = setTimeout(() => {WH(contentBox)
      }, 1000);
    })
    deviceCountsOfOutPlantDatafun() 
    deviceTypeCountsOfOutPlantDatafun()
    deviceStatusCountsOfOutPlantDatafun()
    getDeviceOutPlantDatafun()
    connectWebsocket(null,null,getWebsocket,errWebsocket)
  })
  
  onUnmounted(() => {
    clearTimeout(time)
    closeWebsocket()
    store.resetAllData()
  })
  
  </script>
  
  <style module>
  .container {
    height: 1080px;
  width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
  }
  </style>
  
  <style scoped>
  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .title > h1 {
    font-size: 30px;
    position: absolute;
    top: 10px;
  }
  .header{
      position: relative;
  }
  .header p{
      position: absolute;
      right: 50px;
      bottom: 20px;
      font-size:20px;
  }
  .content{
      width:100%;
      --header:100px;
      height:calc(1080px - var(--header))
  }

  </style>
  
  
  <style>
  body {
    
    /* --content:calc(100vh - var(--header)) */
    overflow: hidden !important;
    -ms-overflow-style: none; /* IE + Edge */
    scrollbar-width: none; /* Firefox */
  }
  ::-webkit-scrollbar {
    display: none;
  }
  </style>