<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\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}">
    <!-- <border5 ref="refborder5">
      <template v-slot> -->
        <div ref="gateway" class="box" @click="clickBotton" >
          <i
            :class="
              gatewayvalue.gateway
                ? 'iconfont ' + gatewayvalue.iconname + ' online'
                : 'iconfont ' + gatewayvalue.iconname + ' noonline'
            "
          ></i>
          <!-- <img src="../../../../assets/svg/gateway.svg" alt="" :class="value.data==1?' online':' noonline'"> -->
          <h3>{{gatewayvalue.title+`-${t('messages.datacom')}`}}</h3>
          <h2>{{t('messages.DevAllNum')}}:{{ gatewayvalue.counts }}</h2>
          <!-- <p><span>在线</span></p> -->
        </div>
      <!-- </template>
    </border5> -->
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import {useMechanicsStore} from "@/store/module/Mechanics"
import { forEach } from "lodash";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const store = useMechanicsStore()
const router=useRouter()

let keynum = ref(0);
const gatewayvalue = reactive({
  index: null,
  title: null,
  counts: null,
  gateway: null,
  iconname: "",
});
let boxWH=reactive({
    width:'0px',
    height:'0px'
  })
// let refborder5 = ref();
let gateway = ref();
// 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();
}
  
  
watch(()=>store.mechanicsData,(newVal, oldVal)=>{
  newVal.forEach(res=>{
    if(res.title==gatewayvalue.title){
      gatewayvalue.counts = res.num;
    }
  })
  },{deep:true,flush:'post'})
  


function setData(val: any,iconname:string) {
  
  let num = null
  gatewayvalue.index = val.index;
  gatewayvalue.title = val.title;
  gatewayvalue.counts = val.num;
  
  num = val.num
  gatewayvalue.counts = num
  gatewayvalue.gateway = JSON.parse(val.gateway);
  gatewayvalue.iconname = iconname;

  
  keynum.value++
}

const clickBotton=()=>{
    store.changePage(gatewayvalue.index)
    router.push({
    name:'Mechanicschild',
    params:{
      id:gatewayvalue.index
    }
})
  }

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

<style scoped>
@import "@/assets/css/iconfont.css";
.online {
  font-size: 8rem;
  color: rgb(32, 174, 197);
  position: relative;
  /* top: -20px; */
}
h2 {
  color: #fff;
  font-size: 2rem;
}
.noonline {
  font-size: 8rem;
  color: rgb(228, 57, 97);
  position: relative;
  /* top: -20px; */
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  
}
.box > h3{
  color: #fff;
  font-size: 1.5rem;
  position: relative;
  top: -10px;
}
</style>
