<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-05-16 15:31:20
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="energy-copilot">
    <section class="top flex">
      <Container title="仓库监控·当前" icon="ware">
        <StockMonitorVue :stockDOData="stockDOData" :period="period" />
      </Container>
      <Container title="天然气能耗" icon="gas">
        <NatGasVue :period="period" />
      </Container>
    </section>
    <section class="bottom flex">
      <Container title="电能耗" icon="flash">
        <ElecCostVue :period="period" />
      </Container>
      <Container title="水能耗" icon="water">
        <WaterCostVue :period="period" />
      </Container>
    </section>
  </div>
</template>

<script>
import Container from "@/views/copilot/components/Container.vue";
import StockMonitorVue from "./components/StockMonitor.vue";
import ElecCostVue from "./components/ElecCost.vue";
import NatGasVue from "./components/NatGas.vue";
import WaterCostVue from "./components/WaterCost.vue";
export default {
  name: "EnergyCopilot",
  components: {
    Container,
    StockMonitorVue,
    ElecCostVue,
    NatGasVue,
    WaterCostVue,
  },
  props: {
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {
     stockDOData:[],
    };
  },
  watch: {
    period: {
      handler(val) {
        val && this.fetchData(val);
      },
      immediate: true,
    },
  },

  methods: {
    fetchData(period = "日") {
      // console.log(this.width);
      // console.log('sidebar', this.$store.getters.sidebar);
      console.log(`综合驾驶舱，获取${period}数据`);
      // this.getData(this.period)
      this.$store.dispatch("copilot/initCopilot", {
        period,
        source: "energy",
      });
      // this.$store.dispatch("copilot/initCopilot", {
      //   period,
      //   source: "comprehensive",
      // });
    },
  },
};
</script>

<style scoped>
.energy-copilot {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flex {
  display: flex;
  gap: 16px;
  flex: 1;
}

.top>div,
.bottom>div {
  height: 100%;
}
</style>
