<template>
  <div class="event-box">
    <el-row :gutter="60" style="width:100%">
        <el-col :span="12" style="border-right: 1px dotted #8BABF8">
            <div class="event-title">
                <span class="titleicon"></span>
                <span>直客营销事件</span>
            </div>
            <div class="events">
                <el-badge :value="r[0]" :max="9999" class="item">
                    <div class="event" @click="goBirth('birthdayEvent')">
                        <img src="../../assets/img/event/shengri.png" />
                        <div class="content">
                            <div class="ti">生日事件</div>
                            <el-tooltip class="item" effect="dark" content="近七日即将过生日的客户，可以向客户或者关联同行发送生日涵" placement="top">
                            <div class="desc">
                                近七日即将过生日的客户，可以向客户或者关联同行发送生日涵
                            </div>
                            </el-tooltip>
                        </div>
                    </div>
                </el-badge>
                <el-badge :value="r[1]" :max="9999" class="item">
                    <div class="event"  @click="goBirth('graduationEvent')">
                        <img src="../../assets/img/event/biye.png" />
                        <div class="content">
                            <div class="ti">毕业季事件</div>
                            <el-tooltip class="item" effect="dark" content="进入毕业季6-8月份正值初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息" placement="top">
                                <div class="desc">
                                    推荐3-6月发送一次，为考试前的加油函，6-9月发送一次为考试后的毕业恭喜函，提供初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息
                                </div>
                            </el-tooltip>
                        </div>
                    </div>
                </el-badge>
                <div class="event" @click="goBirth('festivalEvent')">
                    <img src="../../assets/img/event/jieri.png" />
                    <div class="content">
                        <div class="ti">节日事件</div>
                        <el-tooltip class="item" effect="dark" content="系统内置跨年、元旦、情人节、妇女节等等10多种节日模板，可以快速发送给客人祝福" placement="top">
                        <div class="desc">
                            系统内置跨年、元旦、情人节、妇女节等等10多种节日模板，可以快速发送给客人祝福
                        </div>
                        </el-tooltip>
                    </div>
                </div>
                 <div class="event" @click="goBirth('emergencyEvent')">
                    <img src="../../assets/img/event/jinji.png" />
                    <div class="content">
                        <div class="ti">突发事件</div>
                        <el-tooltip class="item" effect="dark" content=" 产生突发事件，例如极端天气、灾难、事故快速通知所有的客人。" placement="top">
                            <div class="desc">
                                产生突发事件，例如极端天气、灾难、事故快速通知所有的客人。
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="event" @click="goBirth('feedbackEvent')">
                    <img src="../../assets/img/event/yijian.png" />
                    <div class="content">
                        <div class="ti">意见反馈事件</div>
                        <el-tooltip class="item" effect="dark" content="客户填写了意见调查以后， 可以快速批量转发给关联同行" placement="top">
                            <div class="desc">
                                客户填写了意见调查以后， 可以快速批量转发给关联同行
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="event" @click="goBirth('nexttimeEvent')">
                    <img src="../../assets/img/event/nexttrip.png" />
                    <div class="content">
                        <div class="ti">下次出行事件</div>
                        <el-tooltip class="item" effect="dark" content="跟进客人填写的意见调查的下次出游计划，提前一个月的时间发出提醒，可以把相关产品信息发送给客人或关联同行" placement="top">
                            <div class="desc">
                               跟进客人填写的意见调查的下次出游计划，提前一个月的时间发出提醒，可以把相关产品信息发送给客人或关联同行
                            </div>
                        </el-tooltip>
                    </div>
                </div>
                
            </div>
        </el-col>
        <el-col :span="12">
            <div class="event-title">
                <span class="titleicon yellow"></span>
                <span>同行营销事件</span>
            </div>
            <div class="events">
                <div class="event" @click="goBirth('newlineEvent')">
                    <img src="../../assets/img/event/newline.png" />
                    <div class="content">
                        <div class="ti">新线路推广</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event" @click="goBirth('newseriesEvent')">
                    <img src="../../assets/img/event/newteam.png" />
                    <div class="content">
                        <div class="ti">新系列推广</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event">
                    <img src="../../assets/img/event/weidan.png" />
                    <div class="content">
                        <div class="ti">尾单发送</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                 <div class="event" @click="goBirth('newfestivalEvent')">
                    <img src="../../assets/img/event/jieri.png" />
                    <div class="content">
                        <div class="ti">节日事件</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event" @click="goBirth('happyPassbook')">
                    <img src="../../assets/img/event/fanyong.png" />
                    <div class="content">
                        <div class="ti">返佣、幸福存折通知</div>
                        <div class="desc">
                            在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
                        </div>
                    </div>
                </div>
                <div class="event" style="cursor:default;">&nbsp;</div>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      r: [0, 0],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.apipost("/api/SellEvent/GetSellEventToCCount", {}, (r) => {
        console.log(r.data);
        if (r.data.resultCode == 1) {
          this.r = r.data.data;
        }
      });
    },
    goBirth(path) {
      console.log("path", path);
      this.$router.push({
        name: path,
      });
    },
  },
};
</script>

<style>
.event-box {
}
.event-box .event-title .titleicon {
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #409efe;
  margin-right: 10px;
}
.event-box .event-title .titleicon.yellow {
  background: #ffa475;
}
.event-box .event-title {
  font-size: 14px;
  font-weight: 900;
  font-family: perfectFont;
}
.event-box .events {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: 30px;
}
.event-box .events .event {
  width: 248px;
  height: 370px;
  background: rgba(244, 245, 249, 1);
  margin-bottom: 30px;
  cursor: pointer;
}
.event-box .events .event img {
  width: 100%;
  height: 268px;
}
.event-box .events .event .content {
  height: 102px;
  padding: 19px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-top: none;
  margin-top: -4px;
}
.event-box .events .event .content .ti {
  font-size: 14px;
  font-family: perfectFont;
  font-weight: bold;
  margin-bottom: 15px;
}
.event-box .events .event .content .desc {
  height: 34px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(17, 17, 17, 1);
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
}
</style>
