<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" :style="{ marginTop: '24px' }">
      <a-col :sm="24" :md="6" :xl="18" :style="{ marginBottom: '24px' }">
        <a-select
          showSearch
          optionFilterProp="children"
          :defaultValue="zoneSelected.name"
          :value="zoneSelected.name"
          @change="changeZone"
          style="width: 100%" >
          <a-select-option v-for="(zone, index) in zones" :key="index">
            {{ zone.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :sm="24" :md="6" :xl="6" :style="{ marginBottom: '24px' }">
        <a-button
          type="primary"
          @click="listCapacity(zoneSelected, true)">Fetch Latest Statistics</a-button>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col
        :sm="12"
        :md="12"
        :xl="6"
        :style="{ marginBottom: '28px' }"
        v-for="stat in stats"
        :key="stat.type">
        <chart-card :loading="loading" style="padding-top: 40px">
          <div style="text-align: center">
            <h4>{{ stat.name }}</h4>
            <a-progress type="dashboard" :percent="parseFloat(stat.percentused, 10)" :width="100" />
          </div>
          <template slot="footer"><span>{{ stat.capacityused }} / {{ stat.capacitytotal }}</span></template>
        </chart-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import { api } from '@/api'

import ChartCard from '@/components/chart/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/Trend'

export default {
  name: 'CapacityDashboard',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend
  },
  data () {
    return {
      loading: true,
      zones: [],
      zoneSelected: {},
      stats: []
    }
  },
  mounted () {
    this.listZones()
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'dashboard') {
        this.listZones()
      }
    }
  },
  created () {
    setTimeout(() => {
      // to do after initial timeout
    }, 1000)
  },
  methods: {
    listCapacity (zone, latest = false) {
      const params = {
        zoneid: zone.id,
        fetchlatest: latest
      }
      this.loading = true
      api('listCapacity', params).then(json => {
        this.stats = []
        this.loading = false
        if (json && json.listcapacityresponse && json.listcapacityresponse.capacity) {
          this.stats = json.listcapacityresponse.capacity
        }
      })
    },
    listZones () {
      api('listZones').then(json => {
        if (json && json.listzonesresponse && json.listzonesresponse.zone) {
          this.zones = json.listzonesresponse.zone
          if (this.zones.length > 0) {
            this.zoneSelected = this.zones[0]
            this.listCapacity(this.zones[0])
          }
        }
      })
    },
    changeZone (index) {
      this.zoneSelected = this.zones[index]
      this.listCapacity(this.zoneSelected)
    },
    filterZone (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    //padding-right: 24px;

    .extra-item {
      display: inline-block;
      //margin-right: 24px;

      a {
        //margin-left: 24px;
      }
    }
  }
</style>