<template>
  <div
    v-if="data.length===0"
    style="font-size: 12px;
    position: relative;
    text-align: center;
    top: 40%;
    color: #909399;"
  >暂无数据</div>
  <broken-bar v-else :id="'AlarmTrendStatistics'+id" width="100%" :height="height" :option="option" :item="item" :chart-data="{yData:data.map(obj=>[obj.timestamp,obj.count])}" />
</template>

<script>
import BrokenBar from '@ability/components/Echarts/LineBar.vue'
import moment from 'moment'
export default {
  name: 'AlarmTrendStatistics',
  components: { BrokenBar },
  props: {
    height: {
      type: String,
      default: '225px'
    },
    data: {
      type: Array,
      default: () => []
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      item: {
        lineStyle: {
          width: 0
        },
        symbol: 'none',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgb(194,53,49)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(194,53,49,0.3)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      option: {
        color: ['#F56C6C'],
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            const time = moment(params[0].data[0]).format('YYYY-MM-DD HH:mm:ss')
            const times = params[0].data[1]
            return `时间:${time}<br/>发生次数:${times}`
          }
        },
        xAxis: {
          type: 'time',
          splitNumber: 6,
          maxInterval: 3600 * 24 * 7 * 1000,
          // minInterval: 3600 * 2 * 1000,
          splitLine: { show: false },
          axisLabel: {
            interval: 5,
            showMinLabel: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          maxInterval: 1000,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          top: '5%',
          left: '5%'
        }
      }
    }
  }
}
</script>

<style>

</style>
