<template>
    <view class="profile-page">
        <!-- User Profile Section -->
        <view class="user-profile-section">
            <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" />
            <text class="user-name">{{ userInfo.name }}</text>
            <text class="user-phone">{{ userInfo.phone }}</text>
            <nut-button class="edit-profile-btn" @click="onEditProfile">
                编辑资料
            </nut-button>

            <!-- Stats Row -->
            <view class="stats-row">
                <view class="stat-item">
                    <text class="stat-number">{{ userStats.following }}</text>
                    <text class="stat-label">关注</text>
                </view>
                <view class="stat-item" @click="onOrderManagement">
                    <text class="stat-number">{{ userStats.orders }}</text>
                    <text class="stat-label">订单</text>
                </view>
                <view class="stat-item">
                    <text class="stat-number">{{ userStats.followers }}</text>
                    <text class="stat-label">被关注</text>
                </view>
            </view>
        </view>

        <!-- Quick Actions -->
        <view class="quick-actions">
            <view class="action-item" @click="onMyFavorites">
                <Heart size="22" color="#6b7280" />
                <text class="action-text">我的关注</text>
            </view>
            <view class="action-item" @click="onOrderManagement">
                <Clock size="22" color="#6b7280" />
                <text class="action-text">我的订单</text>
            </view>
        </view>

        <!-- Menu Items -->
        <view class="menu-section">
            <view class="menu-item" @click="onMessages">
                <Notice size="20" color="#6b7280" />
                <text class="menu-text">我的消息</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onMySoldVehicles">
                <Cart size="20" color="#6b7280" />
                <text class="menu-text">我卖的车</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onFeedback">
                <Message size="20" color="#6b7280" />
                <text class="menu-text">意见反馈</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onHelpCenter">
                <Tips size="20" color="#6b7280" />
                <text class="menu-text">帮助中心</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onSettings">
                <Setting size="20" color="#6b7280" />
                <text class="menu-text">设置</text>
                <Right size="18" color="#9ca3af" />
            </view>
        </view>

        <!-- 自定义TabBar -->
        <TabBar />
    </view>
</template>

<script setup>
import { ref } from 'vue'
import {
    Heart, Clock, Notice, Cart, Message, Tips, Setting, Right
} from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import TabBar from '@/components/TabBar.vue'

// 用户信息
const userInfo = ref({
    name: '张同学',
    phone: '138****8888',
    avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face'
})

// 用户统计
const userStats = ref({
    following: 12,
    orders: 8,
    followers: 24
})

/**
 * 编辑个人资料
 */
const onEditProfile = () => {
    Taro.navigateTo({
        url: '/pages/editProfile/index'
    })
}

/**
 * 我的关注
 */
const onMyFavorites = () => {
    Taro.navigateTo({
        url: '/pages/my-favorites/index'
    })
}

/**
 * 订单管理
 */
const onOrderManagement = () => {
    Taro.navigateTo({
        url: '/pages/order-management/index'
    })
}

/**
 * 我的消息
 */
const onMessages = () => {
    Taro.navigateTo({
        url: '/pages/messages/index'
    })
}

/**
 * 我卖的车
 */
const onMySoldVehicles = () => {
    Taro.navigateTo({
        url: '/pages/my-sold-vehicles/index'
    })
}

/**
 * 帮助中心
 */
const onHelpCenter = () => {
    Taro.navigateTo({
        url: '/pages/help-center/index'
    })
}

/**
 * 意见反馈
 */
const onFeedback = () => {
    Taro.navigateTo({
        url: '/pages/feedback/index'
    })
}

/**
 * 设置
 */
const onSettings = () => {
    Taro.navigateTo({
        url: '/pages/settings/index'
    })
}
</script>

<style lang="less">
.profile-page {
    min-height: 100vh;
    background-color: #f8fafc;
    padding-bottom: 240rpx;
}

.header {
    background: #fb923c;
    padding: 64rpx 0 32rpx;
    position: relative;

    .header-content {
        padding: 0 48rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
            font-size: 40rpx;
            font-weight: 700;
            color: white;
        }
    }
}

.user-profile-section {
    background: white;
    padding: 64rpx 48rpx;
    margin-bottom: 32rpx;
    text-align: center;

    .user-avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        margin-bottom: 32rpx;
    }

    .user-name {
        font-size: 40rpx;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8rpx;
        display: block;
    }

    .user-phone {
        font-size: 28rpx;
        color: #64748b;
        margin-bottom: 40rpx;
        display: block;
    }

    .edit-profile-btn {
        background-color: #f1f5f9;
        color: #475569;
        border: none;
        border-radius: 40rpx;
        padding: 16rpx 48rpx;
        font-size: 28rpx;
        margin-bottom: 48rpx;
    }

    .stats-row {
        display: flex;
        justify-content: space-around;

        .stat-item {
            text-align: center;

            .stat-number {
                font-size: 36rpx;
                font-weight: 600;
                color: #1e293b;
                display: block;
                margin-bottom: 8rpx;
            }

            .stat-label {
                font-size: 24rpx;
                color: #64748b;
            }
        }
    }
}

.quick-actions {
    background: white;
    padding: 40rpx 48rpx;
    margin-bottom: 32rpx;
    display: flex;
    justify-content: space-around;

    .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rpx;

        .action-text {
            font-size: 24rpx;
            color: #64748b;
        }
    }
}

.menu-section {
    background: white;

    .menu-item {
        display: flex;
        align-items: center;
        padding: 32rpx 48rpx;
        border-bottom: 1px solid #f1f5f9;
        gap: 32rpx;

        &:last-child {
            border-bottom: none;
        }

        .menu-text {
            flex: 1;
            font-size: 32rpx;
            color: #1e293b;
        }
    }
}
</style>