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

<script>
import { getDayTime } from '@/utils/dateutils'
import { alarmStaticByDay } from '@/api/dataStatics'

export default {
  name: 'WaterCountByDay',
  data() {
    return {
      listQuery: {
        beginTime: '',
        endTime: ''
      },
      title:{
        text: '各分区用水走势'
      },
      chartSettings: {
        labelMap: {
          'dept1': '科技楼及食堂',
          'dept2': 'A\\B\\C\\D\\E座',
          'dept3': '厂区',
          'dept4': '分段分区',
          'dept5': '船坞分区',
          'dept6': '刀把码头',
          'dept7': '制管作业区',
          'dept8': '滑道作业区',
          'dept9': '码头作业区',
          'dept10': '车间生产区',
        },
        metrics: ['dept2', 'dept1','dept3','dept4','dept5','dept6','dept7','dept8','dept9','dept10'],
        dimension: ['date']
      },
      extend: {
        grid:{
          top:120
        },
        yAxis:{
          name:'用水量（吨）',
          position:'left'
        },
        legend:{
          // type: 'scroll',
          top:'40px'
        }
      },
      chartData: {
        columns: ['date', 'dept2', 'dept1','dept3','dept4','dept5','dept6','dept7','dept8','dept9','dept10'],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()

  },
  methods: {
    fetchData() {
    //   const beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000).Format('yyyy-MM-dd hh:mm:ss')
    //   const endTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
    //   this.listQuery.beginTime = beginTime
    //   this.listQuery.endTime = endTime
    //   alarmStaticByDay(this.listQuery).then(response => {
    //     this.chartData.rows = response.data
    //   })
      // 模拟数据
      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 beginTime
      switch(timeType){
        case 'year':
          beginTime = getDayTime(new Date().getTime() - 24 * 365 * 60 * 60 * 1000)
          this.listQuery.beginTime = beginTime.Format('yyyy-MM-dd')
          break
        case 'halfyear':
          beginTime = getDayTime(new Date().getTime() - 24 * 182 * 60 * 60 * 1000)
          this.listQuery.beginTime = beginTime.Format('yyyy-MM-dd')
          break
        case '3month':
          beginTime = getDayTime(new Date().getTime() - 24 * 90 * 60 * 60 * 1000)
          this.listQuery.beginTime = beginTime.Format('yyyy-MM-dd')
          break
        case 'month':
          beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
          this.listQuery.beginTime = beginTime.Format('yyyy-MM-dd')
          break
        case 'week':
          beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
          this.listQuery.beginTime = beginTime.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{
      position:absolute;
      z-index:200;
      bottom: 10px;
      left: 0;
      width:100%;
      height: 32px;
      display: flex;
      justify-content: center;
    }
  }
</style>