<template>
  <view class="student-home">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" />
        <view class="info">
          <text class="name">{{ userInfo.name }}</text>
          <text class="student-id">学号: {{ userInfo.studentId }}</text>
          <text class="class">{{ userInfo.class }}</text>
        </view>
      </view>
      <view class="balance-info" @click="goToBalance">
        <text class="balance-label">余额</text>
        <text class="balance-amount">￥{{ userInfo.balance }}</text>
      </view>
    </view>

    <!-- 快速操作区 -->
    <view class="quick-actions">
      <view class="action-item" @click="goToNFCPay">
        <image class="action-icon" src="/static/icons/nfc-pay.png" />
        <text class="action-text">NFC支付</text>
      </view>
      <view class="action-item" @click="goToQRCode">
        <image class="action-icon" src="/static/icons/qr-code.png" />
        <text class="action-text">付款码</text>
      </view>
      <view class="action-item" @click="goToRecharge">
        <image class="action-icon" src="/static/icons/recharge.png" />
        <text class="action-text">充值</text>
      </view>
      <view class="action-item" @click="goToTransactions">
        <image class="action-icon" src="/static/icons/history.png" />
        <text class="action-text">消费记录</text>
      </view>
    </view>

    <!-- 校园服务 -->
    <view class="campus-services">
      <view class="section-title">校园服务</view>
      <view class="service-grid">
        <view class="service-item" @click="goToCanteen">
          <image class="service-icon" src="/static/icons/restaurant.png" />
          <text class="service-name">饭堂消费</text>
        </view>
        <view class="service-item" @click="goToShop">
          <image class="service-icon" src="/static/icons/shop.png" />
          <text class="service-name">小卖部</text>
        </view>
        <view class="service-item" @click="goToLibrary">
          <image class="service-icon" src="/static/icons/library.png" />
          <text class="service-name">图书借阅</text>
        </view>
        <view class="service-item" @click="goToAccessLog">
          <image class="service-icon" src="/static/icons/access.png" />
          <text class="service-name">进出记录</text>
        </view>
      </view>
    </view>

    <!-- 今日数据 -->
    <view class="today-data">
      <view class="section-title">今日数据</view>
      <view class="data-cards">
        <view class="data-card">
          <text class="data-value">{{ todayData.consumption }}</text>
          <text class="data-label">今日消费</text>
        </view>
        <view class="data-card">
          <text class="data-value">{{ todayData.transactions }}</text>
          <text class="data-label">交易次数</text>
        </view>
        <view class="data-card">
          <text class="data-value">{{ todayData.access }}</text>
          <text class="data-label">进出次数</text>
        </view>
      </view>
    </view>

    <!-- 营养分析 -->
    <view class="nutrition-section" @click="goToNutrition">
      <view class="section-title">营养分析</view>
      <view class="nutrition-summary">
        <view class="nutrition-item">
          <text class="nutrition-label">今日卡路里</text>
          <text class="nutrition-value">{{ nutritionData.calories }}kcal</text>
        </view>
        <view class="nutrition-item">
          <text class="nutrition-label">营养均衡度</text>
          <text class="nutrition-value">{{ nutritionData.balance }}%</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        studentId: '2024001',
        class: '计算机科学与技术1班',
        avatar: '',
        balance: 156.80
      },
      todayData: {
        consumption: '25.50',
        transactions: 3,
        access: 8
      },
      nutritionData: {
        calories: 1850,
        balance: 85
      }
    }
  },
  onLoad() {
    this.loadUserInfo()
    this.loadTodayData()
    this.loadNutritionData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    loadUserInfo() {
      // 加载用户信息
      uni.request({
        url: '/api/v1/student/profile',
        success: (res) => {
          this.userInfo = res.data
        }
      })
    },
    loadTodayData() {
      // 加载今日数据
      uni.request({
        url: '/api/v1/student/today-stats',
        success: (res) => {
          this.todayData = res.data
        }
      })
    },
    loadNutritionData() {
      // 加载营养数据
      uni.request({
        url: '/api/v1/student/nutrition',
        success: (res) => {
          this.nutritionData = res.data
        }
      })
    },
    refreshData() {
      Promise.all([
        this.loadUserInfo(),
        this.loadTodayData(),
        this.loadNutritionData()
      ]).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    goToBalance() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/balance' })
    },
    goToNFCPay() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/nfc-pay' })
    },
    goToQRCode() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/qr-code' })
    },
    goToRecharge() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/recharge' })
    },
    goToTransactions() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/transactions' })
    },
    goToCanteen() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/canteen' })
    },
    goToShop() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/shop' })
    },
    goToLibrary() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/library' })
    },
    goToAccessLog() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/access-log' })
    },
    goToNutrition() {
      uni.navigateTo({ url: '/pages/mall/nfc/student/nutrition' })
    }
  }
}
</script>

<style>
.student-home {
  padding: 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.user-card {
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

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

.name {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.student-id, .class {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  margin-bottom: 4rpx;
}

.balance-info {
  text-align: right;
}

.balance-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
  display: block;
  margin-bottom: 8rpx;
}

.balance-amount {
  color: white;
  font-size: 36rpx;
  font-weight: bold;
}

.quick-actions {
  display: flex;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  justify-content: space-around;
}

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

.action-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 12rpx;
}

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

.campus-services, .today-data, .nutrition-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.service-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 12rpx;
}

.service-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.data-cards {
  display: flex;
  justify-content: space-around;
}

.data-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #007AFF;
  margin-bottom: 8rpx;
}

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

.nutrition-summary {
  display: flex;
  justify-content: space-around;
}

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

.nutrition-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.nutrition-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #28a745;
}
</style>
