<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\childContent\chart\offsitegateway.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="marginbox">
    <border6 ref="refborder6">
      <template v-slot>
        <div
          class="box"
          :key="keynum"
          :style="{ width: boxWH.width, height: boxWH.height }"
        >
          
          <div class="title-box"><h2>{{ props.title }}</h2>
            <div class="colorTip">
              <div ><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div>
              <div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i> {{t('messages.offline')}}</div>
            </div>
            </div>
          <ul class="gatewaystatus">
            <li v-for="item in data">
              <i
                :class="
                 JSON.parse(item.status)
                    ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
                    : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
                "
              ></i>
              <h2 class="titlesize-name">{{ item.name }}</h2>
            </li>
          </ul>
        </div>
      </template>
    </border6>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { gatewayType } from "@/type/InPlantProducts";
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,
// quota:null,
// iconname:''
// })
let keynum = ref(0);
let data = reactive([
]);
let refborder6 = ref();
let marginbox = ref();
let boxWH = reactive({
  width: "0px",
  height: "0px",
});
// let gateway=ref()
// let fontSize=ref()
onMounted(() => {});

function setchartWH(width: any, height: any) {
  marginbox.value.style.height = height + "px";
  marginbox.value.style.width = width + "px";
  boxWH.height = height - 10 + "px";
  boxWH.width = width - 10 + "px";
  refborder6.value.resetWH();
}
const setData = (value?: any) => {
  data=reactive([...value])

  keynum.value++;
  // data.value='设备名称'
};
// const itemData= ()=>{
//     return data
// }
defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped>

h2 {
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
}
p {
  margin: 0 10px 0 10px;
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.gatewaystatus {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.gatewaystatus > li {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gatewaystatus > li {
  flex-direction: column;
}
.noonline {
  font-size: 8rem;
  color: rgb(228, 57, 97);
  position: relative;
  /* top: -20px; */
}
.online {
  font-size: 8rem;
  color: rgb(32, 174, 197);
  position: relative;
  /* top: -20px; */
}
.colorTip {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.colorTip span {
  margin-right: 1rem;
}
.colorTip > div {
  margin-right: 1rem;
  font-size: 1rem;
}
.colorTip .icon-red {
  display: inline-block;
  /* background-color: #e43961; */
  /* border-radius: 1rem; */
  color: #e43961;
  width: 1rem;
  height: 1rem;
}
.colorTip .icon-blue {
  display: inline-block;
  /* background-color: #20aec5; */
  /* border-radius: 1rem; */
  color: #20aec5;
  width: 1rem;
  height: 1rem;
}
.titlesize-name{
    font-size: 1.5rem;
}
.title-box{
  display: flex;
  justify-content: space-between;
}
.title-box > h2{
  margin-left: 20px;
}
</style>
