<!--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 { wellStaticByBfzt } from '@/api/dataStatics'
export default {
  name: 'WaterCountByDepy',
  data() {
    return {
      areaId:'',
      areaList: [{id:'', name: '生产厂区' }, {id:'', name: '科技楼及食堂' }, {id:'', name: 'A/B/C/D/E座' }],
      chartData: {
        columns: ['dept', 'wellCount'],
        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: {
          'dept': '分区',
          'wellCount': '用水量'
        },
        dimension: 'dept',
        metrics: 'wellCount'
      }
    }
  },
  mounted() {
    // TODO:待调试真接口
    this.fetchData()
  },
  methods: {
    areaChange(val){
      this.areaId = val
      this.fetchData()
    },
    // 获取统计数据
    fetchData() {
      this.chartData.rows = [
        { 'dept': '科技楼及食堂', 'wellCount': 53 },
        { 'dept': 'A\\B\\C\\D\\E座', 'wellCount': 78 },
        { 'dept': '厂区', 'wellCount': 78 },
        { 'dept': '分段分区', 'wellCount': 78 },
        { 'dept': '船坞分区', 'wellCount': 78 },
        { 'dept': '刀把码头', 'wellCount': 78 },
        { 'dept': '制管作业区', 'wellCount': 78 },
        { 'dept': '滑道作业区', 'wellCount': 78 },
        { 'dept': '码头作业区', 'wellCount': 78 },
        { 'dept': '车间生产区', 'wellCount': 78 }
      ]
      // wellStaticByBfzt(this.listQuery).then(response => {
      //   const data = response.data
      //   this.chartData.rows = [
      //     { 'bfzt': '布防', 'wellCount': data.bfWell },
      //     { 'bfzt': '撤防', 'wellCount': data.cfWell }
      //   ]
      // })
    },
    changeDate(date) {
      let beginTime, endTime
      if (date === 'today') {
        beginTime = getDayTime(new Date().getTime())
        endTime = new Date()
        this.timeRange = [beginTime, endTime]
      } else if (date === 'yesterday') {
        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
        endTime = getDayTime(new Date().getTime())
      } else if (date === 'sevendays') {
        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
        endTime = new Date()
      } else if (date === 'lastmonth') {
        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
        endTime = new Date()
      }
      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
      this.fetchData()
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{
    position:relative;
    .function{
      width:calc(100% - 120px);
      height: 28px;
      display: flex;
      justify-content: center;
    }
  }
</style>