<template>
    <div class="container center-content">
        <div class="content">
            <!-- :default-active="NavActive" -->
            <el-menu
                :default-openeds="openeds"
                :collapse-transition="false"
                default-active="/accountdata"
                router
                class="aside-menu"
                text-color="#939599"
                active-text-color="#fdfb60"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <img class="icon" src="../../assets/user/icon_yonghuxinxi@3x.png" alt="" />
                        <span>用户信息</span>
                    </template>
                </el-submenu>
                <el-menu-item index="/accountdata">资料与账号</el-menu-item>
                <!-- <el-menu-item index="/address">地址管理</el-menu-item> -->
                <el-menu-item index="/give">我赞过的</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <img class="icon" src="../../assets/user/icon_jiaoyixinxi@3x.png" alt="" />
                        <span>交易信息</span>
                    </template>
                </el-submenu>
                <el-menu-item index="/collectionorder">藏品订单</el-menu-item>
                <el-menu-item index="/payrecord">支付记录</el-menu-item>
                <el-menu-item index="/transactionordes">交易记录</el-menu-item>
                <el-menu-item index="/ordervalue">价值证明</el-menu-item>
                <!-- <el-submenu index="3">
                    <template slot="title">
                        <img class="icon" src="../../assets/user/gongxu_icon_xuqiuxinxi@3x.png" alt="" />
                        <span>铸造信息</span>
                    </template>
                </el-submenu> -->
            </el-menu>
            <div class="main">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            openeds: ['2'],
            uniqueOpened: false
            // NavActive: ''
        };
    },
    methods: {
        handleSelect(index) {
            this.NavActive = index;
            console.log(this.NavActive);
        }
    }
    // watch: {
    //     $route(index) {
    //         console.log(index);
    //         let path = index.path;
    //         // let path = index.path.substr(1);
    //         this.handleSelect(path);
    //     }
    // }
};
</script>
<style lang="less" scoped>
.container {
    padding-bottom: 200px;

    /deep/ .el-menu {
        width: 200px;
        background: #1c1e26 !important;
        margin-right: 30px;
        .el-submenu__title {
            background: #1c1e26 !important;
            color: #ffffff !important;
            font-size: 18px !important;
            margin-left: 4px !important;
            .el-submenu__icon-arrow {
                &::before {
                    content: '';
                }
            }
        }
        .el-menu-item {
            height: 60px !important;
            line-height: 60px !important;
            margin-bottom: 10px !important;
            background: #1c1e26 !important;
            font-size: 16px;
            padding-left: 56px !important;
            span {
                color: #ffffff !important;
                font-size: 18px !important;
            }
        }
    }
    .el-menu .is-active {
        &::before {
            width: 3px;
            height: 36px;
            background: linear-gradient(90deg, #fdfb60 0%, #fdfb60 0%, #ff8f3e 100%);
            border-radius: 2px;
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
        }
    }
    .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        font-family: ZhenyanGB-Regular, ZhenyanGB;
        padding: 60px 0;
    }
    .content {
        display: flex;
        margin-top: 50px;
        .main {
            .flex-col();
            background: #1c1e26 !important;
            flex-grow: 1;
            min-height: 1100px;
        }
    }
}
</style>
