<!--
 * @FilePath: \gitscreenFront\src\views\InPlantProducts\content\chart\gateway.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div :key="keynum" :style="{width:boxWH.width,height:boxWH.height}">
  <border6 ref="refborder5">
      <template v-slot>
        
          <div ref="gateway" class="box" :style="{width:boxWH.width,height:boxWH.height}">
            
            <i :class="value.data==1?'iconfont '+value.iconname+' online':'iconfont '+value.iconname+' noonline'"></i>
            <!-- <img src="../../../../assets/svg/gateway.svg" alt="" :class="value.data==1?' online':' noonline'"> -->
            <h2>{{ props.title }}</h2>
            <h2 class="devnum">{{t('messages.DevNum')}}:{{ value.num }}</h2>
          </div>
      </template>
  </border6>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import {gatewayType} from '@/type/InPlantProducts'
// import border5 from "@/components/borderBox/border5.vue"
import border6 from "@/components/borderBox/border6.vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props=defineProps<{
    title:string,
    }>()
    const value=reactive<gatewayType>({
    data:null,
    num:null,
    iconname:''
    })
    let boxWH=reactive({
    width:'0px',
    height:'0px'
  })
    let refborder5=ref()
    let gateway=ref()
    let keynum = ref(0);
    // let fontSize=ref()
    onMounted(() => {
      
    })

    function setchartWH(width:any,height:any){
    // gateway.value.style.height=height+'px'
    // gateway.value.style.width=width+'px'
    boxWH.height=height + "px";
    boxWH.width=width + "px";
    refborder5.value.resetWH()
    }
    const setData=(data?:number|null,iconname?:string,counts?:number)=>{
      value.data=data
      value.iconname=iconname
      value.num=counts
      keynum.value++
    //   value.quota=quota
    //   if(data>quota){
        //使用定时器解决通知重叠问题
    //    let navdebug = setTimeout(() => {
    //       warningNot(props.title,"出现异常，请排查！")
    //       clearTimeout(navdebug)
    //       }, 0);
        
    //   }
    }

    defineExpose({
    setchartWH,
    setData
})
</script>

<style scoped>
@import '@/assets/css/iconfont.css';
.online{
    font-size: 6rem;
  color: rgb(32,174,197);
  position: relative;
  /* top: -20px; */
}
h2{
  color: #fff;
  font-size: 1rem;
}
.noonline{
    font-size:6rem;
  color: rgb(228,57,97);
  position: relative;
  /* top: -20px; */
}
.box{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.devnum{
  margin-top: 10px;
}
</style>
