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

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

export default {
  name: "overBar",
  data() {
    return {
      chart:{}
    };
  },
  props: {
    width: {
      type: Number,
      default() {
        return 0;
      }
    },
    height: {
      type: Number,
      default() {
        return 0;
      }
    },
    id: {
      type: String,
      default() {
        return "";
      }
    },
    dataList:{
      type:Array,
      default(){
        return []
      }
    }
  },
  computed: {
    ...mapGetters(["fontSize"])
  },
  watch: {
    dataList: {
      deep: true,
      handler: function (newVal, oldVal) {
        let data=[]
        newVal.map(item=>{
          data.push({
            name: '未完成',
            month: item.month+'',
            value: item.waitNum
          })
          data.push({
            name: '已完成',
            month: item.month+'',
            value: item.finishedNum
          })
        })
        this.chart.changeData(data);
      }
    }
  },
  mounted() {

    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;
  },
  methods: {}
};
</script>

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