<template>
  <div>
    <div class="activity-info">
      <div class="activity-info-item">
        <span class="activity-info-label"> 活动名称： </span>
        {{ activityInfo.activityName || '--' }}
      </div>
      <div class="activity-info-item">
        <span class="activity-info-label">活动状态：</span>
        <i
          :class="{
            'dm-status--info': activityInfo.status == 1 || activityInfo.status == 4,
            'dm-status--primary--flash': activityInfo.status == 2,
            'dm-status--error': activityInfo.status == 3,
            'dm-status--warning': activityInfo.status == 5
          }"
        ></i>
        {{ activityInfo.status | formatStatus }}
      </div>
      <div class="activity-info-item">
        <span class="activity-info-label">外呼周期：</span>
        {{ formatDateTimeByType(activityInfo.startDate, 'yyyy-MM-dd') || '--' }}
        至
        {{ formatDateTimeByType(activityInfo.endDate, 'yyyy-MM-dd') || '--' }}
      </div>
      <div class="activity-info-item" v-if="activityInfo.analyseFlag == 1">
        <span class="activity-info-label">活动分析天数：</span>
        触达之日起 {{ activityInfo.analyseDays || '--' }} 天
      </div>
    </div>
    <div class="member-rule" v-if="scene != 5">
      <div class="member-rule-title">人群规则：</div>
      <gic-new-rule class="member-rule-list" v-if="activityInfo.memberType == 0" :memberCrowdWidgetId="activityInfo.filterJson" />
      <gic-new-member-group class="member-rule-list" v-if="activityInfo.memberType == 1" :selected-ids="activityInfo.filterJson"></gic-new-member-group>
    </div>
    <div class="member-rule" v-else>
      <div class="member-rule-title">人群规则：</div>
      <div class="numCount">
        号码导入： <span>{{ activityInfo.totalCount && activityInfo.totalCount.toLocaleString() }}</span
        >条
      </div>
    </div>
  </div>
</template>

<script>
import { formatDateTimeByType } from '@/utils/index.js';
import { getActivityInfo } from '@/service/api/aiApi.js';

export default {
  name: 'ActivityInfo',

  data() {
    return {
      activityInfo: {},
      scene: ''
    };
  },
  filters: {
    formatStatus(state) {
      const status = {
        1: '未开始',
        2: '进行中',
        3: '已终止',
        4: '已结束',
        5: '欠费暂停'
      };
      return status[state] || '--';
    }
  },
  created() {
    this.getActivityInfo();
    this.scene = this.$route.query.scene;
  },
  methods: {
    formatDateTimeByType,
    getActivityInfo() {
      const activityId = this.$route.params.id;
      const planId = this.$route.query.planId;
      getActivityInfo({ activityId, planId }).then(res => {
        this.activityInfo = res.result || {};
        this.$emit('flag', {
          memberType: this.activityInfo.memberType,
          analyseFlag: this.activityInfo.analyseFlag, //1开0关 开启活动分析开关
          smsFlag: this.activityInfo.smsFlag //挂机短信1是0否
        });
        this.$emit('filterJson', this.activityInfo.filterJson);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.activity-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  line-height: 20px;
  .activity-info-item {
    + .activity-info-item {
      margin-left: 90px;
    }
    .activity-info-label {
      margin-right: 10px;
    }
  }
}

.member-rule {
  margin-top: 20px;
  .member-rule-title {
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 20px;
  }
  .numCount {
    margin-top: 10px;
    width: 100%;
    padding: 16px;
    line-height: 20px;
    background: #f7f8fa;
    border-radius: 4px;
    span {
      font-weight: 500;
    }
  }
  .member-rule-list {
    margin-top: 10px;
    /deep/ .echo-member-group {
      padding: 15px;
      .subTitle {
        display: none;
      }
    }
  }
}
</style>
