<template>
  <div class="detail">
    <dm-sub-title line>基本信息</dm-sub-title>
    <div class="section">
      <el-descriptions>
        <el-descriptions-item label="活动场景"> {{ form.scene | sceneFilter }}</el-descriptions-item>
        <el-descriptions-item label="活动名称">{{ form.activityName }}</el-descriptions-item>
        <el-descriptions-item label="话术">{{ form.aiTemplateId }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <dm-sub-title line>活动时间</dm-sub-title>
    <div class="section">
      <el-descriptions>
        <el-descriptions-item label="外呼时间"> {{ activeTimeData.birth_type }}</el-descriptions-item>
        <el-descriptions-item label="外呼时段">{{ activeTimeData.callTime }}</el-descriptions-item>
        <el-descriptions-item label="生日有效期">{{ activeTimeData.birthDate1 }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <dm-sub-title line>人群规则</dm-sub-title>
    <div class="section">
      <el-descriptions-item label="参与人群"> {{ form.filterJson }}</el-descriptions-item>
      <el-descriptions>
        <el-descriptions-item label="预计覆盖人数">{{ form.planMemberCount }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <dm-sub-title line>外呼规则配置</dm-sub-title>
    <div class="section">
      <!--根据客户意向打标标签-->
      <div class="card">
        <div class="title">根据客户意向打标标签：开启</div>
        <div class="content">
          <table>
            <thead>
              <tr>
                <th class="tableHead">意向等级</th>
                <th class="tableHead">标签名称</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tagMatchList" :key="index">
                <td class="cell" style="width:50%;">
                  {{ item.options }}
                </td>
                <td class="cell" style="width:50%;">
                  <el-tag type="mini">{{ item.name }}</el-tag>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--根据客户意向发送挂机短信：-->
      <div class="card">
        <div class="title">根据客户意向发送挂机短信：开启</div>
        <div class="content">
          <table>
            <thead>
              <tr>
                <th class="tableHead">意向等级</th>
                <th class="tableHead">短信模板</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in smsList" :key="index">
                <td class="cell" style="width:50%;">
                  {{ item.options }}
                </td>
                <td class="cell" style="width:50%;">
                  <el-tag type="mini">{{ item.title }}</el-tag> <el-button type="text">查看短信内容</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--根据客户意向自动重拨：-->
      <div class="card">
        <div class="title">根据客户意向自动重拨：开启</div>
        <div class="content">
          <table>
            <thead>
              <tr>
                <th class="tableHead">通话状态</th>
                <th class="tableHead">重拨次数</th>
                <th class="tableHead">重拨间隔</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in recallList" :key="index">
                <td class="cell">
                  {{ item.options }}
                </td>
                <td class="cell">
                  {{ item.times }}
                </td>
                <td class="cell">
                  {{ item.interval }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <dm-sub-title line>活动分析设置</dm-sub-title>
    <div class="section">
      <el-descriptions>
        <el-descriptions-item label="活动分析"> {{ form.analyseFlag }}</el-descriptions-item>
        <el-descriptions-item label="分析天数">{{ form.analyseDays }}</el-descriptions-item>
        <el-descriptions-item label="活动目标">{{ form.analyseAmount }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import filterAvater from '@/mixins/filterAvater.js';
import { getActivityDetail } from '@/service/api/aiApi.js';
export default {
  mixins: [filterAvater],
  data() {
    return {
      form: {
        activityName: '', //活动名称
        activityId: '', //活动id
        scene: '', //活动场景 「1 客户生日」、「2 节日活动邀约」、「3 加企微好友」、「4 客户复购」、「5 其它场景」
        aiTemplateId: '', //话术模板id
        memberType: 0, // 会员类型（0：会员筛选，1：会员分组）
        filterJson: '{"list":[{"type":"or","list":[{"type":"data","data":{"key":"city","compute":"in","value":"330100"}}]},{"type":"or","list":[{"type":"data","data":{"key":"mainStoreId","compute":"in","value":"e8fdc210a59411ecb9cb9f7ed8d63716","dealKey":"storeWidget"}}]}],"type":"and"}',
        analyseFlag: 1, //活动分析
        labelFlag: 0, //是否根据客户意向打标签
        smsFlag: 0, //是否根据客户意向发送挂机短信
        recallFlag: 0, //是否根据未接通状态设置重拨
        planMemberCount: '23,098', //覆盖人数
        analyseDays: '', //分析天数
        analyseAmount: '' //销售额
      },
      activeTimeData: {
        // 活动时间的回显
        birth_days: ' ', // 生日前xx天
        birthDate1: '', //生日范围 当天
        birthDate2: '', //生日范围 当月
        birth_type: 1, //外呼时间 1当天 2当月 3生日前
        callFlag: 0, //外呼时段 0 默认 1 自定义
        callTime: [{}] // 自定义时段
      },
      tagMatchList: [
        // 打标签列表
        {
          options: 'A级(有明确意向)、B级(可能有意向)',
          id: 'fd6b44967aa647bcadfad10706244c56',
          name: '3.8活动邀约标签-高意向'
        }
      ],
      smsList: [
        {
          options: 'A级(有明确意向)、B级(可能有意向)',
          template: 'ff8080817f012035017f012193240000',
          title: '虎年促销通知'
        }
      ],
      recallList: [
        // 重播列表
        {
          options: '关机、占线',
          times: 2,
          interval: 5
        }
      ]
    };
  },
  mounted() {
    this.getActivityDetail(this.$route.params.id);
  },
  methods: {
    async getActivityDetail(activityId) {
      this.loading = true;
      const { result } = await getActivityDetail({ activityId });
      console.log(result);
      if (result) {
        const { activityId, activityName, activityPlanList, analyseAmount, analyseDays, analyseFlag, endDate, scene } = result;
        const { activityEventList, beginDate, filterJson, memberType, planId, planMemberCount, planName, sceneJson } = activityPlanList[0];
        const { aiEventId, aiTemplateId, callFlag, callTime, eventId, labelFlag, recallFlag, smsFlag } = activityEventList[0];
        const { birth_type, birth_days } = JSON.parse(sceneJson);
        this.form = {
          activityName, //活动名称
          activityId, //活动id
          scene, //活动场景 「1 客户生日」、「2 节日活动邀约」、「3 加企微好友」、「4 客户复购」、「5 其它场景」
          aiTemplateId, //话术模板id
          memberType, // 会员类型（0：会员筛选，1：会员分组）
          filterJson,
          analyseFlag, //活动分析
          labelFlag, //是否根据客户意向打标签
          smsFlag, //是否根据客户意向发送挂机短信
          recallFlag, //是否根据未接通状态设置重拨
          planMemberCount, //覆盖人数
          analyseDays, //分析天数
          analyseAmount, //销售额
          planId,
          planName,
          aiEventId,
          eventId
        };
        this.activeTimeData = {
          birth_days, // 生日前xx天
          birthDate1: [beginDate, endDate], //生日范围 当天
          birthDate2: [beginDate, endDate], //生日范围 当月
          birth_type, //外呼时间 1当天 2当月 3生日前
          callFlag, //外呼时段 0 默认 1 自定义
          callTime: callFlag == 1 ? callTime : [] // 自定义时段
        };
      }
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  margin: 10px 20px;
}
.section {
  padding: 20px 0 40px 0;
}
.card {
  margin-top: 20px;
  &:first-child {
    margin-top: 0;
  }
  .content {
    width: 100%;
    height: 114px;
    background: #f7f8fa;
    border-radius: 4px;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 16px;
    table {
      width: 100%;
    }
    .tableHead {
      text-align: left;
      font-weight: bold;
      line-height: 20px;
      color: #303133;
      font-size: 14px;
      height: 52px;
      line-height: 52px;
    }
    .cell {
      padding: 0 30px 12px 0;
    }
  }
}
</style>
