<!--suppress ALL -->
<template>
  <div class="container">
    <div class="function">
      <el-select v-model="listQuery.month" placeholder="月份" size="small" @change="fetchData">
        <el-option
          v-for="item in month"
          :key="item"
          :label="item+'月'"
          :value="item+''"/>
      </el-select>
    </div>
    <div class="objCount">
      <div style="font-weight: bold">能源总量</div>
      <div>{{ total }}</div>
    </div>
    <ve-ring
      style="width: 100%;"
      :data="chartData"
      :extend="extend"
      :title="{text: query.name}"
      :settings="chartSettings"/>
  </div>
</template>

<script>
import { statisticsBuilding } from '@/api/energy'
import { getDoorAreaTree } from '@/api/system/area'
export default {
  name: 'EnergyBuilding',
  props:{
    query: Object
  },
  data() {
    return {
      month:[1,2,3,4,5,6,7,8,9,10,11,12],
      listQuery: {
        buildingType: '',
        month: ''
      },
      total: '',
      chartData: {
        columns: ['name', 'value'],
        rows: []
      },
      extend: {
        // grid: {
        //   right: '30%'
        // },
        legend: {
          top: '10%',
          left: 'center'
        },
        // color: ['#19d4ae', '#fac858', '#ee6666', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        series: {
          type: 'pie',
          radius: ['35%', '60%'],
          label: {
            show: true,
            position: 'outside',
            formatter: '{name|{b}}\n{value|{c} }',
            rich: {
              time: {
                fontSize: 15,
                color: '#999'
              }
            }
          },
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 15,
            borderColor: '#fff',
            borderWidth: 5
          },
        },
        tooltip: { trigger: 'item', formatter: '{b}<br/>用量：{c}<br/>占比：{d}%' }
      },
      title: {
        text: ''
      },
      chartSettings: {
        label: {
          formatter: params => {
            return `${params.data.name}:${params.data.value}`
          }
        },
        // labelMap: {
        //   'name': '单位',
        //   'value': '用量'
        // },
        // dimension: 'name',
        // metrics: 'value'
      }
    }
  },
  mounted() {
    var num = new Date().getMonth() + 1
    this.month.length = num
    this.listQuery.month = num.toString()
    this.fetchData()
  },
  watch: {
    query:{
      handler: function() {
        this.listQuery.buildingType = this.query.value
        this.fetchData()
      },
      deep: true
    }
  },
  methods: {
    // 获取统计数据
    fetchData() {
      this.listQuery.buildingType = this.query.value
      console.log(this.listQuery)
      this.chartData.rows = [
        {
          name:'省局',
          value: 42411
        },
        {
          name:'省台',
          value: 12411
        }
      ]
      this.total = 0
      this.chartData.rows.forEach(value => {
        this.total += Number(value.value)
      })
      // statisticsBuilding(this.query).then(response => {
      //   this.chartData.rows = response.data
      //   this.total = 0
      //   this.chartData.rows.forEach(value => {
      //     this.total += Number(value.value)
      //   })
      // })
    },
    changeTime(timeType) {
      let startTime
      switch (timeType) {
        case 'year':
          startTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
          break
        case 'halfyear':
          startTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
          break
        case '3month':
          startTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
          break
        case 'month':
          startTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
          break
        case 'week':
          startTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
          this.listQuery.startTime = startTime.Format('yyyy-MM-dd')
          break
      }
      const endTime = new Date()
      this.listQuery.endTime = endTime.Format('yyyy-MM-dd')
      this.fetchData()
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      position: absolute;
      z-index: 10000000000;
      right: 30px;
      width: 80px;
      height: 28px;
      display: flex;
      justify-content: center;
    }
    .objCount{
      position: absolute;
      z-index: 10000000000;
      left: 36%;
      top: 45%;
      line-height: 1.5;
      width: 100px;
      height: 28px;
      text-align: center;
      justify-content: center;
      color: #666;
    }
  }
</style>