{include file="component/head" /}
{include file="component/header-simple" /}

<div class="profile-container">
    <div class="profile-sidebar">
        <div class="menu">
            <div class="menu-item active" data-target="profile-basic">
                <i class="layui-icon layui-icon-user"></i>
                <span>基本资料</span>
            </div>
            <div class="menu-item" data-target="profile-wallet">
                <i class="layui-icon layui-icon-wallet"></i>
                <span>我的钱包</span>
            </div>
            <div class="menu-item" data-target="profile-messages">
                <i class="layui-icon layui-icon-message"></i>
                <span>我的消息</span>
            </div>
            <div class="menu-item" data-target="profile-notifications">
                <i class="layui-icon layui-icon-notice"></i>
                <span>系统通知</span>
            </div>
            <div class="menu-item" data-target="profile-security">
                <i class="layui-icon layui-icon-password"></i>
                <span>安全设置</span>
            </div>
        </div>
    </div>

    <div class="profile-main">
        <div class="content-area">
            <!-- 个人资料 -->
            <div id="profile-basic" class="content-section active">
                {include file="user/component/basic" /}
            </div>

            <!-- 我的钱包 -->
            <div id="profile-wallet" class="content-section">
                {include file="user/component/wallet" /}
            </div>

            <!-- 我的消息 -->
            <div id="profile-messages" class="content-section">
                {include file="user/component/messages" /}
            </div>

            <!-- 系统通知 -->
            <div id="profile-notifications" class="content-section">
                {include file="user/component/notifications" /}
            </div>

            <!-- 安全设置 -->
            <div id="profile-security" class="content-section">
                {include file="user/component/security" /}
            </div>
        </div>
    </div>
</div>

<style>
    .profile-container {
        display: flex;
        max-width: 1200px;
        margin: 40px auto;
        gap: 24px;
        padding: 0 20px;
    }

    .profile-sidebar {
        width: 260px;
        flex-shrink: 0;
    }

    .menu {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        padding: 16px 0;
    }

    .menu-item {
        padding: 16px 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #666;
        transition: all 0.3s;
    }

    .menu-item:hover {
        color: #1677ff;
        background: #f5f5f5;
    }

    .menu-item.active {
        color: #1677ff;
        background: #e6f4ff;
        border-right: 3px solid #1677ff;
    }

    .menu-item .layui-icon {
        font-size: 18px;
    }

    .profile-main {
        flex: 1;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        padding: 32px;
    }

    .content-section {
        display: none;
    }

    .content-section.active {
        display: block;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
        .profile-container {
            flex-direction: column;
            margin: 20px auto;
        }

        .profile-sidebar {
            width: 100%;
        }

        .menu {
            display: flex;
            overflow-x: auto;
            padding: 8px;
        }

        .menu-item {
            flex-shrink: 0;
            border-right: none;
            border-bottom: 3px solid transparent;
        }

        .menu-item.active {
            border-right: none;
            border-bottom: 3px solid #1677ff;
        }

        .profile-main {
            padding: 20px;
        }
    }
</style>

<script>
layui.use(['jquery'], function(){
    var $ = layui.jquery;
    
    // 菜单切换
    $('.menu-item').on('click', function(){
        var target = $(this).data('target');
        
        // 移除所有active类
        $('.menu-item').removeClass('active');
        $('.content-section').removeClass('active');
        
        // 添加active类
        $(this).addClass('active');
        $('#' + target).addClass('active');
    });
});
</script>

{include file="component/foot" /}