<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-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
  </div>
</template>

<script>
import { getDayTime } from '@/utils/dateutils'
import { countByDaySecond } from '@/api/dashboard'
import { getDoorAreaTree } from '@/api/system/area'
export default {
  name: 'WaterCountByDay',
  props:{
    query: {
      type: Object,
      default:()=>{
        return {
          areaId: '',
          startTime: '',
          endTime: ''
        }
      }
    }
  },
  data() {
    return {
      listQuery: {
        startTime: '',
        endTime: ''
      },
      title: {
        text: '用水走势图'
      },
      chartSettings: {
        labelMap: {date:'日期'},
        metrics: [],
        dimension: ['date']
      },
      extend: {
        grid: {
          top: 120
        },
        yAxis: {
          name: '用水量（吨）',
          position: 'left'
        },
        legend: {
          // type: 'scroll',
          top: '40px'
        }
      },
      chartData: {
        columns: [],
        rows: []
      }
    }
  },
  mounted() {
    // this.changeTime('month')
    // this.fetchArea()
  },
  watch:{
    query(val){
      this.fetchData()
    }
  },
  methods: {
    // 废弃
    fetchArea() {
      getDoorAreaTree().then(response => {
        if (response.code === 200) {
          debugger
          const area = response.data.filter(item => {
            return item.pid === '1'
          }).map(item => item.name)
          this.chartSettings.metrics = area
          this.chartSettings.labelMap = {}
          for (let i = 0; i < area.length; i++) {
            this.chartSettings.labelMap[area[i]] = area[i]
          }
          this.chartData.columns = ['date', ...area]
          this.fetchData()
        }
      })
    },
    // 获取数据
    fetchData() {
      countByDaySecond(this.query).then(response => {
        if(response.data.length>0){
          const arr = response.data.map((item)=> {
            const result = {date: item.date}
            for (let i = 0; i < item.data.length; i++) {
              result[item.data[i].areaName] = item.data[i].count
            }
            return result
          })
          const area = response.data[0].data.map(item=>item.areaName)
          this.chartData.columns = ['date', ...area]
          this.chartSettings.metrics = area
          this.chartSettings.labelMap = {'date':'日期'}
          this.chartData.rows = arr
        }
      })
      // 模拟数据
      // this.chartData.rows = [
      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
      // ]
    },
    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{

  }
</style>