<template>
  <el-row>
    <el-col :span="4">
      <el-select v-model="energyType" placeholder="请选择能源类型">
        <el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
      </el-select>

      <!-- 区域选择，默认展开，最高高度为60%的屏幕尺寸 -->
      <el-tree @node-click="handleNodeClick" :data="locationList" :props="defaultProps" :default-expand-all="true" :style="{ height: 'calc(50vh - 50px)' }"></el-tree>

      <!-- 设备列表 -->
      <ul v-if="locationId">
        <li></li>
      </ul>
      <div v-else>
        <el-empty description="请选择区域"></el-empty>
      </div>
    </el-col>

    <el-col :span="20">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="环比概况" name="1">
        </el-tab-pane>
        <el-tab-pane label="近期趋势" name="2"></el-tab-pane>
        <el-tab-pane label="同比分析" name="3"></el-tab-pane>
        <el-tab-pane label="环比分析" name="4"></el-tab-pane>
      </el-tabs>

      <Overview v-if="activeTab === '1'" />
      <RecentTrend v-if="activeTab === '2'" />
      <YearToYear v-if="activeTab === '3'" />
      <MonthToMonth v-if="activeTab === '4'" />
    </el-col>
  </el-row>
</template>

<script>
import { listEnergyType } from "@/api/ems/energyType";
import { listLocation } from "@/api/ems/location";

import Overview from "./panels/Overview.vue";
import RecentTrend from "./panels/RecentTrend.vue";
import YearToYear from "./panels/YearToYear.vue";
import MonthToMonth from "./panels/MonthToMonth.vue";
import Overview from "./panels/Overview.vue";

export default {
  name: "Dashboard",
  components: {
    Overview,
    RecentTrend,
    YearToYear,
    MonthToMonth
  },
  data() {
    return {
      energyTypeList: [],
      energyType: '',
      locationId: '',
      locationList: [
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeTab: '1'
    }
  },
  created() {
    this.getEnergyTypeList();
    this.getLocationList();
  },
  watch: {
    // 当选择的区域变化时重新获取设备列表
    locationId: {

    },
  },
  methods: {
    getEnergyTypeList() {
      listEnergyType({ pageNum: 1, pageSize: 9999 }).then(response => {
        this.energyTypeList = response.rows;
      });
    },
    getLocationList() {
      listLocation().then(response => {
        const data = { locationId: undefined, name: '顶级节点', children: [] };
        data.children = this.handleTree(response.data, "locationId", "parentId");
        this.locationList.push(data);
      });
    },
    handleNodeClick(data) {
      this.locationId = data.locationId;
    }
  }
}
</script>