<!--
 * @FilePath: \daping\src\views\Mechanics\child\son\components\toptip1.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="tipbox">
    <border6 ref="refborder6">
      <template v-slot>
        <div class="box" :style="{ width: boxWH.width, height: boxWH.height }">
          <h2>{{ data.title }}</h2>
          <p>{{ data.value }} <span v-if="props.type == 2" style="font-size: 2rem;"> 分钟</span></p>
          <span></span>
          <!-- <p style="font-size: 20px;" </p> -->
        </div>
        <!-- <div class="box" v-if="props.type == 2">
          <h2>{{ data.title }}</h2>
          <p>
            <dv-digital-flop
            :config="config"
            style="width: 50%; height: 50%"
          />
          </p>
          
        </div> -->
      </template>
    </border6>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import border6 from "@/components/borderBox/border6.vue";
let props = defineProps<{
  type: number;
}>();
// const value=reactive<gatewayType>({
// data:null,
// quota:null,
// iconname:''
// })
// const config = reactive({
//   number: [100],
//   content: "{nt}分钟",
//   formatter,
//   style:{
//     margin: '0 10px 0 10px',
//     color:'#fff',
//     fontSize: 30,
//     textAlign:'center',
//     width: '100%'
//   }
// });
// function formatter(number) {
//   const numbers = number.toString().split("").reverse();
//   const segs = [];
//   while (numbers.length) segs.push(numbers.splice(0, 3).join(""));
//   return segs.join(",").split("").reverse().join("");
// }
let boxWH = reactive({
  width: "0px",
  height: "0px",
});
let data = reactive({
  title: "",
  value: null,
});
let refborder6 = ref();
let tipbox = ref();
onMounted(() => {});

function setchartWH(width: any, height: any) {
  tipbox.value.style.height = height + "px";
  tipbox.value.style.width = width + "px";
  boxWH.height = height-20 + "px";
  boxWH.width = width + "px";
  refborder6.value.resetWH();
}
const setData = (value?: any) => {
    data.title=value.title
//     if(props.type==1){
        data.value=value.value
//     }else if (props.type==2) {
//         config.number[0]=value.value
//     }
//   // data.value='设备名称'
//   console.log(config);
  
};

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

<style scoped>
h2 {
  color: #fff;
  text-align: left;
  margin-top: 3px;
  margin-left: 3px;
  font-size: 1.5rem;
}
p {
  margin: 0 10px 0 10px;
  color: #fff;
  font-size: 2rem;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}
</style>
