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

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

export default {
  name: "bar",
  data() {
    return {
      data: []
    };
  },
  props: {
    width: {
      type: Number,
      default() {
        return 0;
      }
    },
    height: {
      type: Number,
      default() {
        return 0;
      }
    },
    id: {
      type: String,
      default() {
        return "";
      }
    }
  },
  computed: {
    ...mapGetters(["fontSize"])
  },
  mounted() {
    this.data = [
      { type: "江北新区", value: 130, vote: 1 },
      { type: "玄武区", value: 80, vote: 2 },
      { type: "秦淮区", value: 90, vote: 1 },
      { type: "建邺区", value: 80, vote: 2 },
      { type: "鼓楼区", value: 110, vote: 1 },
      { type: "栖霞区", value: 85, vote: 2 },
      { type: "雨花台", value: 85, vote: 1 },
      { type: "浦口区", value: 120, vote: 2 }
    ];

    const chart = new Chart({
      container: this.id,
      autoFit: true,
      height: this.height,
      width: this.width,
      padding: ["auto"]
    });
    chart.scale("sales", {
      tickInterval: 20
    });
    chart.axis("type", {
      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("value", {
      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("type*value")
      .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;
    let me = this;
    setTimeout(function() {
      me.chart.changeData(me.data);
    }, 1000);
  },
  methods: {}
};
</script>

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