<template>
  <div class="homePage">
    <div class="center-bar" style="height: 100%">
      <el-row :gutter="10" style="height: 100%">
        <el-col :span="8" style="padding-left: 0px">
          <ProblemArea ref="problempg" :problems="problems" />
        </el-col>
        <el-col :span="8" style="padding-left: 5px; padding-right: 5px">
          <el-row>
            <el-col :span="24">
              <ControlArea
                :windturbineList="windturbineList"
                ref="controlArea"
                :current="current"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <CheckArea />
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="23">
              <ModeControl
                ref="modeControl"
                :current="current"
                @clicks="handleClick"
              ></ModeControl>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <FocusArea />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <WarningArea></WarningArea>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- <WindturbineDetailPages v-model="dialogVisible"></WindturbineDetailPages> -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import MessageBridge from "utils/MessageBridge";
import ProblemArea from "components/problem/ProblemArea.vue";
import ControlArea from "components/control/controlArea.vue";
import CheckArea from "components/check/checkArea.vue";
import ModeControl from "components/modeControl/modeControl.vue";
import FocusArea from "components/focus/focusArea.vue";
import WarningArea from "components/warning/warningArea.vue";
import { debounce } from "lodash";
export default {
  name: "Home",
  components: {
    ProblemArea,
    ControlArea,
    CheckArea,
    ModeControl,
    FocusArea,
    WarningArea,
  },
  created() {},
  data() {
    return {
      url: process.env.VUE_APP_SHARDINGURL,
      current: 1,
      windturbineList: "",
    };
  },
  mounted() {
    let start =
      86400000 -
      (new Date().getTime() -
        new Date(new Date().toDateString() + " 3:00").getTime());
    setTimeout(() => {
      this.$router.go(0);
    }, start);
    const { current } = this.$route.query;
    current ? this.$store.commit("current", Number(current)) : "";
    this.current = current ? Number(current) : 1;
    this.$refs.controlArea.control(Number(current));
  },
  methods: {
    handleClick(value) {
      this.current = value;
    },
  },
};
</script>
<style scoped>
.homePage {
  height: 87%;
  z-index: 2;
  margin-left: 45px;
}
</style>