<template>
  <div class="about">
    <div ref="testEChart" style="height: 200px;width: 500px;border: 1px solid blue"/>
  </div>
</template>

<script>
// import { ipcRenderer } from 'electron'
// eslint-disable-next-line no-unused-vars
const { ipcRenderer, remote } = require('electron')

export default {
  name: 'About',
  data() {
    return {
      remote,
      timer: null,
      testEChart: null,
    }
  },
  /*created () {
    ipcRenderer.removeAllListeners('win-resize')
    ipcRenderer.addListener('win-resize', (event, data) => {
      console.log('win-resize =>', data)
    })
  },*/
  mounted() {
    console.log(this.remote)
    this.timer = setTimeout(() => {
      this.initCharts()
    }, 20)
  },
  methods: {
    test () {
      ipcRenderer.send('test-ipcRenderer', 'test-ipcRenderer')
    },
    initCharts() {
      this.$nextTick(() => {
        this.testEChart = this.$echarts.init(this.$refs.testEChart)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.testEChart.setOption(option)
        window.addEventListener('resize', this.resetChart)
      })
    },
    resetChart() {
      this.testEChart.resize()
    },
    disposeChart() {
      this.testEChart.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>
  .about {
    /*height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;*/
  }
</style>
