<template>
<div class="cc_b_left">
    <div class="menu_container">
        <div :class="['cc_b_l_menu', { active: activeMenu === 1 }]" @click="activeMenu = 1">
            <span :class="['session_icon', { active: activeMenu === 1 }]"></span>
            <div style="margin-left: 10px;margin-top: 1px;font-size: 15px;">当前会话</div>
        </div>
        <!-- <div :class="['cc_b_l_menu', { active: activeMenu === 2 }]" @click="activeMenu = 2">
            <span :class="['history_icon', { active: activeMenu === 2 }]"></span>
            <div style="margin-left: 10px;margin-top: 1px;font-size: 15px;">历史会话</div>
        </div>
        <div :class="['cc_b_l_menu', { active: activeMenu === 3 }]" @click="activeMenu = 3">
            <span :class="['mysql_icon', { active: activeMenu === 3 }]"></span>
            <div style="margin-left: 10px;margin-top: 1px;font-size: 15px;">数据库管理</div>
        </div> -->
    </div>
    <div class="fold_btn">
        <span class="more_icon"></span>
    </div>
</div>
</template>
<script>
export default{
    name:"smartMenu",
    data(){
        return{
            activeMenu: 1,
        }
    }
}
</script>
<style scope>
.cc_b_left {
    border-right: 1px solid #E4E7ED;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 13%;
}

.menu_container {
    flex: 1;
    /* 占据除折叠按钮外的所有空间 */
}
.cc_b_l_menu {
    padding: 10px;
    margin: 17px;
    border-radius: 7px;
    color: #828282;
    cursor: pointer;
    display: flex;
}

.cc_b_l_menu.active {
    background-color: #3681fc;
    color: #fff;

}

.session_icon{
    background:url('../../../../assets/icon/test/test_session.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.session_icon.active{
    background:url('../../../../assets/icon/test/test_session_active.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.history_icon{
    background:url('../../../../assets/icon/test/test_history.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.history_icon.active{
    background:url('../../../../assets/icon/test/test_history_active.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.mysql_icon{
    background:url('../../../../assets/icon/test/test_mysql.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.mysql_icon.active{
    background:url('../../../../assets/icon/test/test_mysql_active.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
}
.fold_btn {
    padding: 27px 20px;
    cursor: pointer;
    border-top: 1px solid #E4E7ED;
    margin-top: auto;
    /* 确保折叠按钮在底部 */
}
.more_icon{
    background:url('../../../../assets/icon/test/test_more.png') no-repeat;
    width: 14px;
    height: 14px;
    display: inline-block;
    background-size: contain;
    cursor: pointer;
}
</style>