<template>
	<uni-nav-bar
		left-icon="left" 
		title="我的福利" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="140rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar>
	
	<view class="benefits-page">
		

		<!-- 头部导航栏 -->
	
		<!-- 分段控制器 -->
		<view class="segmented-control">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 0 }"
				@click="switchTab(0)"
			>
				<text class="tab-text">领取福利</text>
			</view>
			<view class="divider"></view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 1 }"
				@click="switchTab(1)"
			>
				<text class="tab-text">使用福利</text>
			</view>
			<view class="divider"></view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 2 }"
				@click="switchTab(2)"
			>
				<text class="tab-text">兑福利卡</text>
			</view>
		</view>

		<!-- 福利卡片列表 -->
		<view class="scrollbox">
			<scroll-view class="benefits-list" scroll-y="true" :show-scrollbar="false">
				<view 
					class="benefit-card" 
					v-for="(benefit, index) in benefitsList" 
					:key="index"
					:class="[benefit.type, { 'disabled': !benefit.flag }]"
					@click="claimBenefit(benefit)"
				>
				   <view class="card-title">{{ benefit.title }}</view>
					<!-- <view class="card-bg">
						
					</view> -->
					<view class="card-content">
						
						<view class="card-details">
							<view class="left-section">
								<text class="condition">{{ benefit.left_tip }}</text>
								<text class="requirement">{{ benefit.left_result }}</text>
							</view>
							<view class="right-section">
								<text class="reward-type">{{ benefit.right_tip }}</text>
								<text class="reward-value">{{ benefit.right_result }}</text>
							</view>
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
        
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goPointsDetail">
				<up-image  :src="jifenImg" width="34rpx" height="34rpx" ></up-image>
				<text class="nav-text">兑换福利卡</text>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import jifenImg from "@/static/duihuan.png"
	import api from '@/api/api';
	import navTo  from "@/utils/navTo.js";
	// 当前选中的标签页
	const activeTab = ref(0);

	// 福利列表数据
	const benefitsList = ref([
		{
			type: 'points',
			title: '肝胆积分 (5个新随访)',
			condition: '赠送积分',
			requirement: '200积分',
			rewardType: '立即领取',
			rewardValue: '',
			flag: true, // 表示是否可领取
			num: 0 // 需要的新随访数量
		},
		{
			type: 'video',
			title: '肝胆视频',
			condition: '再新增随访',
			requirement: '1个',
			rewardType: '赠送下载',
			rewardValue: '2集',
			flag: true,
			num: 1
		},
		{
			type: 'courseware',
			title: '肝胆课件',
			condition: '再新增随访',
			requirement: '6个',
			rewardType: '赠送下载',
			rewardValue: '1篇',
			flag: true,
			num: 6
		},
		{
			type: 'usb',
			title: '知识U盘',
			condition: '再新增随访 (年度计算)',
			requirement: '96个',
			rewardType: '赠送U盘',
			rewardValue: '1个',
			flag: true,
			num: 96
		}
	]);

	// 方法
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};

	const showRules = () => {
		uni.showToast({
			title: '福利规则',
			icon: 'none'
		});
	};

	const switchTab = (index) => {
		activeTab.value = index;

		if (index === 0) {
			getWelfarePage();
		} else if (index === 1) {
			useWelfarePage();
		} else if (index === 2) {
			navTo({
				url: '/pages_app/myWelfareCard/myWelfareCard'
			});
		}
	};

	const claimBenefit = (benefit) => {
		if (!benefit.flag) {
			uni.showToast({
				title: `需${benefit.num}个新随访`,
				icon: 'none'
			});
			return;
		}
		
		uni.showToast({
			title: `领取${benefit.title}`,
			icon: 'none'
		});
		
	};

	const goPointsDetail = () => {
		uni.showToast({
			title: '积分详情',
			icon: 'none'
		});
	};

	const goBenefitDetail = () => {
		uni.showToast({
			title: '福利详情',
			icon: 'none'
		});
	};

	const addPatient = () => {
		uni.showToast({
			title: '添加患者',
			icon: 'none'
		});
	};

	const useWelfarePage = () => {
		api.useWelfarePage().then(res => {
			if (res.code === '200' && res.data) {
				// 更新福利列表数据
				benefitsList.value = res.data;
			}
		});
	};


	const getWelfarePage = () => {
		api.getWelfarePage().then(res => {
			console.log(res);
			if (res.code === '200' && res.data) {
				
				// 更新福利列表数据
				benefitsList.value = res.data;
			}
		}).catch(err => {
			console.error('获取福利数据失败:', err);
			uni.showToast({
				title: '获取福利数据失败',
				icon: 'none'
			});
		});
	};

	onMounted(() => {
		getWelfarePage();
	});
</script>

<style lang="scss" scoped>
	// 变量定义
	$bg-color: #f5f6f7;
	$text-primary: #333333;
	$text-secondary: #666666;
	$text-light: #999999;
	$border-color: #e5e5e5;
	$white: #ffffff;
	$theme-color: #e74c3c;
	$divider-color: #cccccc;
	$nav-height: 140rpx; // 导航栏高度
	$segmented-height: 80rpx; // 分段控制器高度
	$bottom-nav-height: 120rpx; // 底部导航高度


	.benefits-page {
		min-height: 100vh;
		background-color: $bg-color;
		padding-top: $nav-height; // 为固定导航栏预留空间
	}

	.status-bar {
		height: 44rpx;
		background-color: $white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: $text-primary;

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

			.time {
				font-weight: 500;
			}

			.butterfly {
				font-size: 20rpx;
			}
		}

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

			.network-info,
			.signal,
			.wifi,
			.battery {
				font-size: 22rpx;
			}
		}
	}

	.header {
		height: 88rpx;
		background-color: $white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid $border-color;

		.header-left {
			.back-btn {
				font-size: 48rpx;
				color: $theme-color;
				font-weight: bold;
			}
		}

		.header-center {
			.title {
				font-size: 36rpx;
				color: $text-primary;
				font-weight: bold;
			}
		}

		.header-right {
			.rules-btn {
				font-size: 28rpx;
				color: $text-primary;
			}
		}
	}

	.segmented-control {
		position: fixed;
		top: $nav-height;
		left: 0;
		right: 0;
		z-index: 10;
		height: 80rpx;
		background-color: $white;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid $border-color;

		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			position: relative;

			.tab-text {
				font-size: 28rpx;
				color: $text-secondary;
				transition: all 0.3s ease;
			}

			&.active {
				.tab-text {
					color: #8B2316;
					
					font-size: 30rpx;
				}
			}
		}

		.divider {
			width: 2rpx;
			height: 40rpx;
			background-color: $divider-color;
		}
	}
  .scrollbox{
	  position: fixed;
	  top: calc(#{$nav-height} + #{$segmented-height});
	  left: 30rpx;
	  right: 30rpx;
	  box-sizing: border-box;
	  bottom: $bottom-nav-height;
	  margin: 30rpx 0 ;
	  overflow-y: scroll;
  }
	.benefits-list {
		

		.benefit-card {
			background: $white;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			position: relative;
			overflow: hidden;
			border:2rpx solid #fff;

			
			.disabled-text {
				color: $text-light !important;
			}

			.card-bg {
				position: absolute;
				top: 0;
				right: 20rpx;
				left:20rpx;
			    z-index:0;
			}

			.card-content {
				margin-top: 30rpx;
				background:url("@/static/fljifen_big.png") 0 0 no-repeat;
				background-size: 100% 100%;
				position: relative;
				height: 220rpx;
				z-index: 1;

				.card-title {
					font-size: 32rpx;
					color: $white;
					font-weight: 600;
					margin-bottom: 30rpx;
					line-height: 1.4;
				}

				.card-details {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:0 40rpx;
                    height: 220rpx;
					.left-section,
					.right-section {
						display: flex;
						flex-direction: column;
						gap: 8rpx;

						.condition,
						.reward-type {
							font-size: 24rpx;
							color: rgba(255, 255, 255, 11);
						}

						.requirement,
						.reward-value {
							font-size: 36rpx;
							color: $white;
							font-weight: bold;
						}
						.requirement{
							margin-top: 40rpx;
						}
					}

					.right-section {
						align-items: flex-end;
					}
				}
			}

			.status-indicator {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				background-color: #4CAF50;
				border-radius: 20rpx;
				padding: 4rpx 10rpx;
				font-size: 20rpx;
				color: $white;
				z-index: 2;
			}

			.status-indicator.disabled {
				background-color: #FF9800;
			}
		}
	}

	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 100rpx;
		background-color: #00cbc0;
		border-top: 1rpx solid $border-color;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;

		.nav-item {
			align-items: center;
			justify-content: center;
			flex-direction: flex;
			gap: 8rpx;

			.nav-icon {
				font-size: 40rpx;
			}

			.nav-text {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>