<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\child\component\sensor.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div :style="{width:itemSize.width,height:itemSize.height}">
  <border1 ref="refborder1" :title="t('messages.DevSensors')">
      <template v-slot>
        <div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height}">
            <div v-for="(res,index) in data" class="box-item" >
            <span>
                <i :class="res.value=='1'?'iconfont icon-jingshideng green':'iconfont icon-jingshideng red'"></i>
            </span>
            <p>{{res.name}}</p>
            </div> 
            <div class="div" style="clear:both"></div>
        </div>
        
      </template>
  </border1>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import border1 from "@/components/borderBox/border1.vue"
import { useI18n } from 'vue-i18n'
let {t} = useI18n();

    let refborder1=ref()
    let data=reactive([])
    let keynum=ref(0)
    const itemSize=reactive({
    height:'0px',
    width:'0px'
    })
    const boxSize=reactive({
    height:'0px',
    width:'0px'
    })
    onMounted(() => {
        // setData()
    })

    function setchartWH(width:any,height:any){
        itemSize.height=height-30+'px'
        itemSize.width=width-80+'px'
        boxSize.height=height-100+'px'
        boxSize.width=width-30+'px'
    refborder1.value.resetWH()
    }

    
    const setData=(value:any)=>{
        data=value
        //更新key用来更新组件数据
        keynum.value++
        refborder1.value.resetWH()
    }

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

<style scoped>
@import '@/assets/css/iconfont.css';
p{
    margin: 0 5px 0 5px;
    color: #fff;
    font-size: 18px;
}
.box{
    width:100%;
    height:80%;
    overflow-y: auto;
}
.box .box-item {
    float: left;
    width: 20%;
    height: 20%;
}
.green{
    color: green;
    font-size: 30px;
}
.red{
    color:#aaa;
    font-size: 30px;
}
</style>
