<template>
    <view class="profile-page">
        <!-- User Profile Section -->
        <view class="user-profile-section">
            <image :src="userInfo.avatar_url || defaultAvatar" class="user-avatar" mode="aspectFill" />
            <text class="user-name">{{ userInfo.nickname }}</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">{{ userInfo.follower_count }}</text>
                    <text class="stat-label">关注</text>
                </view>
                <view class="stat-item" @click="onOrderManagement">
                    <text class="stat-number">{{ userInfo.order_count }}</text>
                    <text class="stat-label">订单</text>
                </view>
                <view class="stat-item">
                    <text class="stat-number">{{ userInfo.favorite_count }}</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="onMyCar">
                <Cart size="20" color="#6b7280" />
                <text class="menu-text">我卖的车</text>
                <Right size="18" color="#9ca3af" />
            </view>

            <view class="menu-item" @click="onMyAuthCar">
                <StarN 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>

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

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

// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

// 用户信息
const userInfo = ref({
    nickname: '张同学',
    phone: '138****8888',
    avatar_url: '',
    follower_count: 0,
    order_count: 0,
    favorite_count: 0
})

useDidShow(async () => {
    const user = await getProfileAPI()
    if (user.code) {
        userInfo.value = user.data
    }
})

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

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

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

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

/**
 * 我卖的车
 */
const onMyCar = () => {
    Taro.navigateTo({
        url: '/pages/myCar/index'
    })
}

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

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

/**
 * 我的认证车
 */
const onMyAuthCar = () => {
    Taro.navigateTo({
        url: '/pages/myAuthCar/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>