<template>
  <div class="home" style="height: 100%">
    <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
      <div ref="myChart1" style="width: 800px;height: 500px;"/>
      <div ref="myChart2" style="width: 800px;height: 500px;"/>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'Home',
  components: {},
  data () {
    return {
      timer: null,
      interval: null,
      myChart1: null,
      myChart2: null,
      chart1Data: [
        { product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7 },
        { product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1 },
        { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5 },
        { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1 }
      ],
      chart2Data: [],
      count: 1000,
    }
  },
  mounted() {
    this.timer = setTimeout(() => {
      this.initCharts()
    }, 20)

    this.interval = setInterval(() => {
      // console.log('bbbbbbbbbbbbbbb', this.chart2Data)
      this.chart2Data.push(this.randomData(this.count - 1))
      if (this.chart2Data.length > 10) {
        this.chart2Data.shift()
      }
      this.count -= 1
      this.myChart2.setOption({
        series: [{
          data: this.chart2Data
        }]
      })
    }, 1000)
  },
  methods: {
    initCharts() {
      this.$nextTick(() => {
        this.myChart1 = this.$echarts.init(this.$refs.myChart1)
        const myChart1Option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
            position: [10, 10],
            alwaysShowContent: true,
            show: true,
            formatter: params => {
              // console.log('aaaaaaaaa', params)
              let relVal = params[0].name
              let val = 0
              for (let i = 0, l = params.length; i < l; i++) {
                const seriesName = params[i].seriesName
                relVal += '<br/>' + params[i].marker + seriesName + ' : ' + params[i].data[seriesName]
                for (const key in params[i].data) {
                  if (key !== 'product') {
                    val += params[i].data[key]
                  }
                }
              }
              const mark = '<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6;"></span>'
              relVal += '<br/> ' + mark + '总计: ' + val.toFixed(1)
              return relVal
            }
          },
          legend: {},
          grid: {
            left: '15%',
            right: '5%',
            top: '20%',
            bottom: '20%',
          },
          dataset: {
            dimensions: ['product', '2015', '2016', '2017'],
            source: this.chart1Data
          },
          xAxis: {
            type: 'category',
            axisPointer: {
              value: '',
              snap: true,
              label: {
                show: true,
                formatter: params => params.value
              },
              handle: {
                show: true
              }
            },
          },
          yAxis: {},
          series: [
            {
              type: 'line',
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                },
                position: [10, 10],
                alwaysShowContent: true,
                show: true,
              }
            }
          ]
        }
        this.myChart1.setOption(myChart1Option)
        this.myChart1.dispatchAction({
          type: 'showTip',
          dataIndex: 0,
        })

        this.myChart2 = this.$echarts.init(this.$refs.myChart2)

        const myChart2Option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true
            }
          },
          series: [
            {
              name: '动态时间',
              type: 'line',
              showSymbol: false,
              data: this.chart2Data
            }
          ]
        }
        this.myChart2.setOption(myChart2Option)

        window.addEventListener('resize', this.resetChart)
      })
    },
    randomData(day) {
      const date = moment().subtract(day, 'days').format('YYYY-MM-DD')
      let value = Math.random() * 1000
      value = value + Math.random() * 21 - 10
      return {
        name: date,
        value: [date, Math.round(value)]
      }
    },
    resetChart() {
      this.myChart1.resize()
      this.myChart2.resize()
    },
    disposeChart() {
      this.myChart1.dispose()
      // this.myChart2.dispose()
    },
  },
  beforeDestroy() {
    window.clearTimeout(this.timer)
    this.timer = null
    window.removeEventListener('resize', this.resetChart)
    this.disposeChart()
    // ipcRenderer.removeAllListeners('win-resize')
  }
}
</script>

<style lang="less" scoped>

</style>
