<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\content\chart\topTitle.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="box-dev" v-if="data.isAll">
            <p>{{ data.num }} </p>
          </div>
          <div class="box-dev" v-else>
            <div class="dev-on">
              <div>
                {{ data.on||0}}
              </div>
              <text>{{t('messages.onLine')}}</text>
            </div>
            <div class="dev-center"></div>
            <div class="dev-all"> 
              <div>{{ data.num }}</div>
              <text>{{t('messages.AllNum')}}</text>
            </div>
            
          </div>
          <h2>{{ data.title }}</h2>
        </div>
      </template>
    </border6>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref,defineProps } 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<{
//     value:string,
//     }>()
// const value=reactive<gatewayType>({
// data:null,
// quota:null,
// iconname:''
// })
let keynum = ref(0);
let data = defineProps({
  title: String,
  num: Number, 
  on: Number, 
  off: Number,
  isAll:Boolean
});
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 = value;
  keynum.value++;
  // data.value='设备名称'
};
// const itemData= ()=>{
//     return data
// }
defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped>
h2 {
  color: #fff;
  font-size: 1rem;
  margin-top: 30px;
}
p {
  margin: 0 10px 0 10px;
  /* color: #fff; */
  font-weight: 800;
  font-size: 3.3rem;
}
p>span{
  font-size: 1.5rem;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
.box .box-dev {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .box-dev .dev-on,.box .box-dev .dev-all {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 2.5rem;
}
.box .box-dev .dev-on {
  transform: translateY(-15px) translateX(20px);
}
.box-dev .dev-all {
  transform: translateY(15px) translateX(-20px);
}
.box .box-dev .dev-center {
  width: 5px;
  height: 140%;
  /* background-image: linear-gradient(to bottom, #2869E8, #00D0FF); */
  background-color: #5067BC;
  transform: rotate(25deg);
}
.box .box-dev div text {
  font-size: 12px;
  color: #fff;
}
.box .box-dev .dev-on {
  position: relative;
  /* border-left:1px solid #fff;
  border-right: 1px solid #fff; */
  color: #7CFFB2;
}
/* .box .box-dev .dev-on::before {
  content: "";
  position: absolute;
  display: inline-block;
  left: 0;
  width: 2px;
  height: 100%;  
  background-color: #fff;
  transform: rotate(18deg);
} */
/* .box .box-dev .dev-on::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #fff;
  transform: rotate(45deg);
} */
.box .box-dev .dev-off {
  color: #ee6666;
}
</style>
