<template>
  <div class="funnel_wrap">
    <div :id="nodeName"></div>
    <div class="funnelDesc">
      <p>
        <span>{{ data[0].action }}</span>
        <span class="num">{{ data[0].value }}</span>
      </p>
      <p>
        <span class="per">{{ data[1].action }}</span>
        <span class="num">{{ data[1].value }}</span>
        <span class="rate">
          <span>/</span>
          <span>{{ data[1].rateAction }}</span>
          <span class="rateNum">{{ data[1].rate }}</span>
        </span>
      </p>
      <p>
        <span class="per">{{ data[2].action }}</span>
        <span class="num">{{ data[2].value }}</span>
        <span class="rate">
          <span>/</span>
          <span>{{ data[2].rateAction }}</span>
          <span class="rateNum">{{ data[2].rate }}</span>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
import * as G2 from '@antv/g2';
export default {
  name: 'funnel',
  props: {
    nodeName: String,
    colorArr: Array,
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.funnel();
  },
  methods: {
    funnel() {
      var chart = new G2.Chart({
        container: this.nodeName,
        forceFit: true,
        height: 144,
        padding: [0, 0, 0]
      });
      chart.source(this.data);
      chart.axis(false);
      chart.legend(false);
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li data-index={index} style="display:flex;">' + '<span style="background-color:{color};margin-top:8px;" class="g2-tooltip-marker"></span>' + '<div><p>{name} {value}</p><p>{rateAction} {rate}</p></div>' + '</li>'
      });
      chart
        .coord('rect')
        .transpose()
        .scale(1, -1);
      chart
        .intervalSymmetric()
        .position('action*value')
        .shape('funnel')
        .color('action', this.colorArr)
        .tooltip('action*value*rate*rateAction', function(action, value, rate, rateAction) {
          return {
            name: action,
            rate: rate,
            value: value,
            rateAction: rateAction
          };
        });
      chart.render();
    }
  }
};
</script>
<style scoped lang="scss">
.funnel_wrap {
  display: flex;
  #funnel1,
  #funnel2,
  #funnel3 {
    width: 219px;
    height: 144px;
  }
  .funnelDesc {
    padding: 14px 0 13px 10px;
    p {
      display: flex;
      align-items: center;
      height: 20px;
      line-height: 20px;
      &:nth-child(1) {
        // margin: 0 0 23px 15px;
        margin-bottom: 23px;
        // margin-left: 15px;
      }
      &:nth-child(2) {
        // margin: 0 0 33px -14px;
        margin-bottom: 33px;
        // margin-left: -14px;
      }
      &:nth-child(3) {
        // margin: 0 0 0 -44px;
      }
    }
    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #303133;
      white-space: nowrap;
    }
    .rate {
      height: 22px;
      display: inline-block;
      display: flex;
      justify-content: space-between;
      span:nth-child(2) {
        margin: 0 8px;
      }
    }
    .num {
      font-size: 18px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: #303133;
      line-height: 21px;
      margin: 0 8px 0 15px;
    }
    .rateNum {
      font-size: 18px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
    }
  }
}
</style>
