<template>
  <div id="lineChart" ref="chartBox"/>
</template>

<script>
import theme from '../../../styles/element-ui.scss';
import elementResizeDetectorMaker from 'element-resize-detector'
import * as echarts from 'echarts'

export default {
  props: {
    chartData: {
      type: Object,
      default: () => ({
        xdata: [],
        ydata: []
      })
    }
  },
  data() {
    return {
      chart: null,
      /*chartData: {
        xData: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '0:00'],
        yData: [120, 100, 191, 120, 150, 120, 100, 99, 85, 75, 65, 30, 20, 12, 100, 9, 8, 37, 6, 100, 20, 66, 20, 80]
      }*/
      resize: 0
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('lineChart'), element => {
      const s = this.resize + 1;
      this.resize = s;
      setTimeout(() => {
        this.resizeChart(s);
      }, 50);
    })
  },
  methods: {
    resizeChart(p) {
      if (p == this.resize) {
        if (this.chart) {
          this.resize = 0;
          this.chart.resize()
        }
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('lineChart'), 'macarons')
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        xAxis: {
          data: this.chartData.xdata,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#5E5E5E',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#FDEDFA'
            }
          }
        },
        yAxis: {
          show: true,
          axisLabel: {
            color: '#5E5E5E',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        grid: {
          show: true,
          left: 0,
          right: 15,
          bottom: 5,
          top: 8,
          borderColor: '#fff',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        series: [{
          smooth: true,
          type: 'line',
          itemStyle: {
            color: theme.colorAccent, //'#0BD373'
            borderWidth: 4,
            shadowColor: '#dfe3ff',
            shadowBlur: 20
          },
          lineStyle: {
            color: theme.colorAccent, //'#0BD373'
            width: 3
          },
          data: this.chartData.ydata,
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#lineChart {
  width: 100%;
  height: 22vh;
}
</style>
