<!--
 * @FilePath: \screenFront\src\views\Offsite\child\childContent\chart\topTitle.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-12 13:03:15
 * @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 }">
          
          <p :style="{color:data.color?data.color:''}">{{ data.num }}<span>{{t('messages.units')}}</span></p>
          <h2>{{ data.title }}</h2>
        </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<{
//     value:string,
//     }>()
// const value=reactive<gatewayType>({
// data:null,
// quota:null,
// iconname:''
// })
let keynum = ref(0);
let data = reactive({
  title: "",
  num: 0,
  color: "",
});
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: 10px;
}
p {
  margin: 0 10px 0 10px;
  /* color: #fff; */
  font-weight: 800;
  font-size: 3rem;
}
p>span{
  font-size: 1.5rem;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}
</style>
