<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">
        <span class="activity-info-label">活动分析天数：</span>
        触达之日起 {{ activityInfo.analyseDays || '--' }} 天
      </div>
    </div>
    <div class="member-rule">
      <div class="member-rule-title">人群规则：</div>
      <ruleFilter class="member-rule-list" v-if="activityInfo.memberType == 0" :memberCrowdWidgetId="activityInfo.filterJson" />
      <!-- <gic-new-member-group :visible="true" :defalt-selected="memberRule.selectValue"></gic-new-member-group> -->
      <div class="member-rule-list" v-if="activityInfo.memberType == 1">
        {{ memberRule }}
        <!-- <div class="member-rule-item">生日范围：3月1日-3月31日</div>
        <div class="member-rule-item">会员等级：银卡、金卡</div>
        <div class="member-rule-item">金字塔会员分层：核心会员31-90天、潜力会员31-90天</div>
        <div class="member-rule-item">会员服务门店：会员分组(华南直营、华北直营)</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { formatDateTimeByType } from '@/utils/index.js';
import { getActivityInfo, getGroupByIds } from '@/service/api/aiApi.js';
import gicNewMemberGroup from '@/components/dm-new-member-group/index.vue';
import ruleFilter from '@/components/dm-new-rule/ruleFilter.vue';

// TODO 回显人群规则
export default {
  name: 'ActivityInfo',
  components: { gicNewMemberGroup, ruleFilter },
  data() {
    return {
      activityInfo: {},
      memberRule: ''
    };
  },
  filters: {
    formatStatus(state) {
      const status = {
        1: '未开始',
        2: '进行中',
        3: '已终止',
        4: '已结束',
        5: '欠费暂停'
      };
      return status[state] || '--';
    }
  },
  created() {
    this.getActivityInfo();
  },
  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', {
          analyseFlag: this.activityInfo.analyseFlag, //1开0关 开启活动分析开关
          smsFlag: this.activityInfo.smsFlag //挂机短信1是0否
        });
        this.$emit('filterJson', this.activityInfo.filterJson);
        this.getMemberCrowd();
      });
    },
    getMemberCrowd() {
      const { memberType, filterJson } = this.activityInfo;
      if (memberType == 1) {
        getGroupByIds({ memberTagGroupIds: filterJson }).then(res => {
          this.memberRule = res.result.filterFrontShow;
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.activity-info {
  display: flex;
  justify-content: flex-start;
  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;
  }
  .member-rule-list {
    margin-top: 10px;
    /deep/ .echo-member-group {
      padding: 15px;
      .subTitle {
        display: none;
      }
    }
    // padding: 16px;
    // background: #f7f8fa;
    // border-radius: 4px;
    // .member-rule-item {
    //   font-size: 14px;
    //   font-weight: 400;
    //   color: #303133;
    //   line-height: 20px;
    //   + .member-rule-item {
    //     margin-top: 10px;
    //   }
    // }
  }
}
</style>
