<!--suppress ALL -->
<template>
  <div class="container">
    <ve-pie :data="chartData" :extend="extend" :title="title"/>
  </div>
</template>

<script>
import { countBySecondArea } from '@/api/gasOverview'
import { getDoorAreaTree } from '@/api/system/area'
export default {
  name: 'GasCountByDept',
  props: {
    query: {
      type: Object,
      default: () => {
        return {
          areaId: '',
          startTime: '',
          endTime: ''
        }
      }
    }
  },
  data() {
    return {
      listQuery: {
        areaId: '',
        startTime: '',
        endTime: ''
      },
      areaId: '',
      areaList: [],
      chartData: {
        columns: ['areaName', 'count'],
        rows: []
      },
      extend: {
        grid: {
          right: '30%'
        },
        legend: {
          type: 'scroll',
          top: '60px',
          right: '0px',
          orient: 'vertical'
        },
        series: {
          label: { show: true, position: 'outside', formatter: '{b}' },
          right: 120
        },
        tooltip: { trigger: 'item', formatter: '{b}<br/>用气量：{c}吨<br/>占比：{d}%' }
      },
      title: {
        text: '分区用气占比图'
      },
      chartSettings: {
        labelMap: {
          'areaName': '分区',
          'count': '用气量'
        },
        dimension: 'areaName',
        metrics: 'count'
      }
    }
  },
  watch: {
    query(val) {
      this.fetchData()
    }
  },
  mounted() {
    // TODO:待调试真接口
    // this.fetchArea()
  },
  methods: {
    fetchArea() {
      getDoorAreaTree().then(response => {
        if (response.code === 200) {
          this.areaList = response.data.filter(item => {
            return item.pid === '1'
          }).map(function(item) {
            return {
              id: item.id, name: item.name
            }
          })
          if (this.areaList.length !== 0) { this.areaChange(this.areaList[0].id) }
        }
      })
    },
    areaChange(val) {
      this.areaId = val
      this.fetchData()
    },
    // 获取统计数据
    fetchData() {
      // this.chartData.rows = [
      //   { 'areaName': '科技楼及食堂', 'count': 53 },
      //   { 'areaName': 'A\\B\\C\\D\\E座', 'count': 78 },
      //   { 'areaName': '厂区', 'count': 78 },
      //   { 'areaName': '分段分区', 'count': 78 },
      //   { 'areaName': '船坞分区', 'count': 78 },
      //   { 'areaName': '刀把码头', 'count': 78 },
      //   { 'areaName': '制管作业区', 'count': 78 },
      //   { 'areaName': '滑道作业区', 'count': 78 },
      //   { 'areaName': '码头作业区', 'count': 78 },
      //   { 'areaName': '车间生产区', 'count': 78 }
      // ]
      countBySecondArea(this.query).then(response => {
        this.chartData.rows = response.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      width:calc(100% - 120px);
      height: 28px;
      display: flex;
      justify-content: center;
    }
  }
</style>