<template>
	<view class="my-code-page">
		<!-- 顶部导航栏 -->
		<navBar title="我的二维码" />

		<!-- 内容 -->
		<scroll-view scroll-y class="page-scroll">
			<!-- 顶部蓝色横幅 -->
			<view class="blue-banner">
				<up-image  :src="bgImg" width="100%" mode="widthFix" ></up-image>
			</view>

			<!-- 白色信息卡 -->
			<view class="qrbox">
				<view class="qr-card">
					<view class="leftCircle"></view>
					<view class="rightCircle"></view>
					<view class="halfCircle"></view>
					<view class="avatar-wrapper">
						<image class="avatar" :src="docUrl+userInfo.photo" mode="aspectFill" />
					</view>
					<view class="name-viewne">{{ userInfo.realName }} {{ userInfo.positionName }}</view>
					<view class="org-viewne">{{ userInfo.hospitalName }}</view>
					<view class="dash-viewne"></view>
					<view class="slogan">
						<text class="h1">不方便到医院就诊</text>
						<text >我在<text class="hl">肝胆相照</text>线上帮助您！</text>
					</view>
					<view class="contact-qr">
						<view class="contact-btn">
							<up-image  :src="viewnkImg" width="430rpx" height="131rpx" ></up-image>
							
						</view>
						<image class="qr-img" :src="docUrl+userInfo.qrcode" mode="aspectFit" />
					</view>
				</view>
			</view>
			<view class="squrebox">
				<view class="square">
					    <view class="s-top"></view>
					    <view class="s-middle">
							<view id="head">如何添加我为随访医生？</view>
						</view>
					    <view class="s-bottom">
							<view>
								<view class="descrow"><text>1</text>微信扫一扫上方二维码，关注“肝胆相照一家人”公众号</view>
								<view class="descrow"><text>2</text>点击“邹建东专家工作室”，选择微信登录，注册后直接发送随访申请</view>
								<view class="descrow"><text>3</text>若未弹出“随访申请发送成功”提示，请再次点击“邹建东专家工作室”发送随访申请</view>
								<view class="descrow"><text>4</text>审核通过后，点击“就医服务-随访交流”，与专家进行图文交流</view>
							</view>
						</view>
					    <view class="s-half-circle"></view>
						<view class="s-half-circle-left"></view>
					</view>
			</view>

			
		</scroll-view>

		<!-- 底部保存按钮 -->
		<view class="save-bar">
			<button class="save-btn" @click="onSave">保存二维码到手机</button>
		</view>
	</view>
</template>

<script setup>
import navBar from '@/components/navBar/navBar.vue'
import { onShow } from "@dcloudio/uni-app";
import { ref } from 'vue';
import docUrl from '@/utils/docUrl'
import bgImg from "@/static/background.jpg"
import viewnkImg from "@/static/arr.png"
const userInfo = ref({})
const goBack = () => {
	uni.navigateBack();
};
onShow(()=>{
	userInfo.value = uni.getStorageSync('userInfo')
})
const onSave = () => {
	// 检查是否有二维码图片
	if (!userInfo.value.qrcode) {
		uni.showToast({ title: '二维码不存在', icon: 'none' });
		return;
	}
	
	// 显示加载提示
	uni.showLoading({ title: '保存中...' });
	
	// 下载二维码图片
	uni.downloadFile({
		url: docUrl + userInfo.value.qrcode,
		success: (res) => {
			if (res.statusCode === 200) {
				// 保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: () => {
						uni.hideLoading();
						uni.showToast({ 
							title: '保存成功', 
							icon: 'none',
							duration: 2000
						});
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('保存失败:', err);
						
						// 根据错误类型给出不同提示
						if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize')) {
							uni.showModal({
								title: '权限提示',
								content: '需要相册权限才能保存图片，请在设置中开启权限',
								showCancel: false,
								confirmText: '知道了'
							});
						} else {
							uni.showToast({ 
								title: '保存失败，请重试', 
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			} else {
				uni.hideLoading();
				uni.showToast({ 
					title: '下载失败，请检查网络', 
					icon: 'none',
					duration: 2000
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('下载失败:', err);
			uni.showToast({ 
				title: '下载失败，请检查网络', 
				icon: 'none',
				duration: 2000
			});
		}
	});
};
</script>

<style lang="scss" scoped>
.my-code-page {
	min-height: 100vh;
	background-color: #0d7dfd;
}
.squrebox{
	margin:0 30rpx;
	
	
	
	
	 overflow: hidden;
}
.square{
	background-color: #3492FC;
	 border-radius: 30rpx;
	padding-bottom: 40rpx;
	border: 2rpx solid #fff;
	 position: relative;
	 .s-half-circle-left{
	 	border: 2rpx solid #fff;
	 	    position: absolute;
	 	    width: 60rpx;
	 	    height: 60rpx;
	 	    z-index:1;
	 	    border-radius:50%;
	 	    top:53rpx;
	 	    background-color: #0d7dfd;
	 	    left: -30rpx;
	 }
	 .s-half-circle{
	 	border: 2rpx solid #fff;
	 	    position: absolute;
	 	    width: 60rpx;
	 	    height: 60rpx;
	 	    z-index:1;
	 	    border-radius:50%;
	 	    top:53rpx;
	 	    background-color: #0d7dfd;
	 	    right: -30rpx;
	 }
	 text{
		 display: inline-flex;
		 width: 40rpx;
		 background-color: #6FB3FE;
		 height: 40rpx;
		 margin-right: 10rpx;
		 border-radius:50%;
		 align-items: center;
		 justify-content: center;
	 }
	 #head {
		 
	     width: 75%;
	     height: 60rpx;
	     line-height: 60rpx;
	     color: white;
	     margin: 0 auto;
	     text-align: center;
	     border-radius: 30rpx;
	     border: 2rpx solid white;
	     letter-spacing: 8rpx;
	 }
	 .s-top{
		 margin-top: 50rpx;
	 }
	.s-bottom{
	    padding:0 40rpx;
	   font-size: 26rpx;
	   margin-top: 30rpx;
	   line-height: 40rpx;
	   color:#fff;
	   .descrow{
		   margin-bottom: 10rpx;
	   }
	    
	}
}
.page-scroll {
	margin-top: calc(var(--status-bar-height) + 44px);
	height: calc(100vh - var(--status-bar-height) - 44px);
	padding-bottom: 140rpx;
}

.blue-banner {
	height: 520rpx;
	
	width:100%;
	color: #ffffff;
	text-align: center;
	
	.banner-title-small {
		font-size: 26rpx;
		opacity: .9;
	}
	.banner-title {
		margin-top: 40rpx;
		font-size: 44rpx;
		letter-spacing: 2rpx;
		font-weight: 600;
	}
}

.qr-card {
	position: relative;
	margin: -120rpx 30rpx 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 140rpx 30rpx 30rpx;
	
	box-shadow: 0 12rpx 30rpx rgba(0,0,0,.08);
	.leftCircle{
		position: absolute;
		top:251rpx;
		left:-20rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #0d7dfd;
	}
	.rightCircle{
		position: absolute;
		top:251rpx;
		right:-20rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #0d7dfd;
	}
	.halfCircle{
		border-radius: 50%;
		position: absolute;
		border: 10rpx solid #6DB7FD;
		border-width: 10rpx 10rpx 0 10rpx;
		width: 160rpx;
		padding:10rpx;
		height: 80rpx;
		left: 50%;
		border-radius: 100rpx 100rpx 0 0;
		top: -110rpx;
		transform: translateX(-50%);
		overflow: hidden;
	}
	.avatar-wrapper {
		position: absolute;
		left: 50%;
		
		top: -100rpx;
		
		transform: translateX(-50%);
		width: 160rpx;
		height: 160rpx;
		
		border-radius: 50%;
		background: #ffffff;
		padding: 8rpx;
		box-shadow: 0 6rpx 20rpx rgba(0,0,0,.1);
		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.name-viewne {
		text-align: center;
		font-size: 34rpx;
		color: #1a76d2;
		margin-top: 10rpx;
	}
	.org-viewne {
		text-align: center;
		font-size: 28rpx;
		color: #4a90e2;
		margin-top: 16rpx;
	}
	.dash-viewne {
		margin: 24rpx auto;
		height: 0;
		border-bottom: 2rpx dashed #1c90fd;
	}
	.slogan {
		display: flex;
		font-weight:bold;
		letter-spacing: 8rpx;
		flex-direction: column;
		text-align: center;
		font-size: 40rpx;
		color: #1e88e5;
		line-height: 1.6;
		text{
			text-align: center;
		}
		.hl {
			color: #ff9f1a;
			margin-left: 8rpx;
		}
	}
	.contact-qr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		margin-top: 30rpx;
		
		.contact-btn {
			flex: 1;
			
			position: relative;
			color: #ffffff;
			
			display: flex;
			align-items: center;
			justify-content: space-between;
			.contact-text {
				white-space: pre-viewne;
				font-size: 26rpx;
				line-height: 1.5;
			}
			.arrow {
				font-size: 36rpx;
				opacity: .8;
			}
		}
		.qr-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 12rpx;
			border: 2rpx soviewd #e0e0e0;
		}
	}
}

.bottom-gap { height: 120rpx; }

.save-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index:10;
	background: #ffffff;
	border-top: 1rpx soviewd #eaeaea;
	.save-btn {
		width: 100%;
		height: 100rpx;
		background: #00cac1;
		color: #ffffff;
		border: none;
		border-radius: 0;
		font-size: 32rpx;
		font-weight: normal;
	}
}
</style>
