<template>
  <div class="ai-data-report">
    <div class="report-module">
      <dm-sub-title>活动信息</dm-sub-title>
      <activity-info @flag="getFlag" @filterJson="getFilterJson"></activity-info>
    </div>
    <div class="report-module">
      <dm-sub-title> AI外呼数据<span class="title-tip">数据实时更新</span> </dm-sub-title>
      <ai-data :ai-data-show="flags"></ai-data>
    </div>
    <div class="report-module" v-if="flags.analyseFlag == 1">
      <dm-sub-title> 活动转化数据<span class="title-tip">数据每天更新 1 次</span> </dm-sub-title>
      <conversion :member-type="flags.memberType" :filter-json="filterJson"></conversion>
    </div>
  </div>
</template>

<script>
import ActivityInfo from './ai-data-report/activity-info.vue';
import AiData from './ai-data-report/ai-data.vue';
import Conversion from './ai-data-report/conversion.vue';
// 开启活动分析时，活动信息中展示分析天数

// 开启活动分析时，AI外呼数据中展示活动费用
// 发送挂机短信时，AI外呼数据中展示短信发送总数

// 开启活动分析时，展示活动转化数据
// 会员类型为0时，活动分析中对比项支持会员类型、会员等级、金字塔会员分层
// 会员类型为1时，活动分析对比项支持客户分组
export default {
  name: 'AiDataReport',
  components: { ActivityInfo, AiData, Conversion },
  data() {
    return {
      flags: {
        memberType: 0, // 0会员筛选1会员分组
        analyseFlag: 0, // 活动分析 1开启0关闭
        smsFlag: 0 // 发送挂机短信 1是0否
      },
      filterJson: '' // 人群规则选择器id
    };
  },
  methods: {
    getFlag(flag) {
      this.flags = flag;
    },
    getFilterJson(filterJson) {
      this.filterJson = filterJson;
    }
  }
};
</script>

<style lang="scss" scoped>
.ai-data-report {
  background-color: #f7f8fa;
  .report-module {
    padding: 20px;
    background-color: #fff;
    + .report-module {
      margin-top: 16px;
    }
    .title-tip {
      margin-left: 16px;
      font-size: 12px;
      font-weight: 400;
      color: #606266;
      line-height: 17px;
    }
  }
}
</style>
