<template>
  <div class="bar" :id="id"></div>
</template>

<script>
import { Chart } from "@antv/g2";
import { mapGetters } from "vuex";

export default {
  name: "bar",
  data() {
    return {
    };
  },
  props: {
    width: {
      type: Number,
      default() {
        return 0;
      }
    },
    height: {
      type: Number,
      default() {
        return 0;
      }
    },
    id: {
      type: String,
      default() {
        return "";
      }
    },
    dataList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch:{
    dataList(){
      if(this.dataList.length>0){
        this.chart.changeData(this.dataList);
      }
    }
  },
  computed: {
    ...mapGetters(["fontSize"])
  },
  mounted() {
    const chart = new Chart({
      container: this.id,
      autoFit: true,
      height: this.height,
      width: this.width,
      padding: ["auto"]
    });
    chart.scale("sales", {
      tickInterval: 20
    });
    chart.axis("name", {
      title: null,
      tickLine: null,
      line: null,
      label: {
        offset: 10,
        textStyle: {
          fill: "#ffffff",
          fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
          fontWeight: 300,
          opacity: 0.7
        }
      }
    });
    chart.axis("num", {
      title: null,
      grid: null,
      line: null,
      label: {
        offset: 10,
        textStyle: {
          fill: "#ffffff",
          fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
          fontWeight: 300,
          opacity: 0.7
        }
      }
    });
    chart.tooltip(false);
    chart.legend(false);
    chart
      .interval()
      .position("name*num")
      .size(this.$root.$options.filters.filterPx(0.21, this.fontSize))
      .color("vote", value => {
        if (value == 1) {
          return "l(270) 0:rgba(36,177,180,0.00) 1:#4AD9DB";
        }
        return "l(270) 0:rgba(0,137,255,0.30) 1:rgba(28,137,253,0.99)";
      });

    chart.render();
    this.chart = chart;
  },
  methods: {}
};
</script>

<style lang="less">
.bar {
  >div{
    display: flex;
    align-items: center;
  }
}
</style>
