<template>
  <div class="container">
    <function-area ref="func" :today-show="false" select="week" @change="fetchData"/>
    <ve-histogram v-loading="loading" :data="chartData" :grid="grid" :title="title" :extend="extend" :settings="chartSettings"/>
  </div>
</template>

<script>
import 'echarts/lib/component/visualMap'
import { gasUsed } from '@/api/gasOverview'
import FunctionArea from './FunctionArea'

export default {
  name: 'GasCountByDeviceBar',
  components: { FunctionArea },
  data() {
    return {
      grid: {
        left: 40,
        top: 100,
        bottom: 5
      },
      title: {
        text: '用气量统计'
      },
      chartSettings: {
        itemStyle: {
          barCategoryGap: 10
        },
        labelMap: {
          'devcode': '设备',
          'count': '用气量'
        },
        dimension: ['devcode'],
        metrics: ['count']
      },
      extend: {
        legend: {
          show: true
        },
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        yAxis: {
          name: '用气量（m³）',
          position: 'left'
        },
        series: {
          label: { show: true, position: 'top', formatter: '{c}' },
          barWidth: 25
        },
        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}m³' }
      },
      loading: false,
      timeRange: [],
      chartData: {
        columns: ['devcode', 'count'],
        rows: []
      }
    }
  },
  mounted() {
    this.$refs.func.init()
  },
  methods: {
    fetchData(timeRange) {
      const params = {
        beginTime: timeRange[0] + ' 00:00:00',
        endTime: timeRange[1] + ' 23:59:59'
      }
      // this.loading = true
      gasUsed(params).then(response => {
        const data = []
        for (const key in response.data) {
          data.push({ devcode: key, count: response.data[key] })
        }
        this.chartData.rows = data.map(item => {
          debugger
          item.count = item.count === '' ? 0 : parseFloat(item.count).toFixed(2)
          return item
        })
        // this.isShow = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      width:calc(100% - 120px);
      height: 28px;
      display: flex;
      justify-content: center;
    }
  }
  .statistic-container {
    .el-button{
      padding: 5px 10px;
    }
    /*margin-bottom: 10px;*/
    text-align: center;
    .chart-tool-button {
      padding: 5px;
      line-height: 16px;
      margin-top: 5px;
      font-size: 14px;
    }
    .chart-tool-button:hover {
      background-color: #8cc5ff;
      cursor: pointer;
      color: white;
    }
    .chart-tool-button:active {
      background-color: #8cc5ff;
      color: white;
    }
  }
  .selected {
    background-color: #8cc5ff;
    color: white;
  }
</style>