<template>
	<view class="vaccine-container page-container-with-bg">
		<!-- 疫苗状态概览卡片 -->
		<view class="status-overview-card">
			<view class="overview-header">
				<text class="pet-name">{{ petName }}的疫苗管理</text>
				<text class="last-update">最后更新：{{ lastUpdateTime }}</text>
			</view>
			
			<view class="status-display">
				<view class="completion-circle">
					<view class="circle-progress" :style="{ background: `conic-gradient(#4CAF50 0deg, #4CAF50 ${completionRate * 3.6}deg, #E0E0E0 ${completionRate * 3.6}deg)` }">
						<view class="circle-center">
							<text class="completion-rate">{{ completionRate }}%</text>
							<text class="completion-label">完成度</text>
						</view>
					</view>
				</view>
				
				<view class="status-stats">
					<view class="stat-item">
						<text class="stat-number" style="color: #4CAF50;">{{ statusSummary.completed }}</text>
						<text class="stat-label">已完成</text>
					</view>
					<view class="stat-item">
						<text class="stat-number" style="color: #FF9800;">{{ statusSummary.expiringSoon }}</text>
						<text class="stat-label">即将到期</text>
					</view>
					<view class="stat-item">
						<text class="stat-number" style="color: #F44336;">{{ statusSummary.expired }}</text>
						<text class="stat-label">已过期</text>
					</view>
					<view class="stat-item">
						<text class="stat-number" style="color: #9E9E9E;">{{ statusSummary.missing }}</text>
						<text class="stat-label">未接种</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 疫苗分类切换 -->
		<view class="category-selector">
			<view class="selector-header">
				<text class="selector-title">💉 疫苗分类</text>
			</view>
			<view class="category-tabs">
				<view 
					class="category-tab" 
					:class="{ active: activeCategory === 'all' }"
					@click="switchCategory('all')"
				>
					<text class="tab-text">全部</text>
				</view>
				<view 
					class="category-tab" 
					:class="{ active: activeCategory === 'core' }"
					@click="switchCategory('core')"
				>
					<text class="tab-text">核心疫苗</text>
				</view>
				<view 
					class="category-tab" 
					:class="{ active: activeCategory === 'nonCore' }"
					@click="switchCategory('nonCore')"
				>
					<text class="tab-text">非核心疫苗</text>
				</view>
				<view 
					class="category-tab" 
					:class="{ active: activeCategory === 'plan' }"
					@click="switchCategory('plan')"
				>
					<text class="tab-text">接种计划</text>
				</view>
			</view>
		</view>
		
		<!-- 疫苗记录列表 -->
		<view class="vaccine-records" v-if="activeCategory !== 'plan'">
			<view class="records-header">
				<text class="records-title">📋 疫苗记录</text>
				<view class="add-record-btn" @click="addVaccineRecord">
					<text class="add-btn-text">+ 添加</text>
				</view>
			</view>
			
			<view class="records-timeline" v-if="filteredRecords.length > 0">
				<view 
					class="timeline-item" 
					v-for="record in filteredRecords" 
					:key="record.id"
				>
					<view class="timeline-dot" :class="getStatusClass(record)"></view>
					<view class="timeline-content">
						<view class="vaccine-card" :class="getStatusClass(record)">
							<view class="vaccine-header">
								<text class="vaccine-name">{{ record.vaccineName }}</text>
								<view class="vaccine-status" :class="getStatusClass(record)">
									<text class="status-text">{{ getStatusText(record) }}</text>
								</view>
							</view>
							
							<view class="vaccine-details">
								<view class="detail-row">
									<text class="detail-label">接种日期：</text>
									<text class="detail-value">{{ formatDate(record.vaccineDate) }}</text>
								</view>
								<view class="detail-row">
									<text class="detail-label">有效期至：</text>
									<text class="detail-value">{{ formatDate(record.expiryDate) }}</text>
								</view>
								<view class="detail-row" v-if="record.hospital">
									<text class="detail-label">接种医院：</text>
									<text class="detail-value">{{ record.hospital }}</text>
								</view>
								<view class="detail-row" v-if="record.batchNumber">
									<text class="detail-label">批次号：</text>
									<text class="detail-value">{{ record.batchNumber }}</text>
								</view>
								<view class="detail-row" v-if="record.note">
									<text class="detail-label">备注：</text>
									<text class="detail-value">{{ record.note }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="empty-records" v-else>
				<text class="empty-icon">💉</text>
				<text class="empty-title">暂无{{ getCategoryName() }}记录</text>
				<text class="empty-subtitle">点击添加按钮开始记录疫苗接种信息</text>
			</view>
		</view>
		
		<!-- 接种计划 -->
		<view class="vaccine-plan" v-if="activeCategory === 'plan'">
			<view class="plan-header">
				<text class="plan-title">📅 接种计划</text>
			</view>
			
			<view class="plan-list" v-if="vaccinePlan.length > 0">
				<view 
					class="plan-item" 
					v-for="plan in vaccinePlan" 
					:key="plan.vaccineType"
					:class="getPriorityClass(plan.priority)"
				>
					<view class="plan-priority" :class="getPriorityClass(plan.priority)">
						<text class="priority-text">{{ getPriorityText(plan.priority) }}</text>
					</view>
					
					<view class="plan-content">
						<text class="plan-vaccine-name">{{ plan.vaccineName }}</text>
						<text class="plan-due-date">建议接种时间：{{ formatDate(plan.nextDueDate) }}</text>
						<text class="plan-reason">{{ plan.reason }}</text>
					</view>
					
					<view class="plan-action" @click="scheduleVaccine(plan)">
						<text class="action-text">安排接种</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- AI分析卡片 -->
		<view class="ai-analysis-card">
			<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.completenessAnalysis }}</text>
				</view>
				
				<view class="analysis-section">
					<text class="section-title">⏰ 时效性分析</text>
					<text class="section-content">{{ aiAnalysis.timelinessAnalysis }}</text>
				</view>
				
				<view class="analysis-section">
					<text class="section-title">💡 个性化建议</text>
					<text class="section-content">{{ aiAnalysis.recommendations }}</text>
				</view>
				
				<view class="analysis-section" v-if="aiAnalysis.riskAssessment">
					<text class="section-title">⚠️ 风险提醒</text>
					<text class="section-content warning">{{ aiAnalysis.riskAssessment }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import vaccineManager from '@/utils/vaccineManager.js'

export default {
	data() {
		return {
			petId: '',
			petName: '',
			petInfo: {},
			lastUpdateTime: '',
			
			// 状态统计
			statusSummary: {
				completed: 0,
				expiringSoon: 0,
				expired: 0,
				missing: 0,
				total: 0,
				completionRate: 0
			},
			completionRate: 0,
			
			// 分类切换
			activeCategory: 'all',
			
			// 疫苗记录
			allRecords: [],
			filteredRecords: [],
			
			// 接种计划
			vaccinePlan: [],
			
			// AI分析
			aiAnalysis: {
				completenessAnalysis: '',
				timelinessAnalysis: '',
				recommendations: '',
				riskAssessment: ''
			}
		}
	},
	
	onLoad(options) {
		this.petId = options.petId || ''
		this.petName = options.petName || '宠物'
		this.loadPetInfo()
		this.loadVaccineData()
	},
	
	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)
			}
		},
		
		loadVaccineData() {
			// 获取疫苗记录
			this.allRecords = vaccineManager.getVaccineRecords(this.petId)
			this.filterRecords()
			
			// 获取状态统计
			this.statusSummary = vaccineManager.getVaccineStatusSummary(this.petId)
			this.completionRate = this.statusSummary.completionRate
			
			// 生成接种计划
			this.vaccinePlan = vaccineManager.generateVaccinePlan(this.petId, this.petInfo)
			
			// 生成AI分析
			this.aiAnalysis = vaccineManager.generateAIAnalysis(this.petId, this.petInfo)
			
			// 更新最后更新时间
			if (this.allRecords.length > 0) {
				const latestRecord = this.allRecords.sort((a, b) => new Date(b.vaccineDate) - new Date(a.vaccineDate))[0]
				const lastDate = new Date(latestRecord.vaccineDate)
				this.lastUpdateTime = `${lastDate.getMonth() + 1}-${lastDate.getDate()} ${lastDate.getHours()}:${lastDate.getMinutes().toString().padStart(2, '0')}`
			} else {
				this.lastUpdateTime = '暂无记录'
			}
		},
		
		switchCategory(category) {
			this.activeCategory = category
			this.filterRecords()
		},
		
		filterRecords() {
			if (this.activeCategory === 'all') {
				this.filteredRecords = this.allRecords
			} else {
				this.filteredRecords = this.allRecords.filter(record => record.category === this.activeCategory)
			}
			
			// 按接种日期倒序排列
			this.filteredRecords.sort((a, b) => new Date(b.vaccineDate) - new Date(a.vaccineDate))
		},
		
		getCategoryName() {
			const categoryNames = {
				'all': '疫苗',
				'core': '核心疫苗',
				'nonCore': '非核心疫苗'
			}
			return categoryNames[this.activeCategory] || '疫苗'
		},
		
		getStatusClass(record) {
			const status = vaccineManager.getVaccineStatus(record)
			return status // 'valid', 'expiring', 'expired'
		},
		
		getStatusText(record) {
			const status = vaccineManager.getVaccineStatus(record)
			const statusTexts = {
				'valid': '有效',
				'expiring': '即将到期',
				'expired': '已过期'
			}
			return statusTexts[status] || '未知'
		},
		
		getPriorityClass(priority) {
			return priority // 'high', 'medium', 'low'
		},
		
		getPriorityText(priority) {
			const priorityTexts = {
				'high': '紧急',
				'medium': '建议',
				'low': '可选'
			}
			return priorityTexts[priority] || '未知'
		},
		
		formatDate(dateStr) {
			if (!dateStr) return ''
			const date = new Date(dateStr)
			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
		},
		
		addVaccineRecord() {
			uni.showModal({
				title: '添加疫苗记录',
				content: '跳转到添加疫苗记录页面？',
				success: (res) => {
					if (res.confirm) {
						// 这里可以跳转到添加疫苗记录的页面
						// 或者显示一个表单弹窗
						this.showAddVaccineForm()
					}
				}
			})
		},
		
		showAddVaccineForm() {
			// 简化版添加功能，实际项目中可以创建专门的表单页面
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			})
		},
		
		scheduleVaccine(plan) {
			uni.showModal({
				title: '安排接种',
				content: `是否要安排${plan.vaccineName}的接种？`,
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '已添加到日程',
							icon: 'success'
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.vaccine-container {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
	min-height: 100vh;
	padding: 20rpx;
}

/* 疫苗状态概览卡片 */
.status-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;
		}
	}

	.status-display {
		display: flex;
		align-items: center;
		gap: 32rpx;

		.completion-circle {
			.circle-progress {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

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

					.completion-rate {
						font-size: 24rpx;
						font-weight: bold;
						color: #4CAF50;
						line-height: 1;
					}

					.completion-label {
						font-size: 18rpx;
						color: #999999;
						margin-top: 4rpx;
					}
				}
			}
		}

		.status-stats {
			flex: 1;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16rpx;

			.stat-item {
				text-align: center;

				.stat-number {
					font-size: 28rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 6rpx;
				}

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

/* 分类选择器 */
.category-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;
		}
	}

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

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

/* 疫苗记录列表 */
.vaccine-records {
	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);

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

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

		.add-record-btn {
			background: linear-gradient(135deg, #FF8A80, #FFB6C1);
			border-radius: 20rpx;
			padding: 12rpx 24rpx;
			transition: all 0.3s ease;

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

			.add-btn-text {
				font-size: 24rpx;
				color: white;
				font-weight: 500;
			}
		}
	}

	.records-timeline {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
			width: 2rpx;
			background: #E0E0E0;
		}

		.timeline-item {
			position: relative;
			margin-bottom: 32rpx;

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

			.timeline-dot {
				position: absolute;
				left: 16rpx;
				top: 24rpx;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				z-index: 1;

				&.valid {
					background: #4CAF50;
				}

				&.expiring {
					background: #FF9800;
				}

				&.expired {
					background: #F44336;
				}
			}

			.timeline-content {
				margin-left: 56rpx;

				.vaccine-card {
					background: white;
					border-radius: 20rpx;
					padding: 24rpx;
					border-left: 4rpx solid #E0E0E0;
					transition: all 0.3s ease;

					&.valid {
						border-left-color: #4CAF50;
					}

					&.expiring {
						border-left-color: #FF9800;
					}

					&.expired {
						border-left-color: #F44336;
					}

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

						.vaccine-name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
						}

						.vaccine-status {
							padding: 6rpx 12rpx;
							border-radius: 12rpx;
							font-size: 20rpx;

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

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

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

							.status-text {
								font-weight: 500;
							}
						}
					}

					.vaccine-details {
						.detail-row {
							display: flex;
							margin-bottom: 8rpx;

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

							.detail-label {
								font-size: 22rpx;
								color: #999999;
								min-width: 120rpx;
							}

							.detail-value {
								font-size: 22rpx;
								color: #666666;
								flex: 1;
							}
						}
					}
				}
			}
		}
	}

	.empty-records {
		text-align: center;
		padding: 80rpx 40rpx;

		.empty-icon {
			font-size: 80rpx;
			margin-bottom: 24rpx;
			display: block;
		}

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

		.empty-subtitle {
			font-size: 26rpx;
			color: #999999;
			display: block;
		}
	}
}

/* 接种计划 */
.vaccine-plan {
	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);

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

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

	.plan-list {
		.plan-item {
			display: flex;
			align-items: center;
			gap: 16rpx;
			background: white;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;
			border-left: 4rpx solid #E0E0E0;

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

			&.high {
				border-left-color: #F44336;
			}

			&.medium {
				border-left-color: #FF9800;
			}

			&.low {
				border-left-color: #4CAF50;
			}

			.plan-priority {
				padding: 6rpx 12rpx;
				border-radius: 12rpx;
				font-size: 20rpx;
				font-weight: 500;

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

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

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

				.priority-text {
					font-size: 20rpx;
				}
			}

			.plan-content {
				flex: 1;

				.plan-vaccine-name {
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
					display: block;
					margin-bottom: 6rpx;
				}

				.plan-due-date {
					font-size: 22rpx;
					color: #666666;
					display: block;
					margin-bottom: 4rpx;
				}

				.plan-reason {
					font-size: 20rpx;
					color: #999999;
					display: block;
				}
			}

			.plan-action {
				background: rgba(255, 138, 128, 0.1);
				border-radius: 16rpx;
				padding: 12rpx 20rpx;
				transition: all 0.3s ease;

				&:active {
					background: rgba(255, 138, 128, 0.2);
					transform: scale(0.95);
				}

				.action-text {
					font-size: 22rpx;
					color: #FF8A80;
					font-weight: 500;
				}
			}
		}
	}
}

/* AI分析卡片 */
.ai-analysis-card {
	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;

				&.warning {
					color: #FF9800;
					background: #FFF3E0;
					padding: 16rpx;
					border-radius: 12rpx;
				}
			}
		}
	}
}
</style>
