<!--
 * @FilePath: \wang-vue-worke:\demo\daping\src\views\environment\content\right.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-01 14:30:01
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="content-right">
      <el-row >
            <el-col :span="6">
              <border2 ref="refeastPressure">
                  <template v-slot>
                      <!-- <div class="content-small" ref="eastPressure"></div> -->
                      <eastPressure name="east" ref="eastPressureChild"></eastPressure>
                  </template>
              </border2>
            </el-col>
            <el-col :span="6">
                <border2 ref="refweldingTwo">
                        <template v-slot>
                            <div class="content-R-small" ref="weldingTwo"></div>
                            <pmtwo name="welding" ref="weldingTwoChild"></pmtwo>
                        </template>
                </border2>
            </el-col>
            <el-col :span="6">
                <border2 ref="refstuffTwo">
                        <template v-slot>
                            <!-- <div class="content-R-small" ref="stuffTwo"></div> -->
                            <pmtwo name="stuff" ref="stuffTwoChild"></pmtwo>
                        </template>
                </border2>
            </el-col>
            <el-col :span="6">
                <border2 ref="refornamentsTwo">
                        <template v-slot>
                            <!-- <div class="content-R-small" ref="ornamentsTwo"></div> -->
                            <pmtwo name="ornaments" ref="ornamentsTwoChild"></pmtwo>
                        </template>
                </border2>
            </el-col>
      </el-row>
      <el-row >
        <el-col :span="6">
                    <border2 ref="refwestPressure">
                        <template v-slot>
                            <!-- <div class="content-small" ref="westPressure"></div> -->
                            <eastPressure name="west" ref="westPressureChild"></eastPressure>
                        </template>
                    </border2>
            </el-col>
            <el-col :span="6">
                <border2 ref="refweldingTen">
                        <template v-slot>
                            <!-- <div class="content-R-small" ref="weldingTen"></div> -->
                            <pmten name="welding" ref="weldingTenChild"></pmten>
                        </template>
                </border2>
            </el-col>
            <el-col :span="6">
                <border2 ref="refstuffTen">
                        <template v-slot>
                            <!-- <div class="content-R-small" ref="stuffTen"></div> -->
                            <pmten name="welding" ref="stuffTenChild"></pmten>
                        </template>
                </border2>
            </el-col>
            <el-col :span="6">
                <border2 ref="refornamentsTen">
                        <template v-slot>
                            <!-- <div class="content-R-small" ref="ornamentsTen"></div> -->
                            <pmten name="welding" ref="ornamentsTenChild"></pmten>
                        </template>
                </border2>
            </el-col>
      </el-row>
      <el-row >
      <el-col :span="12">
                <border2 ref="refnoise">
                        <template v-slot>
                            <noise ref="noiseChild"></noise>
                        </template>
                </border2>
      </el-col>
      <el-col :span="12">
                <border2 ref="refpipe">
                        <template v-slot>
                            <pipe ref="pipeChild"></pipe>
                        </template>
                </border2>
                
      </el-col>
      </el-row>
  </div>
</template>

<script setup lang="ts">
import border2 from "@/components/borderBox/border2.vue";
import {getCurrentInstance, onMounted, reactive, ref, watch} from "vue"
import eastPressure from './chart/eastPressure.vue'
import pmtwo from './chart/PmTwo.vue'
import pmten from './chart/PmTen.vue'
import noise from './chart/noise.vue'
import pipe from './chart/pipe.vue'
import { ElRow, ElCol } from "element-plus";
import { calcWH } from "@/components/ts/selfAdaption";

let props=defineProps<{
    width:number,
    height:number,
    }>()

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


//内容dom-------------------------
// let eastPressure=ref()
let eastPressureChild=ref()
let westPressureChild=ref()
//pm2.5
let weldingTwoChild=ref()
let stuffTwoChild=ref()
let ornamentsTwoChild=ref()
//pm10
let weldingTenChild=ref()
let stuffTenChild=ref()
let ornamentsTenChild=ref()

let noiseChild=ref()
let pipeChild=ref()
//---------------------------

//边框dom-------------------------
let refeastPressure=ref()
let refwestPressure=ref()
//pm2.5
let refweldingTwo=ref()
let refstuffTwo=ref()
let refornamentsTwo=ref()
//pm10
let refweldingTen=ref()
let refstuffTen=ref()
let refornamentsTen=ref()

let refnoise=ref()
let refpipe=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=()=>{
  refeastPressure.value.resetWH()
  refwestPressure.value.resetWH()
  refweldingTwo.value.resetWH()
  refstuffTwo.value.resetWH()
  refornamentsTwo.value.resetWH()
  refweldingTen.value.resetWH()
  refstuffTen.value.resetWH()
  refornamentsTen.value.resetWH()
  refnoise.value.resetWH()
  refpipe.value.resetWH()
}
const bigBox=(width:any,height:any)=>{
  let a=calcWH(height,width,2,2,20)
  //修改高度
  noiseChild.value.setchartWH(a.oWidth,a.oHeight)
  pipeChild.value.setchartWH(a.oWidth,a.oHeight)
}
const smallBox=(width:any,height:any)=>{
  let a=calcWH(height,width,4,4,20)
  //重置图表宽高
  eastPressureChild.value.setchartWH(a.oWidth,a.oHeight)
  westPressureChild.value.setchartWH(a.oWidth,a.oHeight)

  weldingTwoChild.value.setchartWH(a.oWidth,a.oHeight)
  stuffTwoChild.value.setchartWH(a.oWidth,a.oHeight)
  ornamentsTwoChild.value.setchartWH(a.oWidth,a.oHeight)
  
  weldingTenChild.value.setchartWH(a.oWidth,a.oHeight)
  stuffTenChild.value.setchartWH(a.oWidth,a.oHeight)
  ornamentsTenChild.value.setchartWH(a.oWidth,a.oHeight)

}

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

})
</script>

<style scoped>
.content-right{
    width: 100%;
}
/* .right-ul li{
    height:200px;
    width: 100%;
}
.right-ul li:nth-child(3){
    height:400px;
} */
/* .content-R-big{
    height: 380px;
    width:100%
}
.content-R-small{
    height: 180px;
    width:100%;
} */
</style>