<template>
	<uni-nav-bar title="我的" fixed color="#8B2316" height="140rpx" :border="false"
		backgroundColor="#eeeeee"></uni-nav-bar>
	<view class="page">


		<!-- 用户信息卡片 -->
		<view class="user-card"
			:style="{'background-image': `url(${myInfoBackGround || '/static/big_background_my.png'})`, 'background-size':'cover','background-repeat':'no-repeat'}">
			<view class="user-info">
				<image class="avatar" :src="avatar" mode="aspectFill"></image>
				<text class="username">{{username}}</text>
			</view>

			<!-- 统计数据 -->
			<view class="stats-section">
				<view class="stats-item" @click="onStatsClick('followup')">
					<text class="stats-number">{{followupCount}}</text>
					<text class="stats-label">随访患者数</text>
				</view>
				<view class="stats-item" @click="onStatsClick('consult')">
					<text class="stats-number">{{consultCount}}</text>
					<text class="stats-label">公益咨询数</text>
				</view>
				<view class="stats-item" @click="onStatsClick('flower')">
					<text class="stats-number">{{flowerCount}}</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('myFlower')">
					<up-image :src="wdxhImg" width="48rpx" height="48rpx"></up-image>
					<text>我的鲜花</text>
				</view>
				<view class="account-item" @click="goToPage('pptDetail')">
					<up-image :src="kjmxImg" width="48rpx" height="48rpx"></up-image>
					<text>课件明细</text>
				</view>
				<view class="account-item" @click="goToPage('couseDetail')">
					<up-image :src="kcmxImg" 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 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"
	import api from '@/api/api.js'
	import navTo from "@/utils/navTo"
	import linkUrl from "@/utils/docUrl"
	// 响应式数据
	const isLargeFont = ref(false);

	// 新增：我的信息数据
	const avatar = ref('')
	const username = ref('')
	const followupCount = ref(0)
	const consultCount = ref(0)
	const flowerCount = ref(0)
	const myInfoBackGround = ref('')
	
	// 从storage获取用户信息
	const getUserInfoFromStorage = () => {
		try {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				avatar.value = linkUrl+userInfo.photo
				username.value = userInfo.realName
				
			}
		} catch (e) {
			console.error('从storage获取用户信息失败', e)
		}
	}
	
	const fetchMyInfo = async () => {
		try {
			const res = await api.getMyInfo({})
			if (res && res.code === 200 && res.data) {
				const data = res.data
					myInfoBackGround.value = data.myInfoBackGround;
				followupCount.value = data.follow_patient_num || data.relationPatientNum || 0
				consultCount.value = data.consult_total || data.consultCount || 0
				flowerCount.value = data.give_flower_num || data.flowerCount || 0
			}
		} catch (e) {
			console.error('获取我的信息失败', e)
		}
	}

	// 方法
	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);
		let url="";
		// 根据页面名称进行跳转
		switch (page) {
			case 'patientAudit':
				url="/pages_app/myPatient/myPatient"
				break;
			case 'patientGroup':
				url="/pages_app/patientGroup/patientGroup"
				break;
			case 'groupMessage':
				url="/pages_app/groupMessage/groupMessage"
				break;
			case 'qrcode':
				url="/pages_app/myCode/myCode"
				break;
			case 'myVideos':
				url="/pages_app/myVideo/myVideo"
				break;
			case 'myCourses':
              url="/pages_course/my_courses/my_courses"
				break;
			case 'myDownloads':
              url="/pages_app/myDownLoad/myDownLoad"
				break;
			case 'myFavorites':
             url="/pages_app/myCollect/myCollect"
				break;
			case 'myAccount':
             url="/pages_app/myAccount/myAccount"
				break;
			case 'myPoints':
             url="/pages_app/myPoint/myPoint"
				break;
			case 'myBenefits':
             url="/pages_app/myWelfare/myWelfare"
				break;
			case 'myFlower':
            	url="/pages_app/myFlower/myFlower"
			break;
			case 'pptDetail':
				url="/pages_app/myCourseware/myCourseware"
			break;
			case 'couseDetail':
				url="/pages_course/order_record/order_record"
				break;
			case 'wechatUnbind':
				url="/pages_app/wechatContact/wechatContact"
				break;
			case 'changePhone':
            url="/pages_app/changeMobile/changeMobile"
				break;
			case 'benefitExchange':
             url="/pages_app/myWelfareCard/myWelfareCard"
				break;
			case 'bankCard':
             url="/pages_app/idcardAuth/bankCardList"
				break;
			case 'settings':
              url="/pages_app/setting/setting"
				break;
			default:
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
		}
		navTo({
			url:url
		})
	};

	const showYearSummary = () => {
		console.log('显示年度总结');
		uni.showToast({
			title: '年度总结功能开发中',
			icon: 'none'
		});
	};

	const showVersion = () => {
		uni.showModal({
			title: '版本信息',
			content: '当前版本：V4.1.4',
			showCancel: false
		});
	};

	const onStatsClick = (key) => {
		let url = '';
		switch (key) {
			case 'followup':
				// TODO: 跳转随访患者列表
				url = '/pages_app/patientMsg/patientMsg'
				break;
			case 'consult':
				// TODO: 跳转公益咨询列表
				url = '/pages_app/consult/consult'
				break;
			case 'flower':
				// TODO: 跳转送花记录
				//uni.showToast({ title: '查看送花记录', icon: 'none' })
				url = '/pages_app/myFlower/myFlower'
				break;
			default:
				break;
		}
		navTo({
			url: url
		})
	}

	onShow(() => {
		console.log('我的页面显示');
		getUserInfoFromStorage() // 先从storage获取用户信息
		fetchMyInfo() // 然后从API获取最新数据
	});
</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: 230rpx;
	}

	// 新增模块样式
	.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>