<template>
  <div>
    <div :id="id" class="chart--nodata"></div>
    <div v-if="!charData.length" class="chart--nodata">
      <div>
        <img class="image-120" src="@/assets/no-data.svg" />
        <p class="font-14 color-606266 no-data-text">暂无数据</p>
      </div>
    </div>
  </div>

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

<script>
import * as G2 from '@antv/g2';
export default {
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return [];
      }
    },
    id: String
  },
  mounted() {
    setTimeout(() => {
      this.drawChart(); // 第一步是创建的时候更新图表，但是这个不适用于异步请求接口获取相关数据，采用下面的监听的方式
    }, 30);
  },
  beforeUpdate() {
    this.drawChart();
  },
  watch: {
    charData() {
      this.drawChart();
    }
  },
  methods: {
    async drawChart() {
      this.chart && this.chart.destroy();
      if (!this.charData.length) return;
      const data = this.handleData(this.charData);
      this.chart = new G2.Chart({
        container: this.id,
        autoFit: true,
        forceFit: true,
        height: 359,
        width: 1400,
        padding: [70, 60, 40, 70]
      });
      this.chart.source(data, {
        value: {
          type: 'linear',
          tickInterval: 50
        }
      });
      this.chart.tooltip({
        showMarkers: false,
        shared: true
      });
      this.chart.scale({
        date: {
          dataKey: 'date',
          type: 'cat'
        },
        num: {
          min: 0,
          tickCount: 5,
          nice: true
        },
        times: {
          min: 0,
          tickCount: 5,
          nice: true
        }
      });
      this.chart.legend({
        position: 'top-left'
      });
      this.chart.axis('times', {
        grid: {
          line: {
            type: 'line',
            style: {
              stroke: '#E4E7ED',
              lineDash: [3, 3]
            }
          }
        },
        label: {
          formatter: text => {
            let num = Number(text);
            return num + '人次';
          }
        }
      });
      this.chart.axis('num', {
        grid: {
          line: {
            type: 'line',
            style: {
              stroke: '#E4E7ED',
              lineDash: [3, 3]
            }
          }
        },
        label: {
          formatter: text => {
            let num = text >= 1 ? text : 0;
            return num + '人';
          }
        }
      });
      this.chart.tooltip({
        showMarkers: false,
        shared: true,
        showCrosshairs: true
      });
      this.chart
        .line()
        .position('date*num')
        .color('type', ['rgba(75,116,232,1)', 'rgba(105,200,168,1)', 'rgba(251, 159, 45, 1)']);

      this.chart
        .line()
        .position('date*times')
        .color('type', ['rgba(251, 159, 45, 1)']);
      // this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
      //图表绘制的最后一步，用于将图表渲染至画布
      this.chart.render();
    },
    handleData(data) {
      let arr = [];
      data.forEach(item => {
        arr.push({
          date: item.bizDate,
          type: '今日添加人数',
          num: item.addNum
        });
        arr.push({
          date: item.bizDate,
          type: '今日点击人数',
          num: item.clickNum
        });
        arr.push({
          date: item.bizDate,
          type: '今日点击人次',
          times: item.clickTimes
        });
      });
      return arr;
    }
  }
};
</script>
<style lang="scss" scoped>
.chart--nodata {
  height: 359px;
  width: 100%;
  display: flex;
  justify-content: center;
  .image-120 {
    width: 120px;
    height: 120px;
    padding-top: 60px;
  }
  .no-data-text {
    text-align: center;
    padding-top: 18px;
  }
}
</style>
