<template>
	<uni-nav-bar title="我的" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
	<view class="page">
		
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<image class="avatar" src="/static/avatar_default.png" mode="aspectFill"></image>
				<text class="username">邹建东</text>
			</view>
			
			<!-- 统计数据 -->
			<view class="stats-section">
				<view class="stats-item">
					<text class="stats-number">5</text>
					<text class="stats-label">随访患者数</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">0</text>
					<text class="stats-label">公益咨询数</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">0</text>
					<text class="stats-label">患者送花数</text>
				</view>
				<view class="divder"></view>
				<view class="signbox">
					<view class="sign">签到</view>
				</view>
			</view>
		</view>
		
		<!-- 随访服务 -->
		<view class="section">
			<view class="section-title">随访服务</view>
			<up-scroll-list  indicatorActiveColor="#8B2316" indicatorWidth="40rpx" indicatorBarWidth="20rpx"  class="service-grid">
				<view class="service-item" @click="goToPage('patientAudit')">
					<up-image  :src="hzshImg" width="48rpx" height="48rpx" ></up-image>
					<text>患者审核</text>
				</view>
				<view class="service-item" @click="goToPage('patientGroup')">
					<up-image  :src="hzfzImg" width="48rpx" height="48rpx" ></up-image>
					<text>患者分组</text>
				</view>
				<view class="service-item" @click="goToPage('groupMessage')">
					<up-image  :src="qfxxImg" width="48rpx" height="48rpx" ></up-image>
					<text>群发消息</text>
				</view>
				<view class="service-item" @click="goToPage('qrcode')">
						<up-image  :src="sfImg" width="48rpx" height="48rpx" ></up-image>
					<text>随访二维码</text>
				</view>
				<view class="service-item" @click="goToPage('qrcode')">
						<up-image  :src="czjhImg" width="48rpx" height="48rpx" ></up-image>
					<text>出诊计划</text>
				</view>
			</up-scroll-list>
			
		</view>
		
		<!-- 学习进步 -->
		<view class="section">
			<view class="section-title">学习进步</view>
			<view class="learning-grid">
				<view class="learning-item" @click="goToPage('myVideos')">
					<up-image  :src="wdspImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的视频</text>
				</view>
				<view class="learning-item" @click="goToPage('myCourses')">
					<up-image  :src="wdkcImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的课程</text>
				</view>
				<view class="learning-item" @click="goToPage('myDownloads')">
					<up-image  :src="wdxzImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的下载</text>
				</view>
				<view class="learning-item" @click="goToPage('myFavorites')">
					<up-image  :src="wdscImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的收藏</text>
				</view>
			</view>
		</view>
		
		<!-- 账户明细 -->
		<view class="section">
			<view class="section-title">账户明细</view>
			<up-scroll-list  indicatorActiveColor="#8B2316" indicatorWidth="40rpx" indicatorBarWidth="20rpx"  class="account-grid">
				<view class="account-item" @click="goToPage('myAccount')">
					<up-image  :src="wdzzImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的账户</text>
				</view>
				<view class="account-item" @click="goToPage('myPoints')">
					<up-image  :src="wdjfImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的积分</text>
				</view>
				<view class="account-item" @click="goToPage('myBenefits')">
					<up-image  :src="wdflImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的福利</text>
				</view>
				<view class="account-item" @click="goToPage('myReviews')">
					<up-image  :src="wdxhImg" width="48rpx" height="48rpx" ></up-image>
					<text>我的鲜花</text>
				</view>
				<view class="account-item" @click="goToPage('myReviews')">
					<up-image  :src="kjmxImg" width="48rpx" height="48rpx" ></up-image>
					<text>课件明细</text>
				</view>
				<view class="account-item" @click="goToPage('myReviews')">
					<up-image  :src="kcmxImg" width="48rpx" height="48rpx" ></up-image>
					<text>课程明细</text>
				</view>
				<view class="account-item" @click="goToPage('myReviews')">
					<up-image  :src="sxyImg" width="48rpx" height="48rpx" ></up-image>
					<text>送心意</text>
				</view>
			</up-scroll-list>
		</view>
		
		<!-- 常用操作 -->
		<view class="section">
			<view class="section-title">常用操作</view>
			<view class="operation-grid">
				<view class="operation-item" @click="goToPage('wechatUnbind')">
					<up-image  :src="wxjbImg" width="48rpx" height="48rpx" ></up-image>
					<text>微信解绑</text>
				</view>
				<view class="operation-item" @click="goToPage('changePhone')">
					<up-image  :src="ghsjhImg" width="48rpx" height="48rpx" ></up-image>
					<text>更换手机号</text>
				</view>
				<view class="operation-item" @click="goToPage('notifications')">
					<up-image  :src="tzykImg" width="48rpx" height="48rpx" ></up-image>
					<text>通知已开</text>
				</view>
				<view class="operation-item" @click="showVersion">
					<up-image  :src="versionImg" width="48rpx" height="48rpx" ></up-image>
					<text>V4.1.4</text>
				</view>
			</view>
		</view>
		<view class="setbox">
			<!-- 福利卡兑换 -->
			<view class="sectioncell benefit-section">
				<view class="benefit-item" @click="goToPage('benefitExchange')">
					<view class="benefit-icon">
						<up-image :src="fulicard" width="48rpx" height="48rpx"></up-image>
					</view>
					<view class="benefit-content">
						<text class="benefit-title">福利卡兑换</text>
					</view>
					<view class="benefit-arrow">
						<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 发票管理 -->
			<view class="sectioncell invoice-section">
				<view class="invoice-item" @click="goToPage('invoiceManage')">
					<view class="invoice-icon">
						<up-image :src="fpgl" width="48rpx" height="48rpx"></up-image>
					</view>
					<view class="invoice-content">
						<text class="invoice-title">发票管理</text>
					</view>
					<view class="invoice-arrow">
						<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 常用银行卡 -->
			<view class="sectioncell bank-section">
				<view class="bank-item" @click="goToPage('bankCard')">
					<view class="bank-icon">
						<up-image :src="cyyhk" width="48rpx" height="48rpx"></up-image>
					</view>
					<view class="bank-content">
						<text class="bank-title">常用银行卡</text>
					</view>
					<view class="bank-arrow">
						<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 设置与帮助 -->
			<view class="sectioncell settings-section">
				<view class="settings-item" @click="goToPage('settings')">
					<view class="settings-icon">
						<up-image :src="settingImg" width="48rpx" height="48rpx"></up-image>
					</view>
					<view class="settings-content">
						<text class="settings-title">设置与帮助</text>
					</view>
					<view class="settings-arrow">
						<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- 年度总结悬浮按钮 -->
		<view class="year-summary-btn" @click="showYearSummary">
			<view class="year-text">2024</view>
			<view class="summary-text">年度总结</view>
		</view>
		
		<!-- 底部导航栏 -->
		<CustomTabbar></CustomTabbar>
	</view>
</template>

<script setup>
	import CustomTabbar from '@/components/tabBar/tabBar.vue';
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import hzshImg from "@/static/hzsh.png"
	import hzfzImg from "@/static/hzfz.png"
	import qfxxImg from "@/static/qfxz.png"
	import sfImg from "@/static/sfewm.png"
	import czjhImg from "@/static/czjh.png"
	import wdspImg from "@/static/wdsp.png"
	import wdkcImg from "@/static/wdkc.png"
	import wdxzImg from "@/static/wdxz.png"
	import wdscImg from "@/static/wdsc.png"
	import wdzzImg from "@/static/wdzh.png"
	import wdjfImg from "@/static/wdjf.png"
	import wdflImg from "@/static/wdfl.png"
	import wdxhImg from "@/static/wdxh.png"
	import kjmxImg from "@/static/kjmx.png"
	import kcmxImg from "@/static/kcmx.png"
	import sxyImg from "@/static/sxy.png"
	import wxjbImg from "@/static/wxjb.png"
	import ghsjhImg from "@/static/ghsjh.png"
	import tzykImg from "@/static/xxtx.png"
	import versionImg from "@/static/fxxbb.png"


	import fulicard from "@/static/fulicard.png"
	import fpgl from "@/static/fpgl.png"
	import cyyhk from "@/static/cyhhk.png"
	import settingImg from "@/static/setting.png"
	// 响应式数据
	const isLargeFont = ref(false);
	
	// 方法
	const toggleFontSize = () => {
		isLargeFont.value = !isLargeFont.value;
		console.log('切换字体大小:', isLargeFont.value ? '大字版' : '普通版');
	};
	
	const checkin = () => {
		console.log('签到');
		uni.showToast({
			title: '签到成功',
			icon: 'success'
		});
	};
	
	const goToPage = (page) => {
		console.log('跳转到页面:', page);
		// 根据页面名称进行跳转
		switch(page) {
			case 'index':
				uni.switchTab({
					url: '/pages/index/index'
				});
				break;
			case 'patientClass':
				uni.switchTab({
					url: '/pages_app/patientClass/patientClass'
				});
				break;
			case 'benefitExchange':
				uni.showToast({
					title: '福利卡兑换功能开发中',
					icon: 'none'
				});
				break;
			case 'invoiceManage':
				uni.showToast({
					title: '发票管理功能开发中',
					icon: 'none'
				});
				break;
			case 'bankCard':
				uni.showToast({
					title: '常用银行卡功能开发中',
					icon: 'none'
				});
				break;
			case 'settings':
				uni.showToast({
					title: '设置与帮助功能开发中',
					icon: 'none'
				});
				break;
			default:
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
		}
	};
	
	const showYearSummary = () => {
		console.log('显示年度总结');
		uni.showToast({
			title: '年度总结功能开发中',
			icon: 'none'
		});
	};
	
	const showVersion = () => {
		uni.showModal({
			title: '版本信息',
			content: '当前版本：V4.1.4',
			showCancel: false
		});
	};
	
	onShow(() => {
		console.log('我的页面显示');
	});
</script>

<style lang="scss" scoped>
// 颜色变量
$primary-color: #ff6b6b;
$theme-color: #8B2316;
$cyan-color: #00CED1;
$white: #fff;
$gray-bg: #f5f5f5;
$gray-light: #eee;
$gray-medium: #999;
$gray-dark: #666;
$text-color: #333;

// 尺寸变量
$border-radius: 8px;
$border-radius-small: 6px;
$padding: 15px;
$padding-small: 10px;

.page {
	background-color: $gray-bg;
	height: calc(100vh - 140rpx);
	overflow-y: scroll;
	padding-bottom: 100rpx;
}


// 用户信息卡片
.user-card {
	
	background: url('@/static/big_background_my.png') no-repeat 0 0;
	height:310rpx;
	padding:0 30rpx;
	background-size: cover;
	position: relative;
	margin-bottom: 67rpx;

	.user-info {
		padding-top: 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 40rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			
		}

		.username {
			color: $white;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.stats-section {
		position: relative;
		background-color: $white;
		border-radius: $border-radius;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
		.divder{
			width:2rpx;
			height:50rpx;
			margin-top: 32rpx;
			margin-left:10rpx;
			margin-right: 150rpx;
			background-color: #999;
		}
       .signbox{
		   position:absolute;
		   right:0;
		   top:54rpx;
		   width:160rpx;
		   height: 56rpx;
		   display: flex;
		   align-items: center;
		  
		   
		   border-radius:30rpx 0 0 30rpx;
		   background:#fc564a url("@/static/qd1_bg.9.png")no-repeat 0 0;
		   background-size:57rpx 56rpx;
		   .sign{
			   margin-left: 60rpx;
			    font-size: 28rpx;
				color:#fff;
		   }
	   }
		.stats-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;

			.stats-number {
				font-size: 48rpx;
				
				color: $text-color;
			}

			.stats-label {
				font-size: 24rpx;
				color: $text-color;
			}
		}
	}

	.checkin-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		background-color: $theme-color;
		color: $white;
		padding: 16rpx 24rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 28rpx;
	}
}

// 通用section样式
.section {
	background-color: $white;
	margin: $padding-small;
	border-radius: $border-radius;
	padding: 26rpx;

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: $text-color;
		margin-bottom: 30rpx;
	}
}

// 服务网格
 .learning-grid,.operation-grid{
	 display: flex;
 }

	.service-item,
	.learning-item,
	.account-item,
	.operation-item {
		width: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		padding: 20rpx;

		text{
			white-space: nowrap;
			font-size: 26rpx;
			color: $text-color;
			text-align: center;
		}
	}

.setbox{
	margin:0 26rpx;
	border-radius:20rpx;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 30rpx;
}
// 新增模块样式
.benefit-section,
.invoice-section,
.bank-section,
.settings-section {
	
	border-radius: $border-radius;
    margin-bottom: 0;
	padding: 0;

	.benefit-item,
	.invoice-item,
	.bank-item,
	.settings-item {
		display: flex;
		align-items: center;
		padding: 14rpx;
		background-color: $white;
		
		border-bottom:2rpx solid #efefef;

		.benefit-icon,
		.invoice-icon,
		.bank-icon,
		.settings-icon {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}

		.benefit-content,
		.invoice-content,
		.bank-content,
		.settings-content {
			flex: 1;

			.benefit-title,
			.invoice-title,
			.bank-title,
			.settings-title {
				font-size: 26rpx;
				color: $text-color;
				font-weight: 500;
			}
		}

		.benefit-arrow,
		.invoice-arrow,
		.bank-arrow,
		.settings-arrow {
			width: 30rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}


// 年度总结悬浮按钮
.year-summary-btn {
	position: fixed;
	bottom: 200rpx;
	right: 0rpx;
	width: 150rpx;
	height: 80rpx;
	background: linear-gradient(135deg, $cyan-color 0%, #20B2AA 100%);
	border-radius: 60rpx 0 0 60rpx;
	
	
	justify-content: flex-start;
	align-items: center;
	color: $white;
	display: flex;
	box-shadow: 0 8rpx 24rpx rgba(0, 206, 209, 0.3);
	z-index: 999;

	.year-text {
		font-size: 24rpx;
		font-weight: bold;
		width:70rpx;
		height:70rpx;
		display: flex;
		margin-left: 5rpx;
		justify-content: center;
		align-items: center;
		color:#3cc7c0;
		border-radius: 50%;
		background-color: #fff;
	}

	.summary-text {
		font-weight: bold;
		width:50rpx;
		margin-left: 10rpx;
		font-size: 20rpx;
	}
}

// 底部导航栏
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: $white;
	display: flex;
	border-top: 1px solid $gray-light;
	padding: 16rpx 0;
	z-index: 1000;

	.nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		font-size: 20rpx;
		color: $gray-medium;

		&.active {
			color: $theme-color;
		}
	}
}
</style>
