<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\content\left.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-26 16:09:16
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
    <div class="content-left">
      <el-row>
        <el-col>
          <offsitegateway ref="offsitegatewayref" :title="t('messages.datacom')"></offsitegateway>
        </el-col>
        <el-col>
          <devList ref="devlist1" :title="t('messages.OffSiteDevList')"></devList>
        </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 devList from "./chart/deviceslist.vue";
  import offsitegateway from "./chart/offsitegateway.vue";
  import { Offsite } from "@/store/module/offsite";
  import { useI18n } from 'vue-i18n'
let {t} = useI18n();
  const store = Offsite();
  let props = defineProps<{
    width: number;
    height: number;
  }>();
  
  //内容dom-------------------------
  let devlist1 = ref();
  let offsitegatewayref=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, 3, 1, 0);
  
    //   a.oHeight=a.oHeight
    //修改高度
    devlist1.value.setchartWH(a.oWidth, a.oHeight*2 - 30);
    offsitegatewayref.value.setchartWH(a.oWidth, a.oHeight - 30);
  };
  
  onMounted(() => {
  });
  
  
  watch(
    () => store.devlist,
    (newVal, oldVal) => {
      // equipment1.value.setData(arr);
      devlist1.value.setData(newVal)
      
    },
    { deep: true, flush: "post" }
  );
  watch(
    () => store.offsitegatewayStatus,
    (newVal, oldVal) => {
      // equipment1.value.setData(arr);
      offsitegatewayref.value.setData(newVal)
    },
    { deep: true, flush: "post" }
  );
  </script>
  
  <style scope>
  .content-left {
    width: 100%;
  }
  </style>
  