<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-header">
      <image :src="user.avatar" class="avatar"></image>
      <view class="user-info">
        <text class="username">{{ user.nickname }}</text>
        <text class="member-level">{{ user.memberLevel }}</text>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-status">
      <view 
        class="status-item"
        v-for="item in orderStatus"
        :key="item.type"
        @click="navigateToOrder(item.type)"
      >
        <text class="count">{{ item.count }}</text>
        <text class="text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view 
        class="function-item"
        v-for="item in functions"
        :key="item.text"
        @click="navigateTo(item.url)"
      >
        <uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
        <text class="text">{{ item.text }}</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import { userService, orderService } from '../../api/services.js'

export default {
  data() {
    return {
      user: {
        avatar: '/static/user/avatar.jpg',
        nickname: '',
        memberLevel: ''
      },
      orderStatus: [
        { type: 'all', text: '全部订单', count: 0 },
        { type: 'unpaid', text: '待付款', count: 0 },
        { type: 'undelivered', text: '待发货', count: 0 },
        { type: 'delivered', text: '待收货', count: 0 },
        { type: 'completed', text: '已完成', count: 0 }
      ],
      functions: [
        { icon: 'heart', text: '我的认养', url: '/pages/user/adoptions' },
        { icon: 'map', text: '我的旅行计划', url: '/pages/user/travels' },
        { icon: 'gift', text: '我的送花订单', url: '/pages/user/flowers' },
        { icon: 'star', text: '我的收藏', url: '/pages/user/favorites' },
        { icon: 'settings', text: '账户设置', url: '/pages/user/settings' }
      ]
    }
  },
  
  onShow() {
    this.loadUserProfile()
    this.loadOrderStats()
  },
  
  methods: {
    async loadUserProfile() {
      try {
        const data = await userService.getProfile()
        this.user = {
          ...this.user,
          ...data
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    },
    
    async loadOrderStats() {
      try {
        // 这里应该调用一个专门获取订单统计的接口
        // 暂时使用模拟数据
        /*
        const stats = await orderService.getStats()
        this.orderStatus = this.orderStatus.map(item => ({
          ...item,
          count: stats[item.type] || 0
        }))
        */
      } catch (error) {
        console.error('获取订单统计失败:', error)
      }
    },
    
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    
    navigateToOrder(type) {
      uni.navigateTo({ url: `/pages/user/orders?type=${type}` })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.user-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.member-level {
  font-size: 28rpx;
  color: #ff6b35;
}

.order-status {
  display: flex;
  background-color: #fff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}

.status-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.count {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

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

.function-list {
  background-color: #fff;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

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

.text {
  flex: 1;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #333;
}
</style>