<!--
 * @FilePath: \daping\src\views\Mechanics\content\top.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-21 11:33:12
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
    <div class="content-left">
      <el-row>
          <el-col :span="24" class="equipmentCol">
            <gatewayMechanics ref="gatewayMechanics1" ></gatewayMechanics>
            <gatewayMechanics ref="gatewayMechanics2" ></gatewayMechanics>
            <gatewayMechanics ref="gatewayMechanics3" ></gatewayMechanics>
            <gatewayMechanics ref="gatewayMechanics4" ></gatewayMechanics>
            <gatewayMechanics ref="gatewayMechanics5" ></gatewayMechanics>
            <!-- <bottontip ref="bottontip2" ></bottontip> -->
            <!-- <bottontip ref="bottontip5" ></bottontip> -->
          </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import {onBeforeMount, onMounted, reactive, ref, watch} from "vue"
  import {calcWH} from '@/components/ts/selfAdaption'
  import bottontip from "./chart/bottontip.vue"
  import gatewayMechanics from "./chart/gateway.vue"
  import {useMechanicsStore} from "@/store/module/Mechanics"
  import { gatewayOfMachineryFactory,gatcountsOfMachineryFactory } from "@/http/Mechanics";
  const store = useMechanicsStore()
  let props=defineProps<{
      width:number,
      height:number,
      }>()

    //内容dom-------------------------
  let gatewayMechanics1=ref()
  let gatewayMechanics2=ref()
  let gatewayMechanics3=ref()
  let gatewayMechanics4=ref()
  let gatewayMechanics5=ref()
  
  //---------------------------
  
  watch(()=>props,(newVal, oldVal)=>{
    //监听父组件宽高变化，随时重置本组件尺寸  
    reset(newVal)
  },{immediate:true,deep:true,flush:'post'})
  


  //---------------------------
  
  function reset(val:any){
    //宽高为0时跳出该方法
    if(!val.width && !val.height) return
    box(val.width,val.height)
  }
  
  const box=(width:any,height:any)=>{
  let a=calcWH(height,width,1,5,0)
  
//   a.oHeight=a.oHeight
  //修改高度
  gatewayMechanics1.value.setchartWH(a.oWidth,a.oHeight)
  gatewayMechanics2.value.setchartWH(a.oWidth,a.oHeight)
  gatewayMechanics3.value.setchartWH(a.oWidth,a.oHeight)
  gatewayMechanics4.value.setchartWH(a.oWidth,a.oHeight)
  gatewayMechanics5.value.setchartWH(a.oWidth,a.oHeight)

}

watch(()=>store.mechanicsData,(newVal, oldVal)=>{
  
  setdata(newVal)
  },{deep:true,flush:'post'})
  async function gatewayOfMachineryFactoryfun(){
    let result:any = await gatewayOfMachineryFactory()
   
    if(result.code==200){
      store.changegateway(result.data)
      
      
      setdata(store.mechanicsData)
    }
  }
  async function gatcountsOfMachineryFactoryfun(){
    let result:any = await gatcountsOfMachineryFactory()
   
    if(result.code==200){
      store.changegatewaynum(result.data)
    }
  }
onMounted(() => {
  gatewayOfMachineryFactoryfun()
  gatcountsOfMachineryFactoryfun()
  })
function setdata(val:any){

  let newdata=val
gatewayMechanics1.value.setData(newdata[0],'icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan')
gatewayMechanics2.value.setData(newdata[1],'icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan')
gatewayMechanics3.value.setData(newdata[2],'icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan')
gatewayMechanics4.value.setData(newdata[3],'icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan')
gatewayMechanics5.value.setData(newdata[4],'icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan')

}



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