<template>
  <div :id="'alarm-bar-'+barData.id" style="width: 100%; height: 100%;"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: "AlarmBar",
  props: {
    barData: {
      type: Object,
      default: function () {
        return {
          id: 0,
          salvProName: ["一级","二级","三级"],
          salvProValue: [239,181,154]
        }
      }
    }
  },
  watch: {
    barData: {
      handler(newVal) {
        if(newVal) {
          this.myChart.clear()
          this.init()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let that = this;
      let options = {
        title: {
          text: '近7日数据',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#fff'
          },
          top: '5%'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function(params) {
            return params[0].name  + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: that.barData.salvProName
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '12'
            },
          },
          data: that.barData.salvProValue
        }],
        series: [{
          name: '值',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#3498DB'
              }, {
                offset: 1,
                color: '#3498DB'
              }]),
            },
          },
          barWidth: 20,
          data: that.barData.salvProValue
        },
          {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: [],
            itemStyle: {
              normal: {
                color: 'rgba(24,31,68,1)',
                barBorderRadius: 30,
              }
            },
          },
        ]
      }
      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('alarm-bar-' + this.barData.id));
    this.init();
    let that = this;
    window.addEventListener('resize', function() {
      that.myChart.resize();
    })
  }
}
</script>

<style scoped>

</style>
