<template>
  <div :id="id" style="height: 100%;width: 100%" />
</template>

<script>
import { Line } from '@antv/g2plot'
export default {
  name: 'G2Line',
  props: {
    id: {
      type: String,
      default: 'line'
    },
    lineData: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: 'line'
    },
    description: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      line: null
    }
  },
  watch: {
    title: function(val) {
      this.line.updateConfig({
        title: {
          visible: true,
          text: val
        },
        description: {
          visible: true,
          text: `单位为: ${this.description}`
        }
      })
      this.line.render()
    },
    lineData: function(val) {
      this.line.changeData(val)
    }
  },
  mounted() {
    this.line = new Line(document.getElementById(this.id), {
      data: this.lineData,
      title: {
        visible: true,
        text: this.title
      },
      xField: 'time',
      yField: 'value',
      xAxis: {
        type: 'time',
        mask: 'HH:mm:ss'
      },
      tooltip: {
        visible: true,
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          type: 'y'
        },
        offset: 20,
        formatter: (x, y) => {
          return {
            name: this.title,
            value: `${y} ${this.description}`
          }
        }
      },
      description: {
        visible: true,
        text: `单位为: ${this.description}`
      },
      guideLine: [
        {
          type: 'mean',
          lineStyle: {},
          text: {
            content: '中位数'
          }
        }
      ]
    })
    this.line.render()
  },
  beforeDestroy() {
    this.line.destroy()
  }
}
</script>

<style scoped>

</style>
