<template>
  <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings" />
</template>

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

export default {
  name: 'AlarmByDays',
  data() {
    return {
      title: {
        text: '7日报警趋势'
      },
      chartSettings: {
        labelMap: {
          'alarmWells': '报警井数',
          'alarmTimes': '报警次数'
        },
        metrics: ['alarmTimes', 'alarmWells'],
        dimension: ['date']
      },
      extend: {
        yAxis: {
          type: 'value',
          minInterval: 1
        }
      },
      listQuery: {
        deviceType: '',
        beginTime: '',
        endTime: ''
      }, // 查询条件
      chartData: {
        columns: ['date', 'alarmTimes', 'alarmWells'],
        rows: []
      } // 数据
    }
  },
  mounted() {
    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() {
      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
        const maxValue = Math.max.apply(Math, response.data.map(function(item) {
          return parseInt(item.alarmTimes)
        }))
        if (maxValue < 10) {
          this.extend.yAxis = { type: 'value', minInterval: 1, max: 10 }
        } else {
          this.extend.yAxis = { type: 'value', minInterval: 1 }
        }
      })
    }
  }
}
</script>