<template>
  <view class="parent-home">
    <!-- 家长信息头部 -->
    <view class="parent-header">
      <view class="parent-info">
        <image class="avatar" :src="parentInfo.avatar || '/static/default-avatar.png'" />
        <view class="info">
          <text class="name">{{ parentInfo.name }}</text>
          <text class="role">家长</text>
        </view>
      </view>
      <view class="notification-btn" @click="goToNotifications">
        <image class="bell-icon" src="/static/icons/bell.png" />
        <view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
      </view>
    </view>

    <!-- 孩子选择器 -->
    <view class="children-selector">
      <scroll-view scroll-x="true" class="children-scroll">
        <view class="child-item" 
              v-for="child in children" 
              :key="child.id"
              :class="{ 'active': selectedChild.id === child.id }"
              @click="selectChild(child)">
          <image class="child-avatar" :src="child.avatar || '/static/default-avatar.png'" />
          <text class="child-name">{{ child.name }}</text>
          <view class="child-balance">余额: ￥{{ child.balance }}</view>
        </view>
      </scroll-view>
    </view>

    <!-- 今日概况 -->
    <view class="today-overview">
      <view class="section-title">今日概况</view>
      <view class="overview-cards">
        <view class="overview-card">
          <text class="card-value">￥{{ todayData.consumption }}</text>
          <text class="card-label">今日消费</text>
          <text class="card-change" :class="{ 'increase': todayData.change > 0 }">
            {{ todayData.change > 0 ? '+' : '' }}{{ todayData.change }}%
          </text>
        </view>
        <view class="overview-card">
          <text class="card-value">{{ todayData.meals }}</text>
          <text class="card-label">用餐次数</text>
        </view>
        <view class="overview-card">
          <text class="card-value">{{ todayData.accessCount }}</text>
          <text class="card-label">进出次数</text>
        </view>
      </view>
    </view>

    <!-- 快速操作 -->
    <view class="quick-actions">
      <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="goToSpendingLimit">
        <image class="action-icon" src="/static/icons/limit.png" />
        <text class="action-text">消费限额</text>
      </view>
      <view class="action-item" @click="goToNutritionReport">
        <image class="action-icon" src="/static/icons/nutrition.png" />
        <text class="action-text">营养报告</text>
      </view>
      <view class="action-item" @click="goToAccessAlerts">
        <image class="action-icon" src="/static/icons/location.png" />
        <text class="action-text">位置提醒</text>
      </view>
    </view>

    <!-- 最近消费 -->
    <view class="recent-consumption">
      <view class="section-header">
        <text class="section-title">最近消费</text>
        <text class="view-more" @click="goToConsumptionMonitor">查看更多</text>
      </view>
      <view class="consumption-list">
        <view class="consumption-item" v-for="item in recentConsumption" :key="item.id">
          <view class="consumption-info">
            <text class="merchant">{{ item.merchant }}</text>
            <text class="time">{{ formatTime(item.time) }}</text>
          </view>
          <view class="consumption-amount">
            <text class="amount">-￥{{ item.amount.toFixed(2) }}</text>
            <text class="balance">余额: ￥{{ item.balanceAfter }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 营养健康 -->
    <view class="nutrition-health">
      <view class="section-title">营养健康</view>
      <view class="nutrition-summary">
        <view class="nutrition-chart">
          <canvas canvas-id="nutritionChart" class="chart"></canvas>
        </view>
        <view class="nutrition-details">
          <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 class="nutrition-item">
            <text class="nutrition-label">健康评分</text>
            <text class="nutrition-value">{{ nutritionData.score }}分</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 安全提醒 -->
    <view class="safety-alerts" v-if="safetyAlerts.length > 0">
      <view class="section-title">安全提醒</view>
      <view class="alert-item" v-for="alert in safetyAlerts" :key="alert.id">
        <image class="alert-icon" :src="alert.icon" />
        <view class="alert-content">
          <text class="alert-title">{{ alert.title }}</text>
          <text class="alert-time">{{ formatTime(alert.time) }}</text>
        </view>
        <view class="alert-status" :class="alert.type">{{ alert.status }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parentInfo: {
        name: '王女士',
        avatar: ''
      },
      unreadCount: 3,
      children: [
        {
          id: 1,
          name: '王小明',
          avatar: '',
          balance: 156.80,
          class: '三年级2班'
        },
        {
          id: 2,
          name: '王小红',
          avatar: '',
          balance: 98.50,
          class: '一年级1班'
        }
      ],
      selectedChild: {},
      todayData: {
        consumption: '25.50',
        change: -12.5,
        meals: 3,
        accessCount: 8
      },
      recentConsumption: [
        {
          id: 1,
          merchant: '第一饭堂',
          amount: 12.50,
          balanceAfter: 144.30,
          time: new Date(Date.now() - 1800000)
        },
        {
          id: 2,
          merchant: '校园便利店',
          amount: 8.80,
          balanceAfter: 156.80,
          time: new Date(Date.now() - 3600000)
        }
      ],
      nutritionData: {
        calories: 1650,
        balance: 88,
        score: 85
      },
      safetyAlerts: [
        {
          id: 1,
          title: '孩子已安全到校',
          time: new Date(Date.now() - 7200000),
          status: '正常',
          type: 'normal',
          icon: '/static/icons/check.png'
        }
      ]
    }
  },
  onLoad() {
    this.selectedChild = this.children[0] || {}
    this.loadData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    loadData() {
      this.loadTodayData()
      this.loadRecentConsumption()
      this.loadNutritionData()
      this.loadSafetyAlerts()
    },
    refreshData() {
      Promise.all([
        this.loadData()
      ]).then(() => {
        uni.stopPullDownRefresh()
      })
    },
    selectChild(child) {
      this.selectedChild = child
      this.loadData() // 重新加载选中孩子的数据
    },
    loadTodayData() {
      // 加载今日数据
      uni.request({
        url: '/api/v1/parent/today-stats',
        data: { childId: this.selectedChild.id },
        success: (res) => {
          this.todayData = res.data
        }
      })
    },
    loadRecentConsumption() {
      // 加载最近消费
      uni.request({
        url: '/api/v1/parent/recent-consumption',
        data: { childId: this.selectedChild.id },
        success: (res) => {
          this.recentConsumption = res.data
        }
      })
    },
    loadNutritionData() {
      // 加载营养数据
      uni.request({
        url: '/api/v1/parent/nutrition',
        data: { childId: this.selectedChild.id },
        success: (res) => {
          this.nutritionData = res.data
        }
      })
    },
    loadSafetyAlerts() {
      // 加载安全提醒
      uni.request({
        url: '/api/v1/parent/safety-alerts',
        data: { childId: this.selectedChild.id },
        success: (res) => {
          this.safetyAlerts = res.data
        }
      })
    },
    goToNotifications() {
      uni.navigateTo({ url: '/pages/mall/nfc/parent/notifications' })
    },
    goToRecharge() {
      uni.navigateTo({ 
        url: `/pages/mall/nfc/parent/recharge-for-child?childId=${this.selectedChild.id}` 
      })
    },
    goToSpendingLimit() {
      uni.navigateTo({ 
        url: `/pages/mall/nfc/parent/spending-limit?childId=${this.selectedChild.id}` 
      })
    },
    goToNutritionReport() {
      uni.navigateTo({ 
        url: `/pages/mall/nfc/parent/nutrition-report?childId=${this.selectedChild.id}` 
      })
    },
    goToAccessAlerts() {
      uni.navigateTo({ url: '/pages/mall/nfc/parent/access-alerts' })
    },
    goToConsumptionMonitor() {
      uni.navigateTo({ url: '/pages/mall/nfc/parent/consumption-monitor' })
    },
    formatTime(time) {
      const now = new Date()
      const diff = now - time
      const minutes = Math.floor(diff / 60000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      
      const hours = Math.floor(minutes / 60)
      if (hours < 24) return `${hours}小时前`
      
      return time.toLocaleDateString()
    }
  }
}
</script>

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

.parent-header {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.parent-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;
}

.role {
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
}

.notification-btn {
  position: relative;
  padding: 16rpx;
}

.bell-icon {
  width: 40rpx;
  height: 40rpx;
}

.badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  background: #ff3b30;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
  min-width: 24rpx;
  text-align: center;
}

.children-selector {
  margin-bottom: 20rpx;
}

.children-scroll {
  white-space: nowrap;
}

.child-item {
  display: inline-block;
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-right: 16rpx;
  text-align: center;
  min-width: 140rpx;
  border: 2rpx solid transparent;
}

.child-item.active {
  border-color: #FF6B35;
}

.child-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-bottom: 12rpx;
}

.child-name {
  display: block;
  font-size: 24rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.child-balance {
  font-size: 20rpx;
  color: #666;
}

.today-overview, .quick-actions, .recent-consumption, 
.nutrition-health, .safety-alerts {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

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

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.view-more {
  font-size: 24rpx;
  color: #FF6B35;
}

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

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

.card-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF6B35;
  margin-bottom: 8rpx;
}

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

.card-change {
  font-size: 20rpx;
  color: #28a745;
}

.card-change.increase {
  color: #dc3545;
}

.quick-actions {
  display: flex;
  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;
}

.consumption-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

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

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

.merchant {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

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

.consumption-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amount {
  font-size: 28rpx;
  color: #ff3b30;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.balance {
  font-size: 20rpx;
  color: #666;
}

.nutrition-summary {
  display: flex;
  align-items: center;
}

.nutrition-chart {
  width: 200rpx;
  height: 200rpx;
  margin-right: 30rpx;
}

.chart {
  width: 100%;
  height: 100%;
}

.nutrition-details {
  flex: 1;
}

.nutrition-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

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

.nutrition-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

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

.alert-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.alert-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.alert-time {
  font-size: 24rpx;
  color: #999;
}

.alert-status {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.alert-status.normal {
  background: #d4edda;
  color: #155724;
}

.alert-status.warning {
  background: #fff3cd;
  color: #856404;
}

.alert-status.danger {
  background: #f8d7da;
  color: #721c24;
}
</style>
