<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 class="module-title">
        AI外呼数据
        <span class="title-tip">数据实时更新</span>
        <el-button class="to-page-button" type="text" @click="toDetailPage">查看详情</el-button>
      </dm-sub-title>
      <ai-data :ai-data-show="flags"></ai-data>
    </div>
    <div class="report-module" v-if="flags.analyseFlag == 1">
      <dm-sub-title class="module-title">
        活动转化数据
        <span class="title-tip">数据每天更新 1 次</span>
        <el-button class="to-page-button" type="text" @click="toDetailPage">查看详情</el-button>
      </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';
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;
    },
    toDetailPage() {
      this.$router.push(`/ai/ai-data-detail/${this.$route.params.id}?flag=${this.flags.smsFlag}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.ai-data-report {
  background-color: #f7f8fa;
  .report-module {
    padding: 20px;
    background-color: #fff;
    + .report-module {
      margin-top: 16px;
    }
    .module-title {
      position: relative;
      .title-tip {
        margin-left: 16px;
        font-size: 12px;
        font-weight: 400;
        color: #606266;
        line-height: 17px;
      }
      .to-page-button {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 1;
        transform: translate(0, -50%);
      }
    }
  }
}
</style>
