<template>
  <div class="draw">
    <div id="draw_g2"></div>
  </div>
</template>
<script>
import * as G2 from '@antv/g2';
import { ecmTouchEffectColumnDiagram, ecmGuideCluesColumnDiagram, ecmHeadCluesColumnDiagram } from '@/service/api/ecmApi.js';
export default {
  name: 'touch-charts',
  props: {
    type: String // 0是触达效果 1导购线索 2后台线索
  },
  data() {
    return {
      chartData: []
    };
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    draw() {
      let valueArr = this.chartData.filter(item => item.value >= 0);
      let rateArr = this.chartData.filter(item => item.rate >= 0);
      let valueFlag = valueArr.every(item => item.value == 0); // value是否出现全为0的情况
      let rateFlag = rateArr.every(item => item.rate == 0); // rate是否出现全为0的情况
      const chart = new G2.Chart({
        container: 'draw_g2',
        forceFit: true,
        height: 376,
        padding: [55, 90, 46, 68]
      });
      chart.source(this.chartData);
      chart.tooltip({
        showMarkers: false,
        shared: true
      });
      chart.legend({
        position: 'top',
        offsetY: -20
      });
      chart.axis('value', {
        grid: {
          type: 'line',
          lineStyle: {
            stroke: '#d9d9d9',
            lineWidth: 1,
            lineDash: [-1, -1]
          }
        }
      });
      chart.scale({
        date: {
          dataKey: 'date',
          type: 'cat'
        },
        value: {
          min: 0,
          ticks: valueFlag ? [0, 2, 4, 6, 8] : '',
          tickCount: 5
        },
        rate: {
          min: 0,
          ticks: rateFlag ? [0, 2, 4, 6, 8] : '',
          tickCount: 5
        }
      });
      chart.axis('rate', {
        label: {
          formatter: text => {
            let num = Number(text);
            if (num > 10000) {
              return num / 10000 + '万';
            }
            return num + '元';
          }
        },
        grid: null
      });
      chart
        .interval()
        .position('date*value')
        .color('name', ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', '#FF9F40'])
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0.1
          }
        ]); // eslint-disable-next-line
      chart
        .line()
        .position('date*rate')
        .color('name', ['#FF9F40']);
      chart.render();
    },
    getChartData() {
      let meth;
      if (this.type == 0) meth = ecmTouchEffectColumnDiagram;
      else if (this.type == 1) meth = ecmGuideCluesColumnDiagram;
      else meth = ecmHeadCluesColumnDiagram;
      meth({ ecmPlanId: this.$route.query.id || this.$route.params.id }).then(res => {
        this.chartData = res.result.map(item => {
          if (item.name == '线索转化收益') {
            item.rate = item.vaule * 1;
            delete item.vaule;
          } else {
            item.value = item.vaule * 1;
            delete item.vaule;
          }
          return item;
        });
        this.draw();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.draw {
  .title {
    padding-left: 12px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 700;
    color: #303133;
    line-height: 22px;
    margin-bottom: 36px;
  }
  #draw_g2 {
    height: 376px;
    margin: 0 auto;
    position: relative;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    line-height: 17px;
    &::before {
      content: '人数';
      position: absolute;
      top: 10px;
      left: 41px;
    }
    &::after {
      content: '金额';
      position: absolute;
      top: 10px;
      right: 57px;
    }
  }
}
</style>
