<template>
  <div>
    <el-select class="contrast" placeholder="选择对比项" clearable>
      <el-option v-for="el in contrast" :key="el.value" :value="el.value" :label="el.label"></el-option>
    </el-select>
    <div class="chart-box">
      <div class="chart-member-count" id="chart-member-count"></div>
      <el-row :gutter="20" class="target-list">
        <el-col :span="index == 0 ? 24 : 12" v-for="(el, index) in targetList" :key="index">
          <target-group :data-list="el"></target-group>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getPlanStatistics } from '@/service/api/aiApi.js';
import { numFormat } from '@/utils/index.js';
import TargetGroup from './target-group.vue';
export default {
  name: 'Conversion',
  components: { TargetGroup },
  data() {
    return {
      activityId: '',
      planId: '',
      contrast: [
        { label: '会员类型', value: 'type' },
        { label: '会员等级', value: 'level' },
        { label: '金字塔会员分层', value: 'fixed' },
        { label: '客户分组', value: 'group' }
      ],
      targetList: [
        [
          {
            label: '活动目标(销售额)',
            unit: '元',
            value: '',
            key: 'activityTargetSale',
            type: 'amount'
          },
          {
            label: '实际达成(销售额)',
            unit: '元',
            value: '',
            key: 'actualSale',
            type: 'amount'
          },
          {
            label: '实际达成率',
            value: '',
            key: 'actualReachRate',
            type: 'rate'
          }
        ],
        [
          {
            label: '活动费用',
            tips: '不包含短信发送失败退回金额',
            unit: '元',
            value: '',
            key: 'activityCost',
            type: 'amount'
          },
          {
            label: 'ROI',
            value: '1:88',
            key: 'ROI',
            type: 'rate'
          }
        ],
        [
          {
            label: '客单价',
            unit: '元',
            value: '',
            key: 'perCustomerTransaction',
            type: 'amount'
          },
          {
            label: '连带率',
            value: '',
            key: 'associatedPurchaseRate',
            type: 'number'
          }
        ]
      ]
    };
  },
  created() {
    this.activityId = this.$route.params.id;
    this.planId = this.$route.query.planId;
    this.getPlanStatistics();
  },
  methods: {
    getPlanStatistics() {
      getPlanStatistics({ activityId: this.activityId, planId: this.planId }).then(res => {
        const targetData = Array.isArray(res.result) && res.result.length > 0 ? res.result[0] : {};
        this.targetList = this.targetList.map(el => {
          return el.map(item => {
            const value = targetData[item.key];
            switch (item.type) {
              case 'number':
                item.value = typeof value == 'number' ? numFormat(value) : '--';
                break;
              case 'amount':
                item.value = typeof value == 'number' ? numFormat(value) : '--';
                break;
              case 'rate':
                item.value = value == null ? '--' : value;
                break;
            }
            return item;
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contrast {
  margin-top: 16px;
  width: 160px;
}
.chart-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .chart-member-count,
  .target-list {
    flex-shrink: 0;
    width: 50%;
    min-height: 332px;
  }
}
</style>
