<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-15 13:42:56
 -->
<!--
<funnel-chart :funnelData="funnelData"></funnel-chart>

import funnelChart from '@/components/active/funnel-chart.vue';
-->

<template>
  <div class="funnel-chart">
    <div class="funnel-chart-body flex">
      <div class="chart-left">
        <div class="trapezoid-bg flex flex-column">
          <template v-for="(item, index) in funnelData.router">
            <div
              :key="index"
              class="flex-1 flex flex-column"
            >
              <div class="flex-1 flex flex-pack-center font-12 color-606066 flex-align-center space-line"></div>
              <div
                v-if="index != funnelData.router.length-1"
                class="flex-1 flex flex-pack-center font-12 color-606066 flex-align-center inner-bg bg-f5f7fa"
              >{{item.rate ? Number(Number(item.rate) * 100).toFixed(2) : 0}}%</div>
            </div>
          </template>
        </div>
      </div>
      <div class="chart-right">
        <div class="chart-text flex flex-column">
          <template v-for="(item, index) in funnelData.router">
            <div
              :key="index"
              class="flex-1 flex flex-column"
            >
              <div class="flex-1 flex flex-align-center p-l-60  font-12 color-606066">{{item.transName}} {{ item.countNumber }} 人 <span v-if="item.transId == 32 ">, {{item.countAmount | formatThousand }} 元</span></div>
              <div
                v-if="index != funnelData.router.length-1"
                class="flex-1 flex flex-align-center bg-f5f7fa"
              ></div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="funnel-chart-title font-12 color-000">- 响应转化漏斗 -</div>
  </div>
</template>
<script>
export default {
  name: 'funnel-chart',
  props: {
    funnelData: {
      type: [Object, Array],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      router: [{"transId": 4,"transName": "会员认证"},{"transId": 2,"transName": "访问活动营销页"},{"transId": 1,"transName": "服务号关注"}]
    };
  }
  /* methods() {

  } */
};
</script>
<style lang="less" scoped>
.funnel-chart {
  // width: 595px;
  // min-width: 595px;
  width: 100%;
  height: 346px;
  padding: 40px 0 0 52px;
  margin-left: 38px;
  background: rgba(245, 247, 250, 1);
  &::after {
    overflow: hidden;
  }
  .funnel-chart-body {
    position: relative;
    height: 269px;
    &::after {
      overflow: hidden;
    }
  }
  .funnel-chart-title {
    height: 37px;
    line-height: 37px;
    padding-left: 59px;
    clear: both;
  }
  .p-l-98 {
    padding-left: 98px;
  }
  .p-l-90 {
    padding-left: 90px;
  }
  .p-l-80 {
    padding-left: 80px;
  }
  .p-l-72 {
    padding-left: 72px;
  }
  .p-l-60 {
    padding-left: 60px;
  }
  .p-l-45 {
    padding-left: 45px;
  }
  .h-16 {
    height: 16px;
    line-height: 16px;
  }
  .h-18 {
    height: 18px;
    line-height: 18px;
  }
  .h-20 {
    height: 20px;
    line-height: 20px;
  }
  .h-22 {
    height: 22px;
    line-height: 22px;
  }
  .h-23 {
    height: 23px;
    line-height: 23px;
  }
  .h-24 {
    height: 24px;
    line-height: 24px;
  }
  .h-25 {
    height: 25px;
    line-height: 25px;
  }
  .h-26 {
    height: 26px;
    line-height: 26px;
  }
  .h-27 {
    height: 27px;
    line-height: 16px;
  }
  .h-28 {
    height: 28px;
    line-height: 27px;
  }
  .h-29 {
    height: 29px;
    line-height: 29px;
  }
  .h-30 {
    height: 30px;
    line-height: 30px;
  }
  .h-32 {
    height: 32px;
    line-height: 32px;
  }
  .h-38 {
    height: 38px;
    line-height: 38px;
  }
  .chart-left {
    position: relative;
    width: 216px;
    height: 269px;
    // float: left;
    .trapezoid-bg {
      position: relative;
      width: 216px;
      height: 269px;
      background: linear-gradient(360deg, rgba(53, 195, 255, 1) 0%, rgba(47, 84, 235, 1) 100%);
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 54px solid rgba(245, 247, 250, 1);
        border-top: 269px solid transparent;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-right: 54px solid rgba(245, 247, 250, 1);
        border-top: 269px solid transparent;
      }
      .inner-bg {
        position: relative;
        // background: #e1e9fb;  //这里为内部梯形
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -3px;
          bottom: 0;
          width: 15px;
          height: 16px;
          // border-left: 8px solid rgba(245, 247, 250, 1);
          // border-top: 16px solid transparent;
          background: #f5f7fa;
          -webkit-transform: skew(14deg);
          -moz-transform: skew(14deg);
          -o-transform: skew(14deg);
          transform: skew(14deg);
        }
        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: -3px;
          bottom: 0;
          width: 15px;
          height: 16px;
          // border-right: 8px solid rgba(245, 247, 250, 1);
          // border-top: 16px solid transparent;
          background: #f5f7fa;
          -webkit-transform: skew(-14deg);
          -moz-transform: skew(-14deg);
          -o-transform: skew(-14deg);
          transform: skew(-14deg);
        }
        &.h-16 {
          &::before {
            width: 15px;
            height: 16px;
          }
          &::after {
            width: 15px;
            height: 16px;
          }
        }
        &.h-18 {
          &::before {
            width: 23px;
            height: 18px;
          }
          &::after {
            width: 23px;
            height: 18px;
          }
        }
        &.h-22 {
          &::before {
            width: 33px;
            height: 22px;
          }
          &::after {
            width: 33px;
            height: 22px;
          }
        }
        &.h-23 {
          &::before {
            width: 44px;
            height: 23px;
          }
          &::after {
            width: 44px;
            height: 23px;
          }
        }
        &.h-25 {
          &::before {
            width: 53px;
            height: 25px;
          }
          &::after {
            width: 53px;
            height: 25px;
          }
        }
      }
      .space-line {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: -36%;
          width: 55px;
          height: 1px;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          // border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          // background: #dcdfe6;
          z-index: 1;
        }
        &.r-60 {
          &::after {
            right: -60%;
          }
        }
        &.r-57 {
          &::after {
            right: -57%;
          }
        }
        &.r-52 {
          &::after {
            right: -52%;
          }
        }
        &.r-48 {
          &::after {
            right: -48%;
          }
        }
        &.r-42 {
          &::after {
            right: -42%;
          }
        }
      }
    }
  }
  .chart-right {
    position: relative;
    // width: 327px;
    // float: left;
    .chart-text {
      position: relative;
      // width: 327px;
      height: 269px;
    }
  }
}
</style>
