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

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

export default {
  name: "overBar",
  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 = [
      { name: '未完成', month: '1', value: 15 },
      { name: '未完成', month: '2', value: 10 },
      { name: '未完成', month: '3', value: 10 },
      { name: '未完成', month: '4', value: 10 },
      { name: '未完成', month: '5', value: 10 },
      { name: '未完成', month: '6', value: 10 },
      { name: '未完成', month: '7', value: 10 },
      { name: '未完成', month: '8', value: 10 },
      { name: '未完成', month: '9', value: 10 },
      { name: '未完成', month: '10', value: 10 },
      { name: '未完成', month: '11', value: 10 },
      { name: '未完成', month: '12', value: 10 },
      { name: '已完成', month: '1', value: 60 },
      { name: '已完成', month: '2', value: 74 },
      { name: '已完成', month: '3', value: 74 },
      { name: '已完成', month: '4', value: 74 },
      { name: '已完成', month: '5', value: 74 },
      { name: '已完成', month: '6', value: 74 },
      { name: '已完成', month: '7', value: 74 },
      { name: '已完成', month: '8', value: 74 },
      { name: '已完成', month: '9', value: 74 },
      { name: '已完成', month: '10', value: 74 },
      { name: '已完成', month: '11', value: 74 },
      { name: '已完成', month: '12', value: 74 },
    ];

    const chart = new G2.Chart({
      container: this.id,
      autoFit: true,
      height: this.height,
      width: this.width,
      padding: ["auto"]
    });
    chart.axis("month", {
      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
        },
        formatter(val) {
          return val+ '月';
        }
      },
    });
    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.legend({
      position: "top-center",
      offsetX:  this.$root.$options.filters.filterPx(1.4,this.fontSize),
      offsetY:  this.$root.$options.filters.filterPx(-0.24,this.fontSize),
      textStyle: {
        fill: "#ffffff",
        fontSize:  this.$root.$options.filters.filterPx(0.14,this.fontSize),
        fontWeight: 300
      }
    });
    chart.intervalStack()
      .position('month*value')
      .size(this.$root.$options.filters.filterPx(0.088, this.fontSize))
      .color('name',['#FFDC12','#0CD1D6']);
    chart.render();
    this.chart = chart;
    let me = this;
    setTimeout(function() {
      me.chart.changeData(me.data);
    }, 1000);
  },
  methods: {}
};
</script>

<style lang="less">
.overBar{
  >div{
    display: flex;
  }
}
</style>
