<template>
  <div class="touch" v-loading="loading">
    <div class="dm-wrap">
      <div class="title">
        <h2>触达效果</h2>
      </div>
      <touch-charts :type="0" />
      <market-list v-if="marketListData.length" :isRepeat="isRepeat" :data="marketListData" :isReference="isReference" :batchNum="batchNum" :batchTimes="batchTime" />
    </div>
    <div class="dm-wrap table">
      <div class="title">
        <span>线索转化对比</span>
      </div>
      <div class="content">
        <div class="left">
          <div class="top">
            <div class="title">整体计划</div>
            <div class="center">
              <div class="rate">
                <p>{{ clueRate[0] }}</p>
                <p>线索转化收益</p>
              </div>
            </div>
          </div>
          <div class="bottom">
            <funnel v-if="funnelData.length" nodeName="funnel1" :colorArr="['#2F54EB', '#636AF7', '#8F83FF']" :data="funnelData[0]"></funnel>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="detail" @click="toClue(1)">查看详情</div>
            <div class="allPlan_title">导购线索</div>
            <div class="allPlan_content">
              <div class="allPlan_content_left">
                <img :src="require('@/assets/img/funnelIcon1.png')" class="icon" />
                <div>
                  <p>线索转化收益</p>
                  <p>{{ clueRate[1] }}</p>
                </div>
              </div>
              <div class="rig_funnel">
                <funnel v-if="funnelData.length" nodeName="funnel2" :colorArr="['#5584FF', '#719FFF', '#90BCFF']" :data="funnelData[1]"></funnel>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="detail" @click="toClue(2)">查看详情</div>
            <div class="allPlan_title">后台线索</div>
            <div class="allPlan_content">
              <div class="allPlan_content_left">
                <img :src="require('@/assets/img/funnelIcon2.png')" class="icon" />
                <div>
                  <p>线索转化收益</p>
                  <p>{{ clueRate[2] }}</p>
                </div>
              </div>
              <div class="rig_funnel">
                <funnel v-if="funnelData.length" nodeName="funnel3" :colorArr="['#3AC2EF', '#5AE1FF', '#7AFFFF']" :data="funnelData[2]"></funnel>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import funnel from '@/views/ecm/touch-components/funnel.vue';
import marketList from '@/views/ecm/touch-components/market-list.vue';
import touchCharts from '@/views/ecm/touch-components/touch-charts.vue';
import { ecmTouchEffectTable, ecmTouchEffectFunnelChart, ecmPlanTouchConfig } from '@/service/api/ecmApi.js';
// ecmPlanTouchConfig
export default {
  name: 'ecm',
  data() {
    return {
      marketListData: [],
      funnelData: [],
      clueRate: [],
      loading: true,
      ecmPlanId: '',
      isRepeat: false, // 是否重复营销
      isReference: false,
      batchNum: 0, // 批次数量
      batchTime: '' // 批次时间
    };
  },
  components: {
    marketList,
    touchCharts,
    funnel
  },
  mounted() {
    this.ecmPlanId = this.$route.params.id;
    let planName = this.$route.query.name;
    this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '智能营销', path: '/ecm' }, { name: `${planName} - 触达效果` }]); // eslint-disable-line
    this.getMarketList();
    this.getFunnelData();
    this.getTouchConfig();
  },
  methods: {
    toClue(type) {
      let planName = this.$route.query.name;
      let id = this.$route.params.id;
      this.ecmPlanId = id;
      // type 1为导购线索 2为后台线索
      this.$router.push({ path: '/ecm/clue', query: { planName, id, type } });
    },
    getMarketList() {
      ecmTouchEffectTable({ ecmPlanId: this.ecmPlanId }).then(res => {
        if (!res.result || !res.result.length) res.result = [{ isSales: 1 }, { isSales: 0 }];
        this.marketListData = res.result.map(item => {
          item.touchRate = item.touchMbrNum * 1 && item.planMbrNum * 1 ? ((item.touchMbrNum / item.planMbrNum) * 100).toFixed(2) : 0;
          item.transformRate = item.touchMbrNum * 1 && item.planMbrNum * 1 ? ((item.convMbrNum / item.planMbrNum) * 100).toFixed(2) : 0;
          return item;
        });
        console.log(this.marketListData);
      });
    },
    getFunnelData() {
      ecmTouchEffectFunnelChart({ ecmPlanId: this.ecmPlanId }).then(res => {
        let checkData = res.result.map(item => {
          if (!item || !Object.keys(item).length) {
            // 是否为空对象或者不存在null
            item = { 转化人数: 'null', 线索转化收益: 'null', 触达人数: 'null', 计划触达人数: 'null' };
          } else {
            // 存在,将不存在的值 null 0 undefined转为字符串
            for (let key in item) {
              if (!item[key]) item[key] = item[key] + '';
            }
          }
          return item;
        });
        this.funnelData = this.formatFunnelData(checkData);
        this.clueRate = checkData.map(item => {
          if (item.线索转化收益 && parseFloat(item.线索转化收益)) {
            item = parseFloat(item.线索转化收益).toFixed(2);
            let i = item.indexOf('.');
            let before = parseInt(item.slice(0, i)).toLocaleString();
            let last = item.slice(i);
            return before + last;
          } else {
            return '0.00';
          }
        });
        this.loading = false;
      });
    },
    formatFunnelData(obj) {
      obj = obj.map((item, index) => {
        let obj = [];
        for (let i in item) {
          if (i != '收益' && i == '触达人数' && item[i] && item.计划触达人数) {
            obj.unshift({
              action: i,
              value: parseInt(item[i]) ? item[i] * 1 : 0, // 防止字符串的null
              rateAction: '触达率',
              rate: (item.触达人数 / item.计划触达人数) * 100 ? ((item.触达人数 / item.计划触达人数) * 100).toFixed(2) + '%' : '0.00%'
            });
          } else if (i != '收益' && i == '转化人数' && item[i] && item.计划触达人数) {
            obj.unshift({
              action: i,
              value: parseInt(item[i]) ? item[i] * 1 : 0,
              rateAction: '转化率',
              rate: (item.转化人数 / item.触达人数) * 100 ? ((item.转化人数 / item.触达人数) * 100).toFixed(2) + '%' : '0.00%'
            });
          } else {
            if (i != '线索转化收益') {
              obj.unshift({
                action: i,
                value: parseInt(item[i]) ? item[i] * 1 : 0
              });
            }
          }
        }
        return obj;
      });
      return obj;
    },
    getTouchConfig() {
      ecmPlanTouchConfig({ ecmPlanId: this.ecmPlanId }).then(res => {
        this.batchNum = res.result.times ? res.result.times : 0;
        if (res.result.lastTime) {
          this.batchTime = new Date(parseInt(res.result.lastTime)).toLocaleString('zh', { hour12: false }).replace(/[\/]/g, '-');
        } else {
          this.batchTime = '--';
        }
        let analyseJson = JSON.parse(res.result.analyseJson);
        if (analyseJson && analyseJson.crowd_flag == 1) {
          // 是否开启了参照组开关
          this.isReference = true;
        } else {
          this.isReference = false;
          this.marketListData.forEach((item, index) => {
            // 没开启参照组的时候删除那一组信息
            if (item.isSales == 0) this.marketListData.splice(index, 1);
          });
        }
        if (res.result.effectType == 1) this.isRepeat = true;
        else this.isRepeat = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.dm-wrap {
  padding: 16px 20px 27px !important;
  margin-bottom: 10px !important;
  .title {
    padding-left: 12px;
    margin-bottom: 36px;
    h2 {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 700;
      color: #303133;
      line-height: 22px;
    }
  }
}
.table {
  margin-top: 0 !important;
  .title {
    padding: 3px 0 0 12px;
    font-size: 16px;
    height: 22px;
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    span {
      &:nth-of-type(1) {
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #303133;
        line-height: 22px;
      }
      &:nth-of-type(2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        margin-left: 20px;
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    .left {
      width: 37%;
      min-width: 530px;
      height: 425px;
      background: #edf3ff;
      margin-right: 5px;
      .top {
        height: 185px;
        background: url('~@/assets/img/fuunelBg2.png') no-repeat;
        background-size: cover;
        box-sizing: border-box;
        .title {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #303133;
          line-height: 22px;
          padding: 16px 0 0 27px;
        }
        .rate {
          color: #000;
          height: 82px;
          p {
            &:nth-of-type(1) {
              text-align: center;
              height: 40px;
              font-size: 34px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #303133;
              line-height: 40px;
              margin: 19px auto 9px;
            }
            &:nth-of-type(2) {
              width: 84px;
              height: 20px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #303133;
              line-height: 20px;
              margin: 0 auto;
            }
          }
        }
      }
      .bottom {
        height: 240px;
        background: #f6f9ff;
        border-radius: 44px 44px 6px 6px;
        padding: 53px 52px 43px 51px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
      }
    }
    .right {
      flex: 1;
      .top,
      .bottom {
        height: 210px;
        box-sizing: border-box;
        background: #f0f5ff;
        border-radius: 6px;
        position: relative;
        background: url('~@/assets/img/fuunelBg1.png') no-repeat;
        background-size: cover;
        padding-right: 10px;
        .detail {
          position: absolute;
          width: 83px;
          height: 28px;
          background: rgba(24, 144, 255, 0.08);
          border-radius: 0px 6px 0px 100px;
          right: 0;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1890ff;
          padding: 6px 13px 5px 22px;
          box-sizing: border-box;
          cursor: pointer;
        }
        &.top {
          margin-bottom: 5px;
        }
        .allPlan_title {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFang-SC-Bold, PingFang-SC;
          font-weight: bold;
          color: #303133;
          line-height: 22px;
          padding: 16px 0 0 27px;
        }
        .allPlan_content {
          display: flex;
          width: 100%;
          .allPlan_content_left {
            display: flex;
            width: 36%;
            height: 56px;
            font-size: 14px;
            font-weight: 400;
            color: #303133;
            line-height: 20px;
            font-family: PingFangSC-Regular, PingFang SC;
            margin-top: 48px;
            padding-left: 27px;
            .icon {
              width: 56px;
              height: 56px;
              background: #dce9ff;
              border-radius: 10px;
              margin-right: 13px;
            }
            p:nth-child(1) {
              width: 84px;
              height: 20px;
              margin: 3px 0 6px;
            }
            p:nth-child(2) {
              width: 116px;
              height: 28px;
              font-size: 24px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              line-height: 28px;
            }
          }
          .rig_funnel {
            margin-top: 7px;
          }
        }
      }
    }
  }
}
</style>
