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

<script>
// 引入视觉映射组件
import 'echarts/lib/component/visualMap'
import { gasAlarmBySecondArea } from '@/api/gasOverview'
import functionArea from './FunctionArea'
export default {
  name: 'WatchGasAlarmBar',
  components: { functionArea },
  data() {
    return {
      title: {
        text: '燃气告警统计'
      },
      extend: {
        xAxis: {
          axisLabel: {
            rotate: 30,
            margin: 30,
            textStyle: {
              align: 'center'
            }
          }
        },
        yAxis: {
          name: '报警次数',
          position: 'left',
          max: 10
        },
        series: {
          label: { show: true, position: 'top' },
          barMaxWidth: 35 // 最大柱宽度
        }
      },
      grid: {
        right: 60
      },
      chartSettings: {
        itemStyle: {
          'barCategoryGap': 5
        },
        barWidth: 15,
        labelMap: {
          'areaName': '区域',
          'alarm': '报警数'
        },
        dimension: ['areaName'],
        metrics: ['alarm']
      },
      chartData: {
        columns: ['areaName', 'alarm'],
        rows: []
      },
      areaId: '',
      areaList: [],
      isShow: true,
      defaultTimeRange: [],
      timeRange: []
    }
  },
  mounted() {
    this.$refs.func.init()
    // this.setDefaultTime('today')
    // this.fetchArea()
  },
  methods: {
    fetchData(timeRange) {
      const params = {
        areaId: '110000',
        startTime: timeRange[0],
        endTime: timeRange[1]
      }
      this.$emit('change', params)
      gasAlarmBySecondArea(params).then(response => {
        this.isShow = false
        this.chartData.rows = response.data
        this.isShow = true
      })
    }
  }
}
</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>