<template>
  <div class="line" :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() {


      const chart = new G2.Chart({
        container: this.id,
        autoFit: true,
        height: this.height,
        width: this.width,
        padding: ["auto"]
      });
      chart.source(this.data);
      chart.axis('value', {
        title: null,
        grid: null,
        line: {
          stroke: '#979797',
        },
        label: {
          textStyle: {
            fill: '#FFFFFF',
            fontSize: this.$root.$options.filters.filterPx(0.14, this.fontSize)
          }
        }
      });
      chart.axis('month', {
        title: null,
        grid: null,
        position: 'left',
        line: {
          stroke: '#979797',
        },
        label: {
          textStyle: {
            fill: '#FFFFFF',
            fontSize: this.$root.$options.filters.filterPx(0.14, this.fontSize)
          }
        }
      });
      if(this.id!='rightLine'){
        chart.legend({
          position: "top-center",
          offsetX: this.$root.$options.filters.filterPx(0, this.fontSize),
          offsetY: this.$root.$options.filters.filterPx(-0.1, this.fontSize),
          textStyle: {
            fill: "#ffffff",
            fontSize: this.$root.$options.filters.filterPx(0.12, this.fontSize),
            fontWeight: 300
          }
        });
      }else{
        chart.legend(false)
      }
      chart
        .line()
        .position('month*value')
        .color('name', ['#0CFFAA', '#FFFF7B', '#FF3464', '#0073FE', '#05D1FF'])
      chart.render();
      this.chart = chart;
      let me = this;
      setTimeout(function () {
        if (me.id == 'bottomLine') {
          me.data = [
            {month: '1月', name: '固城湖', value: 10},
            {month: '1月', name: '莫愁湖', value: 20},
            {month: '1月', name: '澧水河', value: 30},
            {month: '1月', name: '玄武湖', value: 40},
            {month: '1月', name: '百家湖', value: 50},
            {month: '2月', name: '固城湖', value: 12},
            {month: '2月', name: '莫愁湖', value: 14},
            {month: '2月', name: '澧水河', value: 16},
            {month: '2月', name: '玄武湖', value: 18},
            {month: '2月', name: '百家湖', value: 10},
            {month: '3月', name: '固城湖', value: 22},
            {month: '3月', name: '莫愁湖', value: 33},
            {month: '3月', name: '澧水河', value: 44},
            {month: '3月', name: '玄武湖', value: 55},
            {month: '3月', name: '百家湖', value: 66},
            {month: '4月', name: '固城湖', value: 77},
            {month: '4月', name: '莫愁湖', value: 88},
            {month: '4月', name: '澧水河', value: 14},
            {month: '4月', name: '玄武湖', value: 16},
            {month: '4月', name: '百家湖', value: 54},
            {month: '5月', name: '固城湖', value: 12},
            {month: '5月', name: '莫愁湖', value: 43},
            {month: '5月', name: '澧水河', value: 66},
            {month: '5月', name: '玄武湖', value: 32},
            {month: '5月', name: '百家湖', value: 12},
          ];
        } else if (me.id == 'topLine') {
          me.data = [
            {month: '2016-01', name: '固城湖', value: 10},
            {month: '2016-01', name: '莫愁湖', value: 20},
            {month: '2016-01', name: '澧水河', value: 30},
            {month: '2016-01', name: '玄武湖', value: 40},
            {month: '2016-01', name: '百家湖', value: 50},
            {month: '2017-01', name: '固城湖', value: 12},
            {month: '2017-01', name: '莫愁湖', value: 14},
            {month: '2017-01', name: '澧水河', value: 16},
            {month: '2017-01', name: '玄武湖', value: 18},
            {month: '2017-01', name: '百家湖', value: 10},
            {month: '2018-01', name: '固城湖', value: 22},
            {month: '2018-01', name: '莫愁湖', value: 33},
            {month: '2018-01', name: '澧水河', value: 44},
            {month: '2018-01', name: '玄武湖', value: 55},
            {month: '2018-01', name: '百家湖', value: 66},
            {month: '2019-01', name: '固城湖', value: 77},
            {month: '2019-01', name: '莫愁湖', value: 88},
            {month: '2019-01', name: '澧水河', value: 14},
            {month: '2019-01', name: '玄武湖', value: 16},
            {month: '2019-01', name: '百家湖', value: 54},
            {month: '2020-01', name: '固城湖', value: 12},
            {month: '2020-01', name: '莫愁湖', value: 43},
            {month: '2020-01', name: '澧水河', value: 66},
            {month: '2020-01', name: '玄武湖', value: 32},
            {month: '2020-01', name: '百家湖', value: 12},
          ];
        } else {
          me.data = [
            {month: '1月', name: '', value: 10},
            {month: '2月', name: '', value: 20},
            {month: '3月', name: '', value: 30},
            {month: '4月', name: '', value: 40},
            {month: '5月', name: '', value: 50},
          ]
        }
        me.chart.changeData(me.data);
      }, 1000);
    },
    methods: {}
  };
</script>

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