<template>
  <view class="profile-page">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image 
          :src="userInfo.avatar || '/static/images/default-avatar.png'" 
          class="user-avatar"
          @click="chooseAvatar"
        />
        <view class="user-details">
          <view class="user-name">{{ userInfo.nickname || '未设置昵称' }}</view>
          <view class="user-phone">{{ userInfo.phone || '未绑定手机' }}</view>
          <view class="user-location">
            <text class="location-icon">📍</text>
            <text>{{ userInfo.location || '未设置地区' }}</text>
          </view>
        </view>
        <view class="edit-btn" @click="editProfile">
          <text class="edit-icon">✏️</text>
        </view>
      </view>
      
      <!-- 统计信息 -->
      <view class="stats-row">
        <view class="stat-item" @click="goToMyPublish">
          <view class="stat-number">{{ stats.publishCount }}</view>
          <view class="stat-label">发布</view>
        </view>
        <view class="stat-item" @click="goToMyFavorites">
          <view class="stat-number">{{ stats.favoriteCount }}</view>
          <view class="stat-label">收藏</view>
        </view>
        <view class="stat-item" @click="goToMyOrders">
          <view class="stat-number">{{ stats.orderCount }}</view>
          <view class="stat-label">交易</view>
        </view>
        <view class="stat-item" @click="goToMyFollows">
          <view class="stat-number">{{ stats.followCount }}</view>
          <view class="stat-label">关注</view>
        </view>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="quick-actions">
      <view class="action-item" @click="goToPublish">
        <view class="action-icon">📝</view>
        <view class="action-text">发布牛只</view>
      </view>
      <view class="action-item" @click="goToSearch">
        <view class="action-icon">🔍</view>
        <view class="action-text">找牛只</view>
      </view>
      <view class="action-item" @click="goToMessages">
        <view class="action-icon">💬</view>
        <view class="action-text">消息</view>
        <view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
      </view>
      <view class="action-item" @click="goToWallet">
        <view class="action-icon">💰</view>
        <view class="action-text">钱包</view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-title">我的服务</view>
      <view class="menu-list">
        <view class="menu-item" @click="goToMyPublish">
          <view class="menu-left">
            <text class="menu-icon">📋</text>
            <text class="menu-text">我的发布</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToMyOrders">
          <view class="menu-left">
            <text class="menu-icon">📦</text>
            <text class="menu-text">我的交易</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToMyFavorites">
          <view class="menu-left">
            <text class="menu-icon">❤️</text>
            <text class="menu-text">我的收藏</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToMyFollows">
          <view class="menu-left">
            <text class="menu-icon">👥</text>
            <text class="menu-text">我的关注</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-section">
      <view class="menu-title">工具服务</view>
      <view class="menu-list">
        <view class="menu-item" @click="goToCalculator">
          <view class="menu-left">
            <text class="menu-icon">🧮</text>
            <text class="menu-text">价格计算器</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToMarketPrice">
          <view class="menu-left">
            <text class="menu-icon">📈</text>
            <text class="menu-text">市场行情</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToNews">
          <view class="menu-left">
            <text class="menu-icon">📰</text>
            <text class="menu-text">行业资讯</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-section">
      <view class="menu-title">设置</view>
      <view class="menu-list">
        <view class="menu-item" @click="goToSettings">
          <view class="menu-left">
            <text class="menu-icon">⚙️</text>
            <text class="menu-text">设置</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToHelp">
          <view class="menu-left">
            <text class="menu-icon">❓</text>
            <text class="menu-text">帮助与反馈</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
        
        <view class="menu-item" @click="goToAbout">
          <view class="menu-left">
            <text class="menu-icon">ℹ️</text>
            <text class="menu-text">关于我们</text>
          </view>
          <view class="menu-right">
            <text class="menu-arrow">></text>
          </view>
        </view>
      </view>
    </view>

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

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '',
        nickname: '牛老板',
        phone: '138****8888',
        location: '山东省 济南市'
      },
      stats: {
        publishCount: 12,
        favoriteCount: 8,
        orderCount: 5,
        followCount: 23
      },
      unreadCount: 3
    }
  },
  
  methods: {
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
          // 这里应该上传到服务器
          this.uploadAvatar(res.tempFilePaths[0])
        }
      })
    },
    
    // 上传头像
    uploadAvatar(filePath) {
      uni.showLoading({ title: '上传中...' })
      // 模拟上传
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '头像更新成功', icon: 'success' })
      }, 1500)
    },
    
    // 编辑个人资料
    editProfile() {
      uni.navigateTo({
        url: '/pages/profile/edit-profile'
      })
    },
    
    // 我的发布
    goToMyPublish() {
      uni.navigateTo({
        url: '/pages/profile/my-publish'
      })
    },
    
    // 我的收藏
    goToMyFavorites() {
      uni.navigateTo({
        url: '/pages/profile/my-favorites'
      })
    },
    
    // 我的交易
    goToMyOrders() {
      uni.navigateTo({
        url: '/pages/profile/my-orders'
      })
    },
    
    // 我的关注
    goToMyFollows() {
      uni.navigateTo({
        url: '/pages/profile/my-follows'
      })
    },
    
    // 发布牛只
    goToPublish() {
      uni.navigateTo({
        url: '/pages/publish/publish'
      })
    },
    
    // 搜索
    goToSearch() {
      uni.switchTab({
        url: '/pages/market/market'
      })
    },
    
    // 消息
    goToMessages() {
      uni.navigateTo({
        url: '/pages/messages/messages'
      })
    },
    
    // 钱包
    goToWallet() {
      uni.navigateTo({
        url: '/pages/wallet/wallet'
      })
    },
    
    // 价格计算器
    goToCalculator() {
      uni.navigateTo({
        url: '/pages/tools/calculator'
      })
    },
    
    // 市场行情
    goToMarketPrice() {
      uni.navigateTo({
        url: '/pages/tools/market-price'
      })
    },
    
    // 行业资讯
    goToNews() {
      uni.navigateTo({
        url: '/pages/news/news'
      })
    },
    
    // 设置
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/settings'
      })
    },
    
    // 帮助与反馈
    goToHelp() {
      uni.navigateTo({
        url: '/pages/help/help'
      })
    },
    
    // 关于我们
    goToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        }
      })
    },
    
    // 加载用户信息
    loadUserInfo() {
      // 模拟从服务器获取用户信息
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = { ...this.userInfo, ...userInfo }
      }
    },
    
    // 加载统计数据
    loadStats() {
      // 模拟从服务器获取统计数据
      // 这里可以调用API获取真实数据
    }
  },
  
  onShow() {
    this.loadUserInfo()
    this.loadStats()
  }
}
</script>

<style scoped>
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 用户信息卡片 */
.user-card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.user-phone {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.user-location {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.location-icon {
  margin-right: 8rpx;
}

.edit-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
}

.edit-icon {
  font-size: 24rpx;
}

/* 统计信息 */
.stats-row {
  display: flex;
  justify-content: space-around;
  padding-top: 30rpx;
  border-top: 1rpx solid #eee;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.stat-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

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

/* 快捷功能 */
.quick-actions {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
}

.action-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  font-size: 32rpx;
}

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

.badge {
  position: absolute;
  top: -5rpx;
  right: 15rpx;
  min-width: 32rpx;
  height: 32rpx;
  background-color: #ff4757;
  color: #fff;
  border-radius: 16rpx;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
}

/* 菜单部分 */
.menu-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.menu-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  padding: 30rpx 30rpx 20rpx;
}

.menu-list {
  padding: 0 30rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

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

.menu-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.menu-icon {
  font-size: 32rpx;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
}

.menu-right {
  display: flex;
  align-items: center;
}

.menu-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 退出登录 */
.logout-section {
  margin: 40rpx 20rpx 20rpx;
}

.logout-btn {
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  color: #ff4757;
  border: 1rpx solid #ff4757;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.logout-btn:active {
  background-color: #ff4757;
  color: #fff;
}
</style>