<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-05-08 15:29:28
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="energy-copilot">
    <Container title="仓库监控·当前" icon="ware">
      <StockMonitorVue :period="period" />
    </Container>
    <Container title="天然气能耗" icon="gas">
      <NatGasVue :period="period" />
    </Container>
    <Container title="电能耗" icon="flash">
      <ElecCostVue :period="period" />
    </Container>
    <Container title="水能耗" icon="water">
      <WaterCostVue :period="period" />
    </Container>
  </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 {};
  },
  watch: {
    period: {
      handler(val) {
        val && this.fetchData(val);
      },
      immediate: true,
    },
  },
  methods: {
    fetchData(period = "日") {
      console.log(`效率驾驶舱，获取${period}数据`);
      this.$store.dispatch("copilot/initCopilot", {
        period,
        source: "comprehensive",
      });
    },
  },
};
</script>

<style scoped>
.energy-copilot {
  flex: 1;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  /* grid-template-rows: 1fr 1fr; */
}

.energy-copilot > div {
  height: 100%;
}
</style>
