<template>
  <div
    v-if="data.xData.length===0"
    style="font-size: 12px;
    position: relative;
    text-align: center;
    margin-top: 10%;
    color: #909399"
  >暂无数据</div>
  <bar v-else width="100%" :height="height" :option="option" :chart-data="{}" />
</template>

<script>
import Bar from '@ability/components/Echarts/Bar.vue'
import moment from 'moment'
export default {
  name: 'ThreatTrendStatistics',
  components: { Bar },
  props: {
    height: {
      type: String,
      default: '200px'
    },
    data: {
      type: Object,
      default: () => {}
    },
    daterange: {
      type: Array,
      required: true
    }
  },
  watch: {
    data: {
      deep: true,
      handler(newVal) {
        this.option.xAxis[0].data = newVal.barData
        this.option.xAxis[1].data = newVal.xData
        this.option.series[0].data = newVal.barData
      }
    }
  },
  data() {
    return {
      option: {
        color: ['#2186F8'],
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            const start = moment(this.data.xData[params[0].dataIndex]).format('YYYY-MM-DD HH:mm:ss')
            const end = moment(this.data.xData[params[0].dataIndex + 1]).format('YYYY-MM-DD HH:mm:ss')
            const times = params[0].data
            return `时间:${start} ~ ${end}<br/>发生次数:${times}`
          }
        },
        yAxis: [{
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }],
        xAxis: [{
            show: false
          },
          {
            splitLine: { show: false },
            axisLabel: {
              interval: 0,
              formatter: (value, index) => {
                const date = moment(+value).format('MM-DD')
                const time = moment(+value).format('HH:mm:ss')
                return `${date}\n${time}`
              }
            },
            position: 'bottom',
            boundaryGap: false,
            axisPointer: {
                show: false,
            },
          }
        ],
        grid: {
          top: '5%',
          bottom: '40%'
        },
        // dataZoom: {
        //   type: 'slider',
        //   show: true,
        //   xAxisIndex: [0, 1],
        //   start: 0,
        //   end: 100,
        //   labelFormatter: (value) => {
        //     const date = moment(this.data.xData[value]).format('MM-DD')
        //     const time = moment(this.data.xData[value]).format('HH:mm:ss')
        //     return `${date}\n${time}`
        //   }
        // },
        series: [{
            type: 'bar',
        }],
      }
    }
  }
}
</script>

<style>

</style>
