<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\environment\content\left.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-01-31 15:26:47
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="content-left">
    <el-row>
        <el-col :span="4"> 
          <border2 ref="ReffinishArofene">
               <template v-slot>
                   <div class="content-LR" ref="finishArofene">
                     <verticalNum :title="`${t('messages.JingShiRoom')}(${t('messages.CH2Ojiance')})`" :data="0.132" :unit="'mg/m3'" :quota="1" :iconname="'icon-app_icons--'"></verticalNum>
                   </div>
               </template>
           </border2>
      </el-col>
        <el-col :span="4">
        <border2 ref="ReffinishAir">
               <template v-slot>
                   <div class="content-LR" ref="finishAir">
                    <verticalNum :title="`${t('messages.JingShiRoom')}TVOC（mg/m3）`" :data="0.1" :unit="'mg/m3'" :quota="1" :iconname="'icon-TVOC-Outlined'"></verticalNum>
                   </div>
               </template>
           </border2>
          </el-col>
        <el-col :span="4">
        <border2 ref="RefboilerGas">
               <template v-slot>
                   <div class="content-LR" ref="boilerGas">
                    <verticalNum :title="`锅炉房${t('messages.gasDetection')}`" :data="0.132" :unit="'LEL'" :quota="1" :iconname="'icon-ranqi'"></verticalNum>
                   </div>
               </template>
           </border2>
          </el-col>
          <el-col :span="4">
            <border2 ref="RefcanteenGas">
               <template v-slot>
                   <div class="content-LR" ref="canteenGas">
                    <verticalNum :title="`食堂${t('messages.gasDetection')}`" :data="0.132" :unit="'LEL'" :quota="1" :iconname="'icon-ranqi'"></verticalNum>
                   </div>
               </template>
           </border2>
          </el-col>
          <el-col :span="4">
            <border2 ref="RefpaintingGas">
               <template v-slot>
                   <div class="content-LR" ref="paintingGas">
                    <verticalNum :title="`喷漆${t('messages.gasDetection')}`" :data="1.1" :unit="'LEL'" :quota="1" :iconname="'icon-ranqi'"></verticalNum>
                   </div>
               </template>
           </border2>
          </el-col>
          <el-col :span="4">
            <border2 ref="Refflame">
               <template v-slot>
                   <div class="content-LR" ref="flame">
                    <verticalNum :title="t('messages.flameDetection')" :data="0.132" :unit="''" :quota="1" :iconname="'icon-weibiaoti1'"></verticalNum>
                   </div>
               </template>
           </border2>
          </el-col>


      
    </el-row>
    <el-row >
        <el-col :span="24">
            <border2 ref="Refpower">
              <template v-slot>
                <power ref="powerChild"></power>
              </template>
            </border2>
        </el-col>
    </el-row>
    <el-row >
        <el-col :span="24">
            <border2 ref="Refhumiture">
              <template v-slot>
                <humiture ref="humitureChild"></humiture>
              </template>
            </border2>
        </el-col>
      
    </el-row>
  </div>
</template>

<script setup lang="ts">
import border2 from "@/components/borderBox/border2.vue";
import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch, watchEffect} from "vue"
import {EDataPerson,EDataPersonItem} from '@/type/environment'
import { ElRow, ElCol } from "element-plus";
import verticalNum from './chart/verticalNum.vue'
import humiture from './chart/humiture.vue'
import power from './chart/power.vue'
import {calcWH} from '@/components/ts/selfAdaption'
import { sum } from "lodash";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props=defineProps<{
    width:number,
    height:number,
    }>()

watch(()=>props,(newVal, oldVal)=>{
  //监听父组件宽高变化，随时重置本组件尺寸  
  reset(newVal)
},{immediate:true,deep:true,flush:'post'})

const { proxy } = getCurrentInstance() as any;
// let Power=ref()
let humitureChild=ref()
let powerChild=ref()
// let eastPressure=ref()
// let westPressure=ref()

let finishArofene=ref()
let finishAir= ref()
let boilerGas= ref()
let canteenGas= ref()
let paintingGas= ref()
let flame= ref()

//边框dom
let ReffinishArofene=ref()
let ReffinishAir=ref()
let RefboilerGas=ref()
let RefcanteenGas=ref()
let RefpaintingGas=ref()
let Refflame=ref()
let Refpower=ref()
let Refhumiture=ref()

function reset(val:any){
  //宽高为0时跳出该方法
  if(!val.width && !val.height) return

  //重置边框尺寸
  resetBorder()
  //重置盒子尺寸
  bigBox(val.width,val.height)
  smallBox(val.width,val.height)
}

const resetBorder=()=>{
  ReffinishArofene.value.resetWH()
  ReffinishAir.value.resetWH()
  RefboilerGas.value.resetWH()
  RefcanteenGas.value.resetWH()
  RefpaintingGas.value.resetWH()
  Refflame.value.resetWH()
  Refpower.value.resetWH()
  Refhumiture.value.resetWH()
}
const bigBox=(width:any,height:any)=>{
  let a=calcWH(height,width,4,1,0)
  //修改高度
  a.oHeight=a.oHeight*3/2-5
  //重置图表宽高
  humitureChild.value.setchartWH(a.oWidth,a.oHeight)
  powerChild.value.setchartWH(a.oWidth,a.oHeight)
}
const smallBox=(width:any,height:any)=>{
  let a=calcWH(height,width,4,6,0)
  a.oHeight-=50
 finishArofene.value.style.height=a.oHeight+'px'
 finishArofene.value.style.width=a.oWidth+'px'

 finishAir.value.style.height=a.oHeight+'px'
 finishAir.value.style.width=a.oWidth+'px'

 boilerGas.value.style.height=a.oHeight+'px'
 boilerGas.value.style.width=a.oWidth+'px'

 canteenGas.value.style.height=a.oHeight+'px'
 canteenGas.value.style.width=a.oWidth+'px'

 paintingGas.value.style.height=a.oHeight+'px'
 paintingGas.value.style.width=a.oWidth+'px'

 flame.value.style.height=a.oHeight+'px'
 flame.value.style.width=a.oWidth+'px'
}

const echartsData = reactive<EDataPerson>({
    // power:{
    //     div:null,
    //     data:null,
    //     title:'',
    //     box:null
    // },
    // humiture:{
    //     div:null,
    //     data:null,
    //     title:'',
    //     box:null
    // },
    

})
/**
 * @函数功能: 设置数据
 * @出口参数: 
 * @函数备注: 
 */
const setData=()=>{
//     echartsData.power!.div=Power.value
//     echartsData.power!.title='用电量kW.h'
//     echartsData.power!.data={
//     title:{
//         text:echartsData.power!.title,
//         show:true,
//         textStyle:{
//             color:'#fff',
//             fontSize:20
//         }
//     },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       // Use axis to trigger tooltip
//       type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
//       axis:'auto'
//     }
//   },
//   legend: {
//     bottom: '3%',
//   },
//   grid: {
//     top:'8%',
//     left: '3%',
//     right: '4%',
//     bottom: '15%',
//     containLabel: true
//   },
//   xAxis: {
//     type: 'value'
//   },
//   yAxis: {
//     type: 'category',
//     data: ['东气泵房', '大件车间', '家纺军团', '服装军团', '机加车间', '汽车军团', '焊接车间','电控车间','精加车间','装饰车间','西气泵房']
//   },
//   series: [
//     {
//       name: 'Jan',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [320, 302, 301, 334, 390, 330, 320, 302, 301, 334, 390]
//     },
//     {
//       name: 'Feb',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [120, 132, 101, 134, 90, 230, 210, 330, 320, 302, 301]
//     },
//     {
//       name: 'Mar',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90]
//     },
//     {
//       name: 'Apr',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290]
//     },
//     {
//       name: 'May',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     }
//     ,
//     {
//       name: 'Jun',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     }
//     ,
//     {
//       name: 'Jul',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     }
//     ,
//     {
//       name: 'Aug',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     }
//     ,
//     {
//       name: 'Sep',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     }
//     ,
//     {
//       name: 'Oct',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     },
//     {
//       name: 'Nov',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     },
//     {
//       name: 'Dec',
//       type: 'bar',
//       stack: 'total',
//       emphasis: {
//         focus: 'series',
//         label: {
//         show: true
//         }
//       },
//       data: [820, 832, 901, 934, 1290, 1330, 1320, 212, 201, 154, 190]
//     }
//   ]
// };
// echartsData.humiture!.div=humiture.value
//     echartsData.humiture!.title='温湿度'
//     echartsData.humiture!.data={
//   title: {
//     text: echartsData.humiture!.title
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     }
//   },
//   legend: {
//     bottom: '3%',
//   },
//   grid: {
//     top:'8%',
//     left: '3%',
//     right: '4%',
//     bottom: '10%',
//     containLabel: true
//   },
//   xAxis: {
//     type: 'category',
//     data: ['服装军团', '家纺军团', '汽车军团', '电控车间', '精饰车间', '精加车间', '焊接车间', '大件车间', '机加车间', '配套中心']
//   },
//   yAxis: {
//     type: 'value',
//     boundaryGap: [0, 0.01],
//     axisLabel:{
//        formatter:'{value} (°C/RH)',
//     }
//   },
//   series: [
//     {
//       name: '温度(°C)',
//       type: 'bar',
//       data: [12, 16, 13, 17, 14, 20, 30, 12, 31, 16]
//     },
//     {
//       name: '湿度(RH)',
//       type: 'bar',
//       data: [30, 16, 20, 17, 28, 20, 30, 29, 31, 16],
//       markLine: { // 设置最大值和最小值
//         silent: true, //基线显示 隐藏
//         symbol:'none',// 不显示箭头和圆点
//         lineStyle: {
//         normal: {
//             color: "red", // 这儿设置安全基线颜色
//         },
//         },
//               data: [
//                 {
//                   name: "我是最小值",
//                   yAxis: 15,
//                   label:{
//                     formatter:"湿度下限值：15RH",
//                     position: 'middle'
//                   }
//                 }
//               ],
//      }
//     }
//   ]
// };


}

/**
 * @函数功能: 生成图表
 * @出口参数: 
 * @函数备注: 
 */
const change = (item:EDataPersonItem) => {
    console.log(item);
    
    let Ebox=proxy.$echarts.init(
    item.div,
    "dark"
  );
  Ebox.setOption(item.data);
  item.box = Ebox
};

//Mounted生命周期
onMounted(() => {

});

</script>

<style module>

</style>
<style scope>
.content-left{
    width: 100%;
}

.content-small{
/* height: 170px;
width: 100%; */
display: flex;
justify-content: space-around;
align-items: center;
}
</style>