<template>
	<view class="tool-page">
		<!-- 用户健康卡片 -->
		<view class="user-card">
			<view class="user-card-content">
				<view class="user-avatar" @tap="goToMyProfile">
					<image class="avatar-img" :src='userInfo.avatar' v-if="userInfo.avatar && uid" mode="aspectFill"></image>
					<image v-else class="avatar-img" :src="urlDomain+'crmebimage/perset/staticImg/f.png'" mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<view class="user-name" v-if="userInfo && uid">
						{{userInfo.nickname}}
						<!-- <view class="vip-tag" v-if="userInfo.vip">
							<image :src="userInfo.vipIcon" mode="aspectFit" class="vip-icon"></image>
							<text class="vip-text">{{userInfo.vipName || ''}}</text>
						</view> -->
					</view>
					<view class="user-name" v-else @tap="openAuto">请点击登录</view>
					<view class="user-desc" :class="{ 'completed': userHealthStatus.hasProfile }">
						{{ userHealthStatus.profileStatus || '尚未完成健康档案' }}
					</view>
				</view>
				<view class="checkin-btn" @tap="handleCheckin">
					<text>打卡</text>
				</view>
			</view>
		</view>

		<!-- 四大功能入口 -->
		<view class="function-grid">
			<view class="function-item calculator" @tap="goToCalculator">
				<view class="function-content">
					<view class="function-text">
						<view class="function-title">食谱计算器</view>
						<view class="function-desc">个性化营养方案</view>
					</view>
					<view class="function-icon">
						<text class="icon">📊</text>
					</view>
				</view>
			</view>
			<view class="function-item ai-nutritionist" @tap="goToAINutritionist">
				<view class="function-content">
					<view class="function-text">
						<view class="function-title">AI营养师</view>
						<view class="function-desc">智慧知肾健康</view>
					</view>
					<view class="function-icon">
						<text class="icon">💬</text>
					</view>
				</view>
			</view>
			<view class="function-item food-encyclopedia" @tap="goToFoodEncyclopedia">
				<view class="function-content">
					<view class="function-text">
						<view class="function-title">食物百科</view>
						<view class="function-desc">营养成分查询</view>
					</view>
					<view class="function-icon">
						<text class="icon">🔍</text>
					</view>
				</view>
			</view>
			<view class="function-item nutrition-knowledge" @tap="goToNutritionKnowledge">
				<view class="function-content">
					<view class="function-text">
						<view class="function-title">营养知识</view>
						<view class="function-desc">专业营养指导</view>
					</view>
					<view class="function-icon">
						<text class="icon">💡</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 精选食谱 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">精选食谱</text>
				<view class="section-more" @tap="goToRecipeList">
					<text>›</text>
				</view>
			</view>
			<view class="recipe-list">
				<view class="recipe-item" v-for="(item, index) in recipeList" :key="index" @tap="goToRecipeDetail(item)">
					<view class="recipe-image">
						<image :src="item.coverImage" mode="aspectFill"></image>
						<view class="recipe-tag" :class="item.source === 'calculator' ? 'tag-mine' : 'tag-recommend'">
							{{ item.source === 'calculator' ? '我的配餐' : '推荐' }}
						</view>
					</view>
					<view class="recipe-info">
						<view class="recipe-title">{{ item.name }}</view>
						<view class="recipe-desc">{{ item.description || '' }}</view>
						<view class="recipe-meta">
							<view class="meta-item" v-if="item.totalProtein">
								<text class="meta-icon">🥩</text>
								<text class="meta-text">蛋白质 {{ item.totalProtein }}g</text>
							</view>
							<view class="meta-item" v-if="item.totalEnergy">
								<text class="meta-icon">🔥</text>
								<text class="meta-text">{{ item.totalEnergy }}kcal</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 营养方案领取卡片 -->
		<view class="promotion-card" @tap="goToPromotion">
			<view class="promotion-content">
				<view class="promotion-text">
					<view class="promotion-title">慢生活营养专家</view>
					<view class="promotion-desc">专业个性化营养方案</view>
				</view>
				<view class="promotion-btn">
					<text>立即领取福利</text>
				</view>
			</view>
		</view>

		<!-- 健康知识 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">健康知识</text>
				<view class="section-more" @tap="goToKnowledgeList">
					<text>›</text>
				</view>
			</view>
			<view class="knowledge-list">
				<view class="knowledge-item" v-for="(item, index) in knowledgeList" :key="index" @tap="goToKnowledgeDetail(item)">
					<view class="knowledge-icon">
						<text>{{ item.icon }}</text>
					</view>
					<view class="knowledge-info">
						<view class="knowledge-title">{{ item.title }}</view>
						<view class="knowledge-desc">{{ item.desc }}</view>
						<view class="knowledge-meta">
							<text class="meta-text">{{ item.time }}</text>
							<text class="meta-dot">·</text>
							<text class="meta-text">{{ item.views }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部安全距离 -->
		<view class="safe-bottom"></view>
	</view>
</template>

<script>
import {
		getRecommendedRecipes,
		getRecommendedKnowledge,
		getUserHealthStatus
	} from '@/api/tool.js';
	import { mapGetters } from 'vuex';
	import { toLogin, checkLogin } from '@/libs/login.js';
	import Cache from '@/utils/cache';
	import { BACK_URL } from '@/config/cache';

	export default {
		name: 'ToolIndex',
		computed: {
			...mapGetters(['userInfo','uid','isLogin'])
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				recipeList: [],
				knowledgeList: [],
				userHealthStatus: {
					hasProfile: false,
					profileStatus: '尚未完成健康档案'
				},
				loading: false
			}
		},
		onLoad() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData().finally(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
			// 加载页面数据
		async loadData() {
			this.loading = true;
			try {
				// 并行加载数据
				const [recipesRes, knowledgeRes, healthRes] = await Promise.all([
					getRecommendedRecipes({ limit: 2 }).catch(() => ({ data: [] })),
					getRecommendedKnowledge({ limit: 2 }).catch(() => ({ data: [] })),
					getUserHealthStatus().catch(() => ({ data: { hasProfile: false, profileStatus: '尚未完成健康档案' } }))
				]);
				
				this.recipeList = recipesRes.data?.list || recipesRes.data || [];
				this.knowledgeList = knowledgeRes.data?.list || knowledgeRes.data || [];
				this.userHealthStatus = healthRes.data || { hasProfile: false, profileStatus: '尚未完成健康档案' };
			} catch (error) {
				console.error('加载数据失败:', error);
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		// 跳转到我的页面
		goToMyProfile() {
			uni.navigateTo({
				url: '/pages/tool/my-profile'
			})
		},
		// 跳转到打卡页面
		handleCheckin() {
			uni.navigateTo({
				url: '/pages/tool/checkin'
			})
		},
		// 跳转到食谱计算器
		goToCalculator() {
			if (!checkLogin()) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				setTimeout(() => toLogin(), 500);
				return;
			}
			uni.navigateTo({
				url: '/pages/tool/calculator'
			})
		},
		// 跳转到AI营养师
		goToAINutritionist() {
			if (!checkLogin()) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				setTimeout(() => toLogin(), 500);
				return;
			}
			uni.navigateTo({
				url: '/pages/tool/ai-nutritionist'
			})
		},
		// 跳转到食物百科
		goToFoodEncyclopedia() {
			uni.navigateTo({
				url: '/pages/tool/food-encyclopedia'
			})
		},
		// 跳转到营养知识
		goToNutritionKnowledge() {
			uni.navigateTo({
				url: '/pages/tool/nutrition-knowledge'
			})
		},
		// 跳转到食谱列表（功能开发中）
		goToRecipeList() {
			uni.showToast({
				title: '食谱列表功能开发中',
				icon: 'none'
			})
		},
		// 跳转到食谱详情
		goToRecipeDetail(item) {
			if (!item) return
			uni.navigateTo({
				url: `/pages/tool/recipe-detail?id=${item.id || 1}`
			})
		},
		// 跳转到会员福利
		goToPromotion() {
			uni.navigateTo({
				url: '/pages/tool/welcome-gift'
			})
		},
		// 跳转到营养知识列表
		goToKnowledgeList() {
			uni.navigateTo({
				url: '/pages/tool/nutrition-knowledge'
			})
		},
		// 跳转到营养知识详情
		goToKnowledgeDetail(item) {
			if (!item) return
			uni.navigateTo({
				url: `/pages/tool/nutrition-knowledge?id=${item.id || 1}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tool-page {
	min-height: 100vh;
	background-color: #f4f5f7;
	padding-bottom: 20rpx;
}

/* 用户健康卡片 */
.user-card {
	margin: 32rpx 32rpx 0;
	height: 192rpx;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #ff6b35 0%, #ff7a4a 50%, #d64820 100%);
	box-shadow: 0 16rpx 48rpx rgba(255, 107, 53, 0.25);
	overflow: hidden;
	position: relative;

	.user-card-content {
		display: flex;
		align-items: center;
		padding: 32rpx;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.user-avatar {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		background: #ffffff;
		border: 5rpx solid #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		cursor: pointer;
		overflow: hidden;

		.avatar-img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.user-info {
		flex: 1;

		.user-name {
			font-size: 32rpx;
			color: #ffffff;
			font-weight: 500;
			margin-bottom: 4rpx;
			display: flex;
			align-items: center;
			gap: 12rpx;
		}

		.vip-tag {
			display: flex;
			align-items: center;
			padding: 4rpx 16rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 20rpx;
			
			.vip-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}

			.vip-text {
				font-size: 20rpx;
				color: #ffe157;
			}
		}

		.user-desc {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
		}
	}

	.checkin-btn {
		background: rgba(255, 255, 255, 0.95);
		border: 2rpx solid rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		padding: 16rpx 32rpx;
		box-shadow: 0 8rpx 40rpx rgba(255, 107, 53, 0.3);

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

/* 四大功能入口 */
.function-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24rpx;
	margin: 32rpx 32rpx 0;
}

.function-item {
	height: 168rpx;
	border-radius: 32rpx;
	overflow: hidden;
	position: relative;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);

	.function-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.function-text {
		flex: 1;

		.function-title {
			font-size: 32rpx;
			color: #ffffff;
			font-weight: 500;
			margin-bottom: 8rpx;
		}

		.function-desc {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.75);
		}
	}

	.function-icon {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.2);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			font-size: 40rpx;
			line-height: 1;
		}
	}
}

.calculator {
	background: linear-gradient(135deg, #4ecdc4 0%, #44b8b0 100%);
	box-shadow: 0 16rpx 48rpx rgba(78, 205, 196, 0.25);
}

.ai-nutritionist {
	background: linear-gradient(135deg, #5b9bf3 0%, #4a8ae8 100%);
	box-shadow: 0 16rpx 48rpx rgba(91, 155, 243, 0.25);
}

.food-encyclopedia {
	background: linear-gradient(135deg, #ffb84d 0%, #ffa726 100%);
	box-shadow: 0 16rpx 48rpx rgba(255, 184, 77, 0.25);
}

.nutrition-knowledge {
	background: linear-gradient(135deg, #ff6b7a 0%, #ff5252 100%);
	box-shadow: 0 16rpx 48rpx rgba(255, 107, 122, 0.25);
}

/* 通用区块样式 */
.section {
	margin: 32rpx 32rpx 0;

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

		.section-title {
			font-size: 32rpx;
			color: #2e3e5c;
			font-weight: 500;
		}

		.section-more {
			font-size: 32rpx;
			color: #9fa5c0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

/* 精选食谱 */
.recipe-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.recipe-item {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx;
	box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 24rpx;
}

.recipe-image {
	width: 192rpx;
	height: 192rpx;
	border-radius: 32rpx;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1);

	image {
		width: 100%;
		height: 100%;
	}

	.recipe-tag {
		position: absolute;
		left: 16rpx;
		top: 16rpx;
		border-radius: 16rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
		color: #ffffff;
		box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1);

		&.tag-recommend {
			background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
		}

		&.tag-mine {
			background: linear-gradient(135deg, #4ecdc4 0%, #44b8b0 100%);
		}
	}
}

.recipe-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4rpx 0;

	.recipe-title {
		font-size: 28rpx;
		color: #2e3e5c;
		font-weight: 500;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}

	.recipe-desc {
		font-size: 24rpx;
		color: #9fa5c0;
		margin-bottom: 16rpx;
		line-height: 1.4;
	}

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

		.meta-item {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.meta-icon {
				font-size: 24rpx;
				width: 28rpx;
				height: 28rpx;
			}

			.meta-text {
				font-size: 24rpx;
				color: #9fa5c0;
			}
		}
	}
}

/* 营养方案领取卡片 */
.promotion-card {
	margin: 32rpx 32rpx 0;
	height: 192rpx;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #ff6b35 0%, #ff7a4a 50%, #d64820 100%);
	box-shadow: 0 40rpx 50rpx -10rpx rgba(0, 0, 0, 0.1), 0 16rpx 20rpx -6rpx rgba(0, 0, 0, 0.1);
	overflow: hidden;
	position: relative;

	.promotion-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.promotion-text {
		.promotion-title {
			font-size: 32rpx;
			color: #ffffff;
			font-weight: 500;
			margin-bottom: 8rpx;
		}

		.promotion-desc {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.85);
		}
	}

	.promotion-btn {
		background: #ffffff;
		border: 2rpx solid rgba(255, 107, 53, 0.2);
		border-radius: 24rpx;
		padding: 16rpx 32rpx;
		box-shadow: 0 8rpx 40rpx rgba(255, 107, 53, 0.3);

		text {
			font-size: 28rpx;
			color: #ff6b35;
			font-weight: 500;
		}
	}
}

/* 健康知识 */
.knowledge-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.knowledge-item {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 32rpx;
}

.knowledge-icon {
	width: 128rpx;
	height: 128rpx;
	border-radius: 32rpx;
	background: #f4f5f7;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	text {
		font-size: 60rpx;
	}
}

.knowledge-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.knowledge-title {
		font-size: 28rpx;
		color: #2e3e5c;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.knowledge-desc {
		font-size: 24rpx;
		color: #9fa5c0;
		line-height: 1.6;
		margin-bottom: 16rpx;
	}

	.knowledge-meta {
		display: flex;
		align-items: center;
		gap: 24rpx;

		.meta-text {
			font-size: 24rpx;
			color: #9fa5c0;
		}

		.meta-dot {
			font-size: 24rpx;
			color: #d0dbea;
		}
	}
}

/* 底部安全距离 */
.safe-bottom {
	height: 40rpx;
}
</style>
