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

<script>
import G2 from "@antv/g2";
import DataSet from "@antv/data-set";

export default {
  name: 'LineChart',
  props: [
    'id',
    'title',
    'data',
    'axisX',
    'axisY'
  ],
  data () {
    return {
      chart: undefined,
    }
  },
  mounted() {
    this.rander();
  },
  watch: {
    data() {
      window.console.log(this.id, this.data)
      this.rander()
    }
  },
  methods: {
    rander() {
      const _self = this

      if (this.chart) {
        this.chart.clear();
      } else {
        this.chart = new G2.Chart({
          container: _self.id,
          forceFit: true,
          height: 282,
          padding: [80, 40, 30, 50]
        });
      }

      const chart = this.chart;
      chart.source(_self.data);

      chart.axis("value", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            textAlign: "end", // 文本对齐方向，可取值为： start middle end
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12", // 文本大小
            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
          }
        }
      });
      chart.axis("item", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12" // 文本大小
          }
        }
      });
      chart.tooltip({
        crosshairs: true
      });

      chart
        .line()
        .position("item*value")
        .color("value", () => '#83BB41')
        .size(2)
        .shape("smooth");
      chart
        .point()
        .position("item*value")
        .size(3)
        .shape("circle")
        .label("item*value",
          function(item, value) {
            return value;
          },
          {
            textStyle: {
              fill: "#fff",
              fontSize: 12,
              textAlign:'left',
            }
          }
        )
        .style({
          fill: "#eee",
          fontSize: 12,
          stroke: "#83BB41",
          lineWidth: 1
        });
      chart.guide().html({
        position: ["5%", "-35%"],
        html: `<div class="line-chat"><p class="title">${_self.title}</p></div>`
      });
      chart.guide().html({
        position: ["1%", "-22%"],
        html: `<div class="line-chat"><p class="title">${_self.axisY}</p></div>`
      });
      chart.guide().html({
        position: ["102%", "100%"],
        html: `<div class="line-chat"><p class="title">${_self.axisX}</p></div>`
      });
      chart.render();
    }
  }
};
</script>

<style lang="scss">
.line-chat {
  .title {
    font-size: 13px;
    color: #a4b6c5;
  }
}
</style>
