<template>
  <div :id="id"></div>
  <!-- <div v-if="charData.length" :id="id"></div> -->
  <!-- <div v-else class="chart--nodata"></div> -->
</template>

<script>
// import G2 from '@antv/g2';
import * as G2 from '@antv/g2';
export default {
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return [];
      }
    },
    id: String,
    width: {
      type: Number,
      default: 1192
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
    }, 30);
  },
  beforeUpdate() {
    this.drawChart();
  },
  watch: {
    charData() {
      this.drawChart();
    }
  },
  methods: {
    async drawChart() {
      this.chart && this.chart.destroy();
      this.chart = new G2.Chart({
        container: this.id,
        height: 359,
        forceFit: true,
        width: this.width,
        padding: [20, 40, 80, 80]
      });
      this.charData = [
        { addNum: 1, bizDate: '2022-07-11', clickNum: 11, clickTimes: 12 },
        { addNum: 2, bizDate: '2022-07-12', clickNum: 22, clickTimes: 13 },
        { addNum: 3, bizDate: '2022-07-13', clickNum: 33, clickTimes: 14 },
        { addNum: 4, bizDate: '2022-07-14', clickNum: 44, clickTimes: 15 },
        { addNum: 5, bizDate: '2022-07-15', clickNum: 55, clickTimes: 15 },
        { addNum: 6, bizDate: '2022-07-16', clickNum: 66, clickTimes: 14 },
        { addNum: 7, bizDate: '2022-07-17', clickNum: 77, clickTimes: 14 },
        { addNum: 8, bizDate: '2022-07-18', clickNum: 88, clickTimes: 10 },
        { addNum: 9, bizDate: '2022-07-19', clickNum: 99, clickTimes: 120 }
      ];
      this.chart.data(this.charData, {
        bizDate: {
          // type: 'cat', //分类
          alias: '日期' //别名
        },
        addNum: {
          alias: '今日添加人数'
        },
        clickNum: {
          alias: '今日点击人数'
        },
        clickTimes: {
          alias: '今日点击人次'
        }
      });
      //坐标轴配置(法一配置)
      this.chart.axis('bizDate', {
        line: {
          style: {
            stroke: '#606266',
            lineDash: [3, 3]
          }
        },
        tickLine: {
          style: {
            fill: '#E4E7ED',
            lineDash: [3, 3]
          }
        },
        label: {
          style: {
            fill: '#606266'
          }
        }
      });
      // this.chart.axis('新增人数', {
      //   grid: {
      //     line: {
      //       type: 'line',
      //       style: {
      //         stroke: '#E4E7ED',
      //         lineDash: [3, 3]
      //       }
      //     }
      //   },
      //   label: {
      //     style: {
      //       fill: '#606266'
      //     },
      //     formatter: val => {
      //       // 格式化参数值
      //       return val;
      //     }
      //   }
      // });
      // 图例
      this.chart.legend({
        custom: true,
        position: 'top-left',
        items: [
          { name: '今日添加人数', value: 'addNum', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } },
          { name: '今日点击人次', value: 'clickTimes', marker: { symbol: 'line', style: { stroke: '#D6B38C', lineWidth: 12, lineHeight: 8 } } },
          { name: '今日点击人数', value: 'clickNum', marker: { symbol: 'line', style: { stroke: '#14C9C9', lineWidth: 12, lineHeight: 8 } } }
        ]
      });

      this.chart
        .line()
        .position('bizDate*addNum')
        .color('#4B74E8');
      this.chart
        .line()
        .position('bizDate*clickTimes')
        .color('#D6B38C');
      this.chart
        .line()
        .position('bizDate*clickNum')
        .color('#14C9C9');

      this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
      //图表绘制的最后一步，用于将图表渲染至画布
      this.chart.render();
    }
  }
};
</script>
