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

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

  export default {
    name: "quality-line",
    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) {
          this.chart.changeData(newVal);
        }
      }
    },
    mounted() {
      const chart = new G2.Chart({
        container: this.id,
        autoFit: true,
        height: this.height,
        width: this.width,
        padding: ["auto"]
      });
      chart.source(this.dataList);
      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;
    },
    methods: {}
  };
</script>

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