<template>
    <view class="profile-page">
        <!-- 用户信息卡片 -->
        <view class="user-card">
            <view class="user-info">
                <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" />
                <view class="user-details">
                    <text class="user-name">{{ userInfo.name }}</text>
                    <text class="user-school">{{ userInfo.school }}</text>
                    <view class="user-stats">
                        <text class="stat-item">信用分: {{ userInfo.creditScore }}</text>
                        <text class="stat-item">成交: {{ userInfo.dealCount }}笔</text>
                    </view>
                </view>
            </view>
            <view class="edit-btn" @click="onEditProfile">
                <Edit size="20" color="#f97316" />
            </view>
        </view>

        <!-- 我的车辆 -->
        <view class="section">
            <view class="section-header">
                <text class="section-title">我的车辆</text>
            </view>
            <view class="vehicle-stats">
                <view class="stat-card" @click="onMyVehicles('selling')">
                    <text class="stat-number">{{ vehicleStats.selling }}</text>
                    <text class="stat-label">在售</text>
                </view>
                <view class="stat-card" @click="onMyVehicles('sold')">
                    <text class="stat-number">{{ vehicleStats.sold }}</text>
                    <text class="stat-label">已售</text>
                </view>
                <view class="stat-card" @click="onMyFavorites">
                    <text class="stat-number">{{ vehicleStats.favorites }}</text>
                    <text class="stat-label">收藏</text>
                </view>
            </view>
        </view>

        <!-- 功能菜单 -->
        <view class="menu-section">
            <view class="menu-item" @click="onOrderManagement">
                <view class="menu-icon">
                    <Cart size="20" color="#f97316" />
                </view>
                <text class="menu-text">订单管理</text>
                <Right size="16" color="#9ca3af" />
            </view>
            
            <view class="menu-item" @click="onCertification">
                <view class="menu-icon">
                    <Service size="20" color="#f97316" />
                </view>
                <text class="menu-text">车辆认证</text>
                <view class="certification-badge">
                    <text class="badge-text">{{ userInfo.isCertified ? '已认证' : '未认证' }}</text>
                </view>
                <Right size="16" color="#9ca3af" />
            </view>
            
            <view class="menu-item" @click="onWallet">
                <view class="menu-icon">
                    <Shop size="20" color="#f97316" />
                </view>
                <text class="menu-text">我的钱包</text>
                <text class="wallet-balance">¥{{ userInfo.balance }}</text>
                <Right size="16" color="#9ca3af" />
            </view>
            
            <view class="menu-item" @click="onAddress">
                <view class="menu-icon">
                    <Location size="20" color="#f97316" />
                </view>
                <text class="menu-text">收货地址</text>
                <Right size="16" color="#9ca3af" />
            </view>
        </view>

        <!-- 服务菜单 -->
        <view class="menu-section">
            <view class="menu-item" @click="onCustomerService">
                <view class="menu-icon">
                    <Voice size="20" color="#f97316" />
                </view>
                <text class="menu-text">客服中心</text>
                <Right size="16" color="#9ca3af" />
            </view>
            
            <view class="menu-item" @click="onFeedback">
                <view class="menu-icon">
                    <Message size="20" color="#f97316" />
                </view>
                <text class="menu-text">意见反馈</text>
                <Right size="16" color="#9ca3af" />
            </view>
            
            <view class="menu-item" @click="onAbout">
                <view class="menu-icon">
                    <Tips size="20" color="#f97316" />
                </view>
                <text class="menu-text">关于我们</text>
                <Right size="16" color="#9ca3af" />
            </view>
        </view>

        <!-- 设置菜单 -->
        <view class="menu-section">
            <view class="menu-item" @click="onSettings">
                <view class="menu-icon">
                    <Setting size="20" color="#f97316" />
                </view>
                <text class="menu-text">设置</text>
                <Right size="16" color="#9ca3af" />
            </view>
        </view>

        <!-- 退出登录 -->
        <view class="logout-section">
            <button class="logout-btn" @click="onLogout">退出登录</button>
        </view>
        
        <!-- 自定义TabBar -->
        <TabBar />
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { 
    Edit, Right, Cart, Service, Shop, Location, 
    Voice, Message, Tips, Setting 
} from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import TabBar from '@/components/TabBar.vue'

// 用户信息
const userInfo = ref({
    name: '张同学',
    school: '清华大学',
    avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face',
    creditScore: 95,
    dealCount: 12,
    isCertified: true,
    balance: 1580.50
})

// 车辆统计
const vehicleStats = ref({
    selling: 3,
    sold: 8,
    favorites: 15
})

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

/**
 * 我的车辆
 * @param {string} type - 车辆类型
 */
const onMyVehicles = (type) => {
    Taro.navigateTo({
        url: `/pages/my-vehicles/index?type=${type}`
    })
}

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

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

/**
 * 车辆认证
 */
const onCertification = () => {
    if (userInfo.value.isCertified) {
        Taro.navigateTo({
            url: '/pages/certification-status/index'
        })
    } else {
        Taro.navigateTo({
            url: '/pages/certification-apply/index'
        })
    }
}

/**
 * 我的钱包
 */
const onWallet = () => {
    Taro.navigateTo({
        url: '/pages/wallet/index'
    })
}

/**
 * 收货地址
 */
const onAddress = () => {
    Taro.navigateTo({
        url: '/pages/address/index'
    })
}

/**
 * 客服中心
 */
const onCustomerService = () => {
    Taro.showActionSheet({
        itemList: ['在线客服', '电话客服', '常见问题'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 在线客服
                Taro.navigateTo({
                    url: '/pages/online-service/index'
                })
            } else if (res.tapIndex === 1) {
                // 电话客服
                Taro.makePhoneCall({
                    phoneNumber: '400-123-4567'
                })
            } else if (res.tapIndex === 2) {
                // 常见问题
                Taro.navigateTo({
                    url: '/pages/faq/index'
                })
            }
        }
    })
}

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

/**
 * 关于我们
 */
const onAbout = () => {
    Taro.navigateTo({
        url: '/pages/about/index'
    })
}

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

/**
 * 退出登录
 */
const onLogout = () => {
    Taro.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 清除用户数据
                Taro.clearStorageSync()
                
                // 跳转到登录页
                Taro.redirectTo({
                    url: '/pages/auth/index'
                })
                
                Taro.showToast({
                    title: '已退出登录',
                    icon: 'success'
                })
            }
        }
    })
}
</script>

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

.user-card {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    padding: 24px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
    margin-right: 16px;
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    display: block;
    margin-bottom: 4px;
}

.user-school {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: 8px;
}

.user-stats {
    display: flex;
    gap: 16px;
}

.stat-item {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
}

.edit-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.edit-btn:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.3);
}

.section {
    background-color: #ffffff;
    margin: 12px 16px;
    border-radius: 12px;
    padding: 20px;
}

.section-header {
    margin-bottom: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    display: block;
}

.vehicle-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stat-card {
    text-align: center;
    padding: 16px 8px;
    background-color: #fef7ed;
    border-radius: 8px;
    border: 1px solid #fed7aa;
    transition: all 0.2s;
}

.stat-card:active {
    transform: scale(0.95);
    background-color: #fef3e2;
}

.stat-number {
    font-size: 24px;
    font-weight: 700;
    color: #f97316;
    display: block;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
    display: block;
}

.menu-section {
    background-color: #ffffff;
    margin: 12px 16px;
    border-radius: 12px;
    overflow: hidden;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:active {
    background-color: #f9fafb;
}

.menu-icon {
    width: 40px;
    height: 40px;
    background-color: #fef7ed;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.menu-text {
    flex: 1;
    font-size: 16px;
    color: #374151;
}

.certification-badge {
    margin-right: 8px;
}

.badge-text {
    font-size: 12px;
    color: #059669;
    background-color: #d1fae5;
    padding: 4px 8px;
    border-radius: 12px;
}

.wallet-balance {
    font-size: 16px;
    font-weight: 600;
    color: #f97316;
    margin-right: 8px;
}

.logout-section {
    margin: 24px 16px;
}

.logout-btn {
    width: 100%;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #f87171;
    border-radius: 12px;
    color: #ef4444;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
}

.logout-btn:active {
    background-color: #fef2f2;
    transform: scale(0.98);
}
</style>