<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\content\center.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>
        <div class="toptitlebox">
          <topTitle ref="topTitle1" :title="city1.title" :num="city1.num" :on="city1.on" :off="city1.off"
            :isAll="city1.isAll"></topTitle>
          <topTitle ref="topTitle2" :title="city2.title" :num="city2.num" :on="city2.on" :off="city2.off"
            :isAll="city2.isAll"></topTitle>
          <topTitle ref="topTitle3" :title="allcity.title" :num="allcity.num" :on="allcity.on" :off="allcity.off"
            :isAll="allcity.isAll"></topTitle>
        </div>
      </el-col>
      <el-col>
        <mapEcharts ref="map1"></mapEcharts>
      </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 mapEcharts from "./chart/mapEchart.vue";
import topTitle from "./chart/topTitle.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 map1 = ref();
let topTitle1 = ref();
let topTitle2 = ref();
let topTitle3 = ref();
//---------------------------

let city1 = reactive({ title: t('messages.DongGuanAffiliate'), num: 0, on: 0, off: 0, isAll: false })
let city2 = reactive({ title: t('messages.ZheJiangAffiliate'), num: 0, on: 0, off: 0, isAll: false })
let allcity = reactive({ title: t('messages.DevAllNum'), num: 0, on: 0, off: 0, isAll: true })
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, 8, 3, 0);
  topTitle1.value.setchartWH(a.oWidth, a.oHeight * 2);
  topTitle2.value.setchartWH(a.oWidth, a.oHeight * 2);
  topTitle3.value.setchartWH(a.oWidth, a.oHeight * 2);
  //   a.oHeight=a.oHeight
  //修改高度
  map1.value.setchartWH(a.oWidth * 3, a.oHeight * 6 - 30);
};
watch(
  () => store.devlist,
  (newVal, oldVal) => {

    store.devlist.forEach(res => {      
      if (res.city == '广东省') {
        if (res.deviceStatus == "true") {
          city1['on'] += res.counts
        } else {
          city1['off'] += res.counts
        }
      }
      if (res.city == '浙江省') {
        if (res.deviceStatus == "true") {
          city2['on'] += res.counts
        } else {
          city2['off'] += res.counts
        }
      }
    })
  },
  { deep: true, flush: "post" }
);
watch(
  () => store.offsitegatewayStatus,
  (newVal, oldVal) => {
    setdata(newVal);
  },
  { deep: true, flush: "post" }
);
function setdata(data: any) {

  data.forEach(res => {

    if (res.city == '广东省') {
      city1['num'] += res.counts
    }
    if (res.city == '浙江省') {
      city2['num'] += res.counts
    }
    allcity['num'] += res.counts
  })


  // topTitle1.value.setData(city1);
  // topTitle2.value.setData(city2);
  // topTitle3.value.setData(allcity);
}
onMounted(() => { });
</script>

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

.toptitlebox {
  display: flex;
  width: 100%;
  height: 100%;
}</style>
