<!--
 * @Author: your name
 * @Date: 2021-10-18 09:55:16
 * @LastEditTime: 2021-11-15 16:16:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventComparison/index.vue
-->

<template>
    <div class="ise-container">
        <div class="ec-outter">
            <ec-top ref="ect" @del="handlerDel"></ec-top>
            <eventRecommendationList ref="erdl" @change="chooseChange"></eventRecommendationList>
             <div align="center" class="ec-footer">
                <!-- <img src="../../assets/images/EventInsight/img_sjdb_nor.png"/> -->
                <img src="../../assets/images/EventInsight/img_sjdb_sel.png" @click="handlerBegin"/>
             </div>
        </div>
    </div>
</template>

<script>
import ecTop from "./ec-top"
import eventRecommendationList from "./eventRecommendationList"
export default {
    name: "iSwitchEvent",
    components: {
        ecTop,
        eventRecommendationList // 事件推荐列表
    },
    data() {
        return {
            subList: []
        }
    },
    methods: {
        // 选择事件
       chooseChange(arr) {
         this.$refs.ect.list = arr;
         this.subList = arr;
       },
       // 删除事件
       handlerDel(arr) {
           this.$nextTick(() => {
               this.$refs.erdl.chooseList = arr;
               this.subList = arr;
           })
           
       },
       // 开始对比
       handlerBegin() {
           if(this.subList.length < 2) {
               this.$message.warning('至少2个事件进行对比');
               return
           }
           this.setEComparison(this.subList);
           this.$router.push({path: '/eventComparison'})
       }
    }
};
</script>

<style lang="less" scoped>
.ise-container {
    width: 100%;
    height: auto;
    position: relative;
    background-color: rgba(0, 0, 0, 0.45);
}
.ec-outter {
    position: absolute;
    padding: 0px 16px 16px 16px;
    width: auto;
    height: auto;
    background: #010b19;
    .ec-footer {
        padding: 10px 0px;
       img {
           width: 480px;
           height: 80px;
       }
    }
}
.ec-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .ec-d1-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .ec-d1-dd2 {
            margin-left: 68px;
            margin-right: 68px;
        }
        .ec-d1-dd1 {
            width: 800px;
            height: 120px;
            background: linear-gradient(180deg, #0088c9 0%, #001c43 100%);
            border-radius: 4px;
            border: 2px solid #0091ff;
            margin-left: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .d1 {
                width: 86px;
                height: 86px;
                background-image: url("../../assets/images/EventInsight/img_xlq.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 14px;
                text-align: center;
                line-height: 86px;
                font-size: 14px;
                color: #97c6ec;
            }
            .dx1 {
                width: 86px;
                height: 86px;
                background-image: url("../../assets/images/EventInsight/img_xlvq.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 14px;
                text-align: center;
                line-height: 86px;
                font-size: 14px;
                color: #97c6ec;
            }
            .d2 {
                margin-left: 14px;
                .d2-d1 {
                    font-size: 20px;
                    color: #fff;
                    font-weight: 500;
                    width: 515px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .d2-d2 {
                    display: flex;
                    justify-content: flex-start;
                    .s1 {
                        display: block;
                        font-size: 14px;
                        color: #7b93a5;
                    }
                    .s2 {
                        display: block;
                        color: #fff;
                        font-size: 14px;
                    }
                    
                }
            }
        }
    }
}
</style>
