<!--suppress ALL -->
<template>
  <div class="container">
    <!--<div class="function">-->
      <!--<el-button round size="mini" @click="changeTime('year')">近1年</el-button>-->
      <!--<el-button round size="mini" @click="changeTime('halfyear')">近6月</el-button>-->
      <!--<el-button round size="mini" @click="changeTime('3month')">近3月</el-button>-->
      <!--<el-button round size="mini" @click="changeTime('month')">近1月</el-button>-->
      <!--<el-button round size="mini" @click="changeTime('week')">近1周</el-button>-->
    <!--</div>-->
    <ve-pie :data="chartData" :extend="extend" :title="title"/>
    <!--<div class="function">-->
      <!--<el-button-->
        <!--v-for="item in areaList"-->
        <!--:key="item.id"-->
        <!--round-->
        <!--@click="areaChange(item.id)"-->
        <!--size="mini">{{item.name}}</el-button>-->
    <!--</div>-->
  </div>
</template>

<script>
import { countBySecondArea } from '@/api/overview'
import { getDoorAreaTree } from '@/api/system/area'
export default {
  name: 'WaterCountByDepy',
  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'
      }
    }
  },
  mounted() {
    // TODO:待调试真接口
    // this.fetchArea()
  },
  watch:{
    query(val){
      this.fetchData()
    }
  },
  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
      })
    },
    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{
      width:calc(100% - 120px);
      height: 28px;
      display: flex;
      justify-content: center;
    }
  }
</style>