<template>
	<view class="health-charts-container page-container-with-bg">
		<!-- 健康状态总览卡片 -->
		<view class="health-overview-card">
			<view class="overview-header">
				<text class="pet-name">{{ petName }}的健康档案</text>
				<text class="last-update">最后更新：{{ lastUpdateTime }}</text>
			</view>

			<view class="health-summary">
				<view class="health-score-section">
					<view class="score-circle">
						<view class="circle-progress" :style="{ background: `conic-gradient(${getScoreColor()} 0deg, ${getScoreColor()} ${healthScore * 3.6}deg, #E0E0E0 ${healthScore * 3.6}deg)` }">
							<view class="circle-center">
								<text class="score-value">{{ healthScore }}</text>
								<text class="score-label">健康评分</text>
							</view>
						</view>
					</view>

					<view class="score-details">
						<view class="score-item">
							<text class="score-name">体重状态</text>
							<text class="score-points" :style="{ color: getStatusColor(weightData.status) }">{{ weightData.weightScore }}分</text>
						</view>
						<view class="score-item">
							<text class="score-name">疫苗状态</text>
							<text class="score-points" :style="{ color: getStatusColor(vaccineData.status) }">{{ vaccineData.vaccineScore }}分</text>
						</view>
						<view class="score-item">
							<text class="score-name">医疗记录</text>
							<text class="score-points" :style="{ color: getStatusColor(medicalData.status) }">{{ medicalData.medicalScore }}分</text>
						</view>
						<view class="score-item">
							<text class="score-name">生长发育</text>
							<text class="score-points" :style="{ color: getStatusColor(growthData.status) }">{{ growthData.growthScore }}分</text>
						</view>
					</view>
				</view>

				<view class="health-trend">
					<view class="trend-indicator" :class="healthTrend">
						<text class="trend-icon">{{ getTrendIcon() }}</text>
						<text class="trend-text">{{ getTrendText() }}</text>
					</view>
				</view>

				<view class="risk-alerts" v-if="riskFactors.length > 0">
					<text class="alerts-title">⚠️ 风险提醒</text>
					<view class="alert-item" v-for="risk in riskFactors" :key="risk.type" :class="risk.level">
						<text class="alert-text">{{ risk.description }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间维度切换 -->
		<view class="time-selector">
			<view class="selector-header">
				<text class="selector-title">📊 数据视图</text>
			</view>
			<view class="time-tabs">
				<view
					class="time-tab"
					:class="{ active: activeTimeRange === range.key }"
					v-for="range in timeRanges"
					:key="range.key"
					@click="switchTimeRange(range.key)"
				>
					<text class="tab-text">{{ range.label }}</text>
				</view>
			</view>
		</view>

		<!-- 多维度数据展示 -->
		<view class="data-charts-section">
			<!-- 体重变化趋势图表 -->
			<view class="chart-card">
				<view class="chart-header">
					<text class="chart-title">📈 体重变化趋势</text>
					<view class="chart-status" :class="weightData.status">
						<text class="status-text">{{ getStatusText(weightData.status) }}</text>
					</view>
				</view>
				<qiun-data-charts
					type="line"
					:opts="weightChartOpts"
					:chartData="weightChartData"
					:canvas2d="true"
					:canvasId="'weightChart'"
					:canvas-id="'weightChart'"
				/>
				<view class="chart-summary">
					<text class="summary-text">当前体重：{{ weightData.currentWeight }}kg，较上周{{ weightData.weeklyChange.change >= 0 ? '增加' : '减少' }}{{ Math.abs(weightData.weeklyChange.change) }}kg</text>
				</view>
			</view>

			<!-- 疫苗接种状态时间线 -->
			<view class="chart-card">
				<view class="chart-header">
					<text class="chart-title">💉 疫苗接种状态</text>
					<view class="chart-status" :class="vaccineData.status">
						<text class="status-text">{{ getStatusText(vaccineData.status) }}</text>
					</view>
				</view>
				<view class="vaccine-timeline">
					<view class="timeline-summary">
						<view class="summary-item">
							<text class="summary-label">完成度</text>
							<text class="summary-value">{{ vaccineData.statusSummary.completionRate }}%</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">已完成</text>
							<text class="summary-value" style="color: #4CAF50;">{{ vaccineData.statusSummary.completed }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">即将到期</text>
							<text class="summary-value" style="color: #FF9800;">{{ vaccineData.statusSummary.expiringSoon }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">已过期</text>
							<text class="summary-value" style="color: #F44336;">{{ vaccineData.statusSummary.expired }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 健康记录统计 -->
			<view class="chart-card">
				<view class="chart-header">
					<text class="chart-title">🏥 健康记录统计</text>
					<view class="chart-status" :class="medicalData.status">
						<text class="status-text">{{ getStatusText(medicalData.status) }}</text>
					</view>
				</view>
				<view class="medical-stats">
					<view class="stats-grid">
						<view class="stat-card">
							<text class="stat-number">{{ medicalData.totalRecords }}</text>
							<text class="stat-label">总记录数</text>
						</view>
						<view class="stat-card">
							<text class="stat-number">{{ medicalData.medicalVisits }}</text>
							<text class="stat-label">近期就医</text>
						</view>
						<view class="stat-card">
							<text class="stat-number">{{ medicalData.symptoms }}</text>
							<text class="stat-label">异常症状</text>
						</view>
						<view class="stat-card">
							<text class="stat-number">{{ medicalData.recentRecords }}</text>
							<text class="stat-label">近期记录</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 生长发育曲线 -->
			<view class="chart-card" v-if="showGrowthChart">
				<view class="chart-header">
					<text class="chart-title">📏 生长发育曲线</text>
					<view class="chart-status" :class="growthData.status">
						<text class="status-text">{{ getStatusText(growthData.status) }}</text>
					</view>
				</view>
				<view class="growth-info">
					<view class="growth-stage">
						<text class="stage-label">生长阶段：</text>
						<text class="stage-value">{{ getGrowthStageText() }}</text>
					</view>
					<view class="growth-summary">
						<text class="summary-text">{{ getGrowthSummary() }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- AI健康分析卡片 -->
		<view class="ai-health-analysis">
			<view class="analysis-header">
				<text class="analysis-title">🤖 AI健康分析</text>
				<view class="analysis-badge">
					<text class="badge-text">智能分析</text>
				</view>
			</view>

			<view class="analysis-content">
				<view class="analysis-section">
					<text class="section-title">📊 综合评估</text>
					<text class="section-content">{{ aiAnalysis.overallAssessment }}</text>
				</view>

				<view class="analysis-section">
					<text class="section-title">📈 趋势分析</text>
					<text class="section-content">{{ aiAnalysis.trendAnalysis }}</text>
				</view>

				<view class="analysis-section">
					<text class="section-title">💡 个性化建议</text>
					<text class="section-content">{{ aiAnalysis.recommendations }}</text>
				</view>

				<view class="analysis-section">
					<text class="section-title">🛡️ 预防措施</text>
					<text class="section-content">{{ aiAnalysis.preventiveMeasures }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import healthManager from '@/utils/healthManager.js'
import weightManager from '@/utils/weightManager.js'

export default {
	data() {
		return {
			petId: '',
			petName: '',
			petInfo: {},
			lastUpdateTime: '',

			// 健康数据
			healthScore: 85,
			healthTrend: 'stable',
			weightData: {},
			vaccineData: {},
			medicalData: {},
			growthData: {},
			riskFactors: [],

			// 时间范围
			activeTimeRange: 'month',
			timeRanges: [
				{ key: 'week', label: '近一周' },
				{ key: 'month', label: '近一月' },
				{ key: 'year', label: '近一年' },
				{ key: 'all', label: '全部历史' }
			],

			// 图表配置
			weightChartOpts: {
				color: ["#FF8A80", "#64B5F6"],
				padding: [15, 15, 0, 15],
				enableScroll: false,
				legend: {
					show: false
				},
				xAxis: {
					disableGrid: true,
					fontSize: 10,
					fontColor: "#666666"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2,
					fontSize: 10,
					fontColor: "#666666"
				},
				extra: {
					line: {
						type: "curve",
						width: 2,
						activeType: "hollow"
					}
				}
			},

			// 图表数据
			weightChartData: {},

			// AI分析
			aiAnalysis: {
				overallAssessment: '',
				trendAnalysis: '',
				recommendations: '',
				preventiveMeasures: ''
			}
		}
	},

	computed: {
		showGrowthChart() {
			return this.petInfo.age < 2 // 只为幼宠显示生长曲线
		}
	},

	onLoad(options) {
		this.petId = options.petId || ''
		this.petName = options.petName || '宠物'
		this.loadPetInfo()
		this.loadHealthData()
		this.generateChartData()
	},

	methods: {
		loadPetInfo() {
			try {
				const pets = uni.getStorageSync('pets') || []
				this.petInfo = pets.find(pet => pet.id == this.petId) || {
					id: this.petId,
					name: this.petName,
					breed: '橘猫',
					age: 2,
					gender: '公'
				}
			} catch (error) {
				console.error('加载宠物信息失败:', error)
			}
		},

		loadHealthData() {
			// 获取综合健康数据
			const healthData = healthManager.getComprehensiveHealthData(this.petId, this.petInfo)

			this.healthScore = healthData.healthScore
			this.healthTrend = healthData.healthTrend
			this.weightData = healthData.weightData
			this.vaccineData = healthData.vaccineData
			this.medicalData = healthData.medicalData
			this.growthData = healthData.growthData
			this.riskFactors = healthData.riskFactors

			// 生成AI分析
			this.aiAnalysis = healthManager.generateAIHealthAnalysis(this.petId, this.petInfo)

			// 更新最后更新时间
			this.lastUpdateTime = new Date().toLocaleString('zh-CN', {
				month: 'numeric',
				day: 'numeric',
				hour: '2-digit',
				minute: '2-digit'
			})
		},

		switchTimeRange(timeKey) {
			this.activeTimeRange = timeKey
			this.generateChartData()
		},

		generateChartData() {
			// 生成体重图表数据
			this.weightChartData = weightManager.generateChartData(this.petId, this.activeTimeRange)
		},

		getScoreColor() {
			if (this.healthScore >= 85) return '#4CAF50'
			if (this.healthScore >= 70) return '#FF9800'
			return '#F44336'
		},

		getStatusColor(status) {
			const colors = {
				'good': '#4CAF50',
				'warning': '#FF9800',
				'poor': '#F44336'
			}
			return colors[status] || '#666666'
		},

		getStatusText(status) {
			const texts = {
				'good': '良好',
				'warning': '注意',
				'poor': '需改善'
			}
			return texts[status] || '未知'
		},

		getTrendIcon() {
			const icons = {
				'improving': '📈',
				'stable': '➡️',
				'declining': '📉'
			}
			return icons[this.healthTrend] || '➡️'
		},

		getTrendText() {
			const texts = {
				'improving': '改善中',
				'stable': '保持稳定',
				'declining': '需关注'
			}
			return texts[this.healthTrend] || '稳定'
		},

		getGrowthStageText() {
			const stages = {
				'kitten': '幼猫期',
				'young': '青年期',
				'adult': '成年期',
				'senior': '老年期'
			}
			return stages[this.growthData.growthStage] || '成年期'
		},

		getGrowthSummary() {
			const stage = this.growthData.growthStage
			const weight = this.growthData.currentWeight

			if (stage === 'kitten') {
				return `幼猫期体重${weight}kg，生长发育${this.growthData.status === 'good' ? '正常' : '需关注'}`
			} else if (stage === 'senior') {
				return `老年期体重${weight}kg，建议定期体检关注健康状况`
			} else {
				return `${this.getGrowthStageText()}体重${weight}kg，整体发育状况良好`
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.health-charts-container {
	padding: 20rpx;
}

/* 健康状态总览卡片 */
.health-overview-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 28rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.overview-header {
		text-align: center;
		margin-bottom: 32rpx;

		.pet-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			margin-bottom: 8rpx;
		}

		.last-update {
			font-size: 22rpx;
			color: #999999;
			display: block;
		}
	}

	.health-summary {
		.health-score-section {
			display: flex;
			align-items: center;
			gap: 32rpx;
			margin-bottom: 32rpx;

			.score-circle {
				.circle-progress {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.circle-center {
						width: 100rpx;
						height: 100rpx;
						background: white;
						border-radius: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.score-value {
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
							line-height: 1;
						}

						.score-label {
							font-size: 20rpx;
							color: #999999;
							margin-top: 6rpx;
						}
					}
				}
			}

			.score-details {
				flex: 1;

				.score-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.score-name {
						font-size: 24rpx;
						color: #666666;
					}

					.score-points {
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}

		.health-trend {
			text-align: center;
			margin-bottom: 24rpx;

			.trend-indicator {
				display: inline-flex;
				align-items: center;
				gap: 12rpx;
				padding: 12rpx 24rpx;
				border-radius: 20rpx;

				&.improving {
					background: #E8F5E8;
					color: #4CAF50;
				}

				&.stable {
					background: #E3F2FD;
					color: #2196F3;
				}

				&.declining {
					background: #FFEBEE;
					color: #F44336;
				}

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

				.trend-text {
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}

		.risk-alerts {
			.alerts-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #FF9800;
				margin-bottom: 16rpx;
				display: block;
			}

			.alert-item {
				padding: 12rpx 16rpx;
				border-radius: 12rpx;
				margin-bottom: 8rpx;

				&:last-child {
					margin-bottom: 0;
				}

				&.high {
					background: #FFEBEE;
					border-left: 4rpx solid #F44336;
				}

				&.medium {
					background: #FFF3E0;
					border-left: 4rpx solid #FF9800;
				}

				&.low {
					background: #E8F5E8;
					border-left: 4rpx solid #4CAF50;
				}

				.alert-text {
					font-size: 22rpx;
					color: #666666;
				}
			}
		}
	}
}

/* 时间选择器 */
.time-selector {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 28rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.selector-header {
		margin-bottom: 28rpx;

		.selector-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.time-tabs {
		display: flex;
		gap: 12rpx;

		.time-tab {
			flex: 1;
			text-align: center;
			padding: 16rpx 12rpx;
			border-radius: 16rpx;
			background: rgba(255, 138, 128, 0.1);
			transition: all 0.3s ease;

			&.active {
				background: #FF8A80;

				.tab-text {
					color: white;
				}
			}

			&:active {
				transform: scale(0.95);
			}

			.tab-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}
}

/* 数据图表区域 */
.data-charts-section {
	.chart-card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-radius: 28rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
		border: 1rpx solid rgba(255, 255, 255, 0.3);

		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 28rpx;

			.chart-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.chart-status {
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				font-size: 22rpx;
				font-weight: 500;

				&.good {
					background: #E8F5E8;
					color: #4CAF50;
				}

				&.warning {
					background: #FFF3E0;
					color: #FF9800;
				}

				&.poor {
					background: #FFEBEE;
					color: #F44336;
				}

				.status-text {
					font-size: 22rpx;
				}
			}
		}

		.chart-summary {
			margin-top: 20rpx;
			text-align: center;

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

/* 疫苗时间线 */
.vaccine-timeline {
	.timeline-summary {
		display: flex;
		justify-content: space-around;
		background: rgba(255, 138, 128, 0.05);
		border-radius: 20rpx;
		padding: 24rpx;

		.summary-item {
			text-align: center;

			.summary-label {
				font-size: 20rpx;
				color: #999999;
				display: block;
				margin-bottom: 8rpx;
			}

			.summary-value {
				font-size: 28rpx;
				font-weight: bold;
				display: block;
			}
		}
	}
}

/* 医疗统计 */
.medical-stats {
	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;

		.stat-card {
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
			padding: 20rpx;
			text-align: center;

			.stat-number {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF8A80;
				display: block;
				margin-bottom: 8rpx;
			}

			.stat-label {
				font-size: 20rpx;
				color: #999999;
				display: block;
			}
		}
	}
}

/* 生长信息 */
.growth-info {
	.growth-stage {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.stage-label {
			font-size: 24rpx;
			color: #999999;
		}

		.stage-value {
			font-size: 24rpx;
			font-weight: bold;
			color: #FF8A80;
		}
	}

	.growth-summary {
		background: rgba(255, 138, 128, 0.05);
		border-radius: 16rpx;
		padding: 20rpx;

		.summary-text {
			font-size: 24rpx;
			color: #666666;
			line-height: 1.5;
		}
	}
}

/* AI健康分析 */
.ai-health-analysis {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 28rpx;
	padding: 32rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.analysis-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28rpx;

		.analysis-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.analysis-badge {
			background: linear-gradient(135deg, #64B5F6, #81C784);
			border-radius: 20rpx;
			padding: 8rpx 16rpx;

			.badge-text {
				font-size: 20rpx;
				color: white;
				font-weight: 500;
			}
		}
	}

	.analysis-content {
		.analysis-section {
			margin-bottom: 24rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.section-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 12rpx;
				display: block;
			}

			.section-content {
				font-size: 24rpx;
				color: #666666;
				line-height: 1.6;
				display: block;
			}
		}
	}
}
</style>
