<template>
  <div class="dashboard-container" style="background-color: white">
    <el-row>
      <el-col :span="8">
        <el-card shadow="never" class="card">
          <energy-num ref="energyNum"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" class="card">
          <energy-year ref="energyYear"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never" class="card">
          <energy-month ref="energyYear"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6"  v-for="(item,index) in buildingList" :key="item.value">
        <el-card shadow="never" class="card">
          <energy-building :ref="'building'+index" :query="item"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import EnergyNum from "./components/energyNum";
  import EnergyYear from "./components/energyYear";
  import EnergyMonth from "./components/energyMonth";
  import { getDictByCode } from '@/api/system/dict'
  import EnergyBuilding from "./components/energyBuilding";

  export default {
    name: 'Dashboard',
    components: {
      EnergyBuilding,
      EnergyMonth,
      EnergyYear,
      EnergyNum
    },

    data(){
      return {
        buildingList:[]
      }
    },
    mounted() {
      this.fetchOptions()
    },
    methods: {
      fetchOptions(){
        getDictByCode('buildingType').then(response => {
          if (response.code === 200) {
            this.buildingList = response.data
          }
        })
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .card{
    margin: 0px;
  }
  .dashboard-container{
    .el-row{
      .el-col{
        margin-bottom: 10px;
      }
    }
  }
  .dashboard {
    &-container {
      padding: 10px 20px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>