<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" :settings="chartSettings" style="margin-bottom: 18px"/>
  </div>
</template>

<script>
import { getDayTime } from '@/utils/dateutils'
import { alarmCountByDay } from '@/api/overview'

export default {
  name: 'AlarmByDays',
  data() {
    this.title = {
      text: '报警趋势'
    }
    this.chartSettings = {
      labelMap: {
        '远传水表': '远传水表',
        '噪声记录仪': '噪声记录仪',
        '液位监测仪': '液位监测仪'
      },
      metrics: ['远传水表', '噪声记录仪', '液位监测仪'],
      dimension: ['date']
    }
    return {
      listQuery: {
        deviceType: '',
        startTime: '',
        endTime: ''
      },
      chartData: {
        columns: ['date', '远传水表', '噪声记录仪', '液位监测仪'],
        rows: []
      }
    }
  },
  mounted() {
    this.changeTime('week')
    this.fetchData()
    // 模拟数据
    // this.chartData.rows = [
    //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
    //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
    //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
    //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
    //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
    //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
    // ]
  },
  methods: {
    fetchData() {
      alarmCountByDay(this.listQuery).then(response => {
        const arr = response.data.map(function(item) {
          for (let i = 0; i < item.data.length; i++) {
            item[item.data[i].name] = item.data[i].count
          }
          delete item.data
          return item
        })
        
        this.chartData.rows = arr
      })
    },
    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{
      /*position:absolute;*/
      /*z-index:200;*/
      /*bottom: 10px;*/
      /*left: 0;*/
      width:100%;
      height: 28px;
      display: flex;
      text-align: center;
      justify-content: center;
      margin-bottom: 10px;
    }
  }
</style>