<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) => {
                    if (r.data.resultCode == 1) {
                        this.r = r.data.data;
                    }
                });
            },
            goBirth(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>