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

<template>
  <div class="content-left">
    <el-row>
      <el-col :span="11">
        <devList ref="devlist1" :title="'设备明细'"></devList>
      </el-col>
      <el-col :span="8">
        <mapEcharts ref="map1"></mapEcharts>
      </el-col>
      <el-col :span="5">
        <equipment ref="equipment1" :title="t('messages.DevType')"></equipment>
        <equipment ref="equipment2" :title="t('messages.DevStatus')"></equipment>
      </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 equipment from "./chart/equipment.vue";
import mapEcharts from "./chart/mapEchart.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 equipment1 = ref();
let equipment2 = ref();
let map1 = 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);
  Pie(val.width, val.height);
}

const box = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 24, 0);

  //   a.oHeight=a.oHeight
  //修改高度
  devlist1.value.setchartWH(a.oWidth * 11, a.oHeight - 30);
  map1.value.setchartWH(a.oWidth * 8, a.oHeight - 30);
};
const Pie = (width: any, height: any) => {
  let a = calcWH(height, width, 2, 24, 0);

  //   a.oHeight=a.oHeight
  //修改高度
  equipment1.value.setchartWH(a.oWidth * 5, a.oHeight - 30);
  equipment2.value.setchartWH(a.oWidth * 5, a.oHeight - 30);
};

//   async function getnoiseDatafun(){
//     let result:any = await getnoiseData()

//     if(result.code==200){
//       console.log(result);
//       refnoise.value.setData(result.data)
//       // setData(room,year,result.title)
//     }
//   }
onMounted(() => {
});

watch(
  () => store.itemDevNum,
  (newVal, oldVal) => {
    
    let arr=[]
    newVal.forEach(res=>{
      if(res.type==t('messages.OnProduct')||res.type==t('messages.OffProduct')){
        arr.push({name:res.title,value:res.num})
      }
    })
    equipment2.value.setData(arr);
  },
  { deep: true, flush: "post" }
);

watch(
  () => store.devtype,
  (newVal, oldVal) => {
    let arr=[]
    newVal.forEach(res=>{
      arr.push({name:res.name,value:res.counts})
    })
    equipment1.value.setData(arr);
  },
  { deep: true, flush: "post" }
);
watch(
  () => store.devlist,
  (newVal, oldVal) => {
    // equipment1.value.setData(arr);
    devlist1.value.setData(newVal)
  },
  { deep: true, flush: "post" }
);
</script>

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