<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2
          :width="'100%'"
          :height="'100px'"
          :title="t('messages.ECHistoryData')"
          :titleTip="[]"
          :typeFun="['comback','time']"
          :alarmType="['']"
        >
        </header2>
        <!-- <div class="left">
            <dv-decoration-9 style="width: 100px; height: 100px"
              >66%</dv-decoration-9
            >
          </div>
          <div class="right">
            <dv-decoration-11 style="width: 200px; height: 60px"
              >可用性:80%</dv-decoration-11
            >
          </div> -->
      </div>
    </div>
    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="12">
          <left :width="size.oWidth" :height="size.oHeight"></left>
        </el-col>
        <el-col :span="12">
          <right :width="size.oWidth" :height="size.oHeight"></right>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import header2 from "@/components/headerBox/header2.vue";
import { calcWH } from "@/components/ts/selfAdaption";
import left from "./content/left.vue";
import right from "./content/right.vue";
import { onMounted, onUnmounted, reactive, ref } from "vue";
import {
  getHistoryGasData,
  getHistoryWaterData,
  getHistoryCurrentData,
} from "@/http/energyConsume";
import { useenergyUseStore } from "@/store/module/energyUse";
const store = useenergyUseStore();
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
// let titleTip = [
//   {
//     color: "rgb(32, 174, 197)",
//     name: "在线",
//   },
//   {
//     color: "#797979",
//     name: "离线",
//   },
// ];

//获取设备列表数据
async function getpowerhistoryDatafun() {
    let result: any = await getHistoryCurrentData();
    if (result.code == 200) {
      console.log(result.data);
      
  store.setList(result.data, "power");
    }
}
async function getwaterhistoryDatafun() {
    let result: any =await getHistoryWaterData();
    if (result.code == 200) {
      store.setList(result.data, "water");
    }

}
async function getgashistoryDatafun() {
    let result: any =await getHistoryGasData();
    if (result.code == 200) {
      store.setList(result.data, "gas");
    }

}

let Acontent = ref();
let time = ref(null);
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 2, 0);
  size.oWidth = a.oWidth;
  size.oHeight = a.oHeight;
}
let size = reactive({
  oWidth: 0,
  oHeight: 0,
});

onMounted(() => {
  let contentBox = Acontent.value;
  // let Timedombox=Timedom.value
  window.document.title = "能耗 历史数据检测系统";
  WH(contentBox);
  window.addEventListener("resize", () => {
    if (time.value) {
      clearTimeout(time.value);
      time.value = null;
    }
    time.value = setTimeout(() => {
      WH(contentBox);
    }, 1000);
  });
  getpowerhistoryDatafun();
  getwaterhistoryDatafun();
  getgashistoryDatafun();
});
onUnmounted(() => {
  clearTimeout(time);
  // store.resetData();
});
</script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>
<style scoped>
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.title > h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}
.title > .left {
  position: absolute;
  left: 100px;
  bottom: 10px;
}
.title > .right {
  position: absolute;
  right: 100px;
  bottom: 50px;
}
/* .ov{
      width: 150px;
      height: 150px;
      overflow: hidden;
  } */
.header {
  position: relative;
}
.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}
.content {
  width: 100%;
  --header: 100px;
  height: calc(1080px - var(--header));
}

</style>
<style>
body {

  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none; /* IE + Edge */
  scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
  display: none;
}
</style>
