<template>
  <!-- <indexroute></indexroute> -->
    <section class="mainbox overview">
      <!-- topBox start -->
      <div class="topBox">
        <div class="column">
          <div class="panel powerView">
            <h2>用电量概览</h2>
            <div class="powerBox">
              <power-top :dayMonthData="dayMonthData"></power-top>
              <div class="powerViewBottom">
                <div class="filterSec">
                  <select
                    name=""
                    id=""
                    ref="select_timeShare"
                    @change="select_timeShare"
                  >
                    <option :value="1">日</option>
                    <option :value="2">月</option>
                  </select>
                </div>
                <div class="eleShareTit">分时电量</div>
                <ele-share-chart :select_value="select_value"></ele-share-chart>
              </div>
            </div>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column mapBox">
          <div class="mapSec" style="height: 100%; z-index: 9; width: 100%">
            <model-static-top :dayMonthData="dayMonthData"></model-static-top>
            <i class="siteIcon" @click="modalShow"></i>

            <modal-box
              v-if="show"
              @func="getMsgFormSon"
              :fshow="show"
            ></modal-box>

            <div class="panel-footer"></div>
          </div>
        </div>

        <div class="column">
          <div class="panel deviceSum">
            <h2>设备统计</h2>
            <ul>
              <li>
                <p>监测对象</p>
                <pie-chart></pie-chart>
              </li>
              <li>
                <p>监测设备</p>
                <pie-chart2></pie-chart2>
              </li>
            </ul>
            <div class="panel-footer"></div>
          </div>
          <div class="panel operStatus">
            <h2>告警统计</h2>
            <alarming-chart></alarming-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <!-- topBox end -->

      <!-- bottomBox start -->
      <div class="bottomBox">
        <div class="column">
          <div class="panel currentUsage" style="height: 100%">
            <h2>实时负荷曲线</h2>
            <real-time-chart></real-time-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="panel currentUsage" style="height: 100%">
            <h2>需量趋势</h2>
            <bar-chart></bar-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="panel currentUsage hisTrend" style="height: 100%">
            <div class="filterSec">
              <el-date-picker
                v-model="hisDefaultTime"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>

              <!-- <select ref="select_filterSec" @change="select_filterSec">
                <option :value="1">日</option>
                <option :value="2">月</option>
              </select> -->
            </div>
            <h2>历史趋势</h2>
            <ul class="histTab">
              <li @click="msg = 0" :class="{ active: msg === 0 }">电流</li>
              <li @click="msg = 1" :class="{ active: msg === 1 }">电压</li>
            </ul>
            <hist-trend-chart
              :msg="msg"
              :filterSec_value="filterSec_value"
              :hisDefaultTime="hisDefaultTime"
              style="width: 100%"
            ></hist-trend-chart>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
      <!-- bottomBox end -->
    </section>
</template>
<script>
import powerTop from "./components/Overview/powerTop";
import eleShareChart from "./components/Overview/eleShareChart";
import barChart from "./components/Overview/barChart";
import modelStaticTop from "./components/Overview/modelStaticTop";
import realTimeChart from "./components/Overview/realTimeChart";
import histTrendChart from "./components/Overview/histTrendChart";
import alarmingChart from "./components/Overview/alarmingChart";
import pieChart from "./components/Overview/pieChart";
import pieChart2 from "./components/Overview/pieChart2";
import modalBox from "./components/Overview/modalBox";
import EleShareChart from "./components/Overview/eleShareChart.vue";
import api from "@/api/Overview/index";
import { ElMessage } from "element-plus";
// import indexroute from "@/views/index";

export default {
  name: "index",
  components: {
    // indexroute,
    powerTop,
    eleShareChart,
    barChart,
    modelStaticTop,
    realTimeChart,
    histTrendChart,
    alarmingChart,
    pieChart,
    pieChart2,
    modalBox,
    EleShareChart,
  },
  data() {
    return {
      show: false,
      msg: 0,
      dayMonthData: null,
      epLoad: null,
      select_value: 1,
      filterSec_value: 1,

      hisDefaultTime: this.$store.state.se_defaultTime2[0],
    };
  },
  created() {},
  mounted() {
    this.dayMonthYearEp();
  },
  methods: {
    select_filterSec() {
      this.filterSec_value = parseInt(this.$refs.select_filterSec.value);
    },
    select_timeShare() {
      this.select_value = parseInt(this.$refs.select_timeShare.value);
    },
    /**
     * @用电量概览 -> 月度年度今日用电量
     */
    dayMonthYearEp() {
      var _this = this;
      api
        .dayMonthYearEp({
          siteId: _this.$store.state.siteId,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            this.dayMonthData = requset.data;
          } else {
            ElMessage.error(requset.msg);
          }
        });
    },
    modalShow() {
      this.show = !this.show;
    },
    getMsgFormSon(data) {
      this.show = data;
    },
  },
  watch: {
    "$store.state.siteId"() {
      this.show = false;
      this.dayMonthYearEp();
    },
  },
};
</script>

<style lang="scss">
</style>
