<template>
  <div>
    <div :id="id" class="chart--box" v-show="charData.length > 0"></div>
    <div v-if="charData.length == 0" 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>
</template>

<script>
import * as G2 from '@antv/g2';
import filters from '@/filters/index';
export default {
  components: {},
  data() {
    return {
      chart: null
    };
  },
  props: {
    charData: {
      type: Array,
      default() {
        return [];
      }
    },
    id: String,
    chartWidth: Number
  },
  beforeUpdate() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      this.chart && this.chart.destroy();
      if (!this.charData.length) return;
      this.chart = new G2.Chart({
        container: this.id,
        autoFit: true,
        forceFit: true,
        height: 359,
        width: this.chartWidth,
        padding: [70, 60, 40, 70]
      });
      //装载数据
      let list = JSON.parse(JSON.stringify(this.charData));
      list.sort((a, b) => {
        return b.新增人数 - a.新增人数;
      });
      let maxNum = list[0]['新增人数'];
      this.chart.data(this.charData); // 载入数据源
      this.chart.tooltip({
        showMarkers: false,
        shared: true,
        showCrosshairs: true
      });
      this.chart.scale({
        新增人数: {
          // tickInterval: 1,
          tickCount: maxNum > 2 ? 5 : maxNum + 1,
          minTickInterval: 1,
          nice: true,
          min: 0
          // type: 'linear'
        },
        bizDate: {
          type: 'cat'
        }
      });
      this.chart.axis('新增人数', {
        grid: {
          line: {
            type: 'line',
            style: {
              stroke: '#E4E7ED',
              lineDash: [3, 3]
            }
          }
        },
        label: {
          style: {
            fill: '#606266'
          },
          formatter: text => {
            let num = Number(text);
            return num + '人';
          }
        }
      });
      // this.chart.tooltip({
      //   showCrosshairs: true,
      //   shared: true,
      //   itemTpl: `<div style="margin-bottom: 10px;list-style:none;">
      //       <span style="background-color:{color};" class="g2-tooltip-marker"></span>
      //       {name}: {value}
      //       </div>`
      // });
      // 图例
      this.chart.legend({
        custom: true,
        position: 'top-left',
        items: [{ name: '新增人数', value: '新增人数', marker: { symbol: 'line', style: { stroke: '#4B74E8', lineWidth: 12, lineHeight: 8 } } }]
      });
      if (this.charData.length > 1) {
        this.chart
          .line()
          .position('bizDate*新增人数')
          .color('#4B74E8');
        // .tooltip('addNum', addNum => {
        //   return {
        //     name: '新增人数',
        //     value: addNum
        //   };
        // });
      } else if (this.charData.length == 1) {
        let time = new Date(this.charData[0].bizDate).getTime();
        let start = { 新增人数: null, bizDate: filters.timeStampToYmd(time - 86400000) };
        let end = { 新增人数: null, bizDate: filters.timeStampToYmd(time + 86400000) };
        let list = [start, this.charData[0], end];
        this.chart.data(list);
        this.chart
          .point()
          .position('bizDate*新增人数')
          .color('#4B74E8');
        // .tooltip('addNum', addNum => {
        //   return {
        //     name: '新增人数',
        //     value: addNum
        //   };
        // });
      }

      this.chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
      //图表绘制的最后一步，用于将图表渲染至画布
      this.chart.render();
    }
  }
};
</script>
<style lang="scss" scoped>
.chart--box {
  height: 359px;
  width: calc(100% - 20px);
}
.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>
