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

<script>
import echarts from "echarts";
import { mapState } from "vuex";
export default {
  name: "AlarmBar",
  computed: {
    ...mapState(["color"]),
  },
  props: {
    barData: {
      type: Object,
      default: () => ({
        one: 0,
        two: 0,
        three: 0,
      }),
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    color(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
    barData: {
      handler(newVal) {
        console.log(newVal);
        this.myChart.clear();
        this.init();
      },
    },
  },
  methods: {
    init() {
      var salvProName = ["一级", "二级", "三级"];
      var salvProValue = [
        this.barData.one,
        this.barData.two,
        this.barData.three,
      ];
      let options = {
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          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: "#111",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: salvProName,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#111",
                fontSize: "12",
              },
            },
            data: salvProValue,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: this.color,
                  },
                  {
                    offset: 1,
                    color: this.color,
                  },
                ]),
              },
            },
            barWidth: 20,
            data: 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.init();
    let that = this;
    window.addEventListener("resize", function() {
      that.myChart.resize();
    });
  },
};
</script>

<style scoped></style>
