<template>
    <div class="manage">
        <div class="container">
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <el-row class="content">
                <el-col :span="4">
                    <!-- <side-bar :current="current" @change="changeTab" :tabList="tabList" :title="barTitle"></side-bar> -->
                    <div class="needs_menu">
                        <div class="needs_title"><img src="../../assets/needs_icon.png" />消息中心</div>
                        <div
                            class="menu_tab"
                            v-for="(item, index) in tabList"
                            :key="index"
                            :class="{ active: routerPath === item.path }"
                            @click="$router.push(item.path)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="content_r">
                        <router-view />
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
// import SideBar from '../../components/SideBar';
export default {
    // components: { SideBar },
    name: 'messageCenter',
    data() {
        return {
            // barTitle: '消息中心',
            current: 0,
            tabList: [
                { id: 0, name: '消息', path: '/message' },
                { id: 0, name: '回复', path: '/reply' },
                { id: 0, name: '点赞', path: '/giveLike' }
            ]
        };
    },
    // created() {
    //     // if (this.$route.params.selectTab) {
    //     //     this.current = this.$route.params.selectTab;
    //     //     console.log(this.$route.params.selectTab);
    //     // }
    // },
    // methods: {
    //     // changeTab(index, e) {
    //     //     this.current = index;
    //     //     this.$router.push(this.tabList[this.current].path);
    //     // }
    // },
    computed: {
        routerPath() {
            return this.$route.path;
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
}
.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}
.content_r {
    margin-left: 20px;
    padding: 0 20px 40px;
    background-color: #fff;
    box-sizing: border-box;
}
.needs_menu {
    background-color: #fff;
    height: auto;
    padding-bottom: 10px;
    box-sizing: border-box;
    .needs_title {
        color: #fff;
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: url('../../assets/needs_bg.png') no-repeat center;
        background-size: 100%;
        position: relative;
        margin-bottom: 10px;
        img {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 34px;
            margin: auto;
        }
    }
    .menu_tab {
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        &.active {
            color: #bf1616;
            // background: linear-gradient(90deg, #bf1616 0%, #ffffff 100%);
            // box-shadow: 2px 0px 0px 0px #bf1616;
            border-left: 2px solid #bf1616;
            background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        }
        + .menu_tab {
            margin-top: 10px;
        }
    }
    .supply_title {
        background: url('../../assets/supply_bg.png') no-repeat center;
        background-size: 100%;
    }
}
</style>
