<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="添加日程"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#eee"
		>
			<template #right>
				<view class="nav-right" @click="submitSchedule">
					<text class="submit-text">提交</text>
				</view>
			</template>
		</uni-nav-bar>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 患者选择 -->
			<view class="form-section" @click="selectPatient">
				<view class="section-label">
					<text class="label-text">患者</text>
				</view>
				<view class="section-content">
					<text class="content-text">{{ selectedPatient || '请选择患者' }}</text>
					<uni-icons type="right" class ="icon" size="20" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 日期选择 -->
			<view class="form-section " @click="selectDate" style="margin-top: 20rpx;">
				<view class="section-label ">
					<text class="label-text">日期</text>
				</view>
				<view class="section-content">
					<text class="content-text">{{ selectedDate }}</text>
					<uni-icons class ="icon" type="right" size="20" color="#999"></uni-icons>
				</view>
			</view>
			
			<!-- 随访内容 -->
			<view class="form-section content-section cloumn">
				<view class="section-label">
					<text class="label-text">随访内容</text>
				</view>
				<view class="content-input-area">
					<textarea 
						class="content-textarea" 
						v-model="followUpContent"
						placeholder="请输入随访内容"
						:maxlength="500"
						auto-height
					></textarea>
				</view>
			</view>
			
			<!-- 提醒选项 -->
			<view class="reminder-section">
				<!-- 提醒我 -->
				<view class="reminder-item" @click="toggleRemindMe">
					<text class="reminder-text">提醒我</text>
					<view class="checkbox" :class="{ active: remindMe }">
						<uni-icons v-if="remindMe" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
					</view>
				</view>
				
				<!-- 提醒患者 -->
				<view class="reminder-item" @click="toggleRemindPatient">
					<text class="reminder-text">提醒患者</text>
					<view class="checkbox" :class="{ active: remindPatient }">
						<uni-icons v-if="remindPatient" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show">
			<view class="warp">
				    
				<view class="calendarbox">
					<view class="calendartop">
						<view class="title">时间日期</view>
						<view class="datebox">
							<view class="year">{{ headerYear }}</view>
							<view class="day">{{ headerDay }}</view>
						</view>
					</view>
					<uni-calendar class="uni-calendar--hook"   @change="change" @monthSwitch="monthSwitch" />
					<view class="calendarbottom">
						<view class="cancel" @click="show=false">取消</view>
						<view class="ok">确定</view>
					</view>
				</view>	
			 </view>
		</u-overlay>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import  navTo from '@/utils/navTo.js';
	import api from '@/api/api.js';
	// 表单数据
	const show=ref(false);
	const selectedPatient = ref('');
	const selectedDate = ref('');
	const  datetime = ref('');
	const followUpContent = ref('请于近日来院复诊、复查');
	const remindMe = ref(false);
	const remindPatient = ref(true);
	const headerYear = ref('');
	const headerDay = ref('');
	const patientUuid = ref('');
	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
	const addFollowUps=()=>{
		api.addFollowUps({
			patient_uuid: patientUuid.value,
			note: followUpContent.value,
			datetime: datetime.value,
			isremindpatient: remindPatient.value?1:0,
			isremindme:remindMe.value?1:0,
			type:1
		}).then(res=>{
			console.log(res)
			if(res.code==200){
				uni.showToast({ title: '提交成功', icon: 'none' });
				setTimeout(()=>uni.navigateBack(),700);
			}
		})
	}
	// 提交日程
	const submitSchedule = () => {
		if (!selectedPatient.value) {
			uni.showToast({
				title: '请选择患者',
				icon: 'none'
			});
			return;
		}
		addFollowUps();
	};
	
	// 选择患者
	const selectPatient = () => {
		navTo({
			url:'/pages_app/selectPatientSingle/selectPatientSingle',
			events: {
				onPatientsSelected: (data) => {
					selectedPatient.value = data.realName;
					patientUuid.value = data.uuid;
				}
			}
		})
	};
	
	// 选择日期
	const selectDate = () => {
		show.value=true;
		// 使用uni-datetime-picker弹窗选择日期
		
	};
	
	// 切换提醒我
	const toggleRemindMe = () => {
		remindMe.value = !remindMe.value;
	};
	
	// 切换提醒患者
	const toggleRemindPatient = () => {
		remindPatient.value = !remindPatient.value;
	};
	
	// 页面显示时初始化
	onShow(() => {
		initPage();
	});
	const change=(e)=>{
			console.log('change 返回:', e)
			if(e && e.fulldate){
				const d = new Date(e.fulldate);
				const y = d.getFullYear();
				const m = d.getMonth()+1;
				const dd = d.getDate();
				const weekdays = ['日','一','二','三','四','五','六'];
				const w = weekdays[d.getDay()];
				headerYear.value = `${y}年`;
				headerDay.value = `${m}月${dd}日周${w}`;
				datetime.value = `${y}-${m}-${dd}`;
				selectedDate.value = `${y}年${m}月${dd}日(星期${w})`;
			}
		};
				
     const monthSwitch=(e)=>{
		console.log('monthSwitchs 返回:', e)
		}
	
	// 初始化页面
	const initPage = () => {
		const today = new Date();
		const year = today.getFullYear();
		const month = today.getMonth() + 1;
		const day = today.getDate();
		const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
		const weekday = weekdays[today.getDay()];
		selectedDate.value = `${year}年${month}月${day}日(星期${weekday})`;
		datetime.value = `${year}-${month}-${day}`;
		headerYear.value = `${year}年`;
		headerDay.value = `${month}月${day}日周${weekday}`;
	};
</script>

<style lang="scss" scoped>
	.warp {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			.calendarbox{
				margin-top: 180rpx;
				display: flex;
				background-color: #ffffff;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				:deep(.uni-calendar-item--checked){
					background:#ff3346!important;
					border-radius: 50%;
					color:#fff;
				}
				:deep(.uni-calendar-item--isDay){
					border-radius: 50%;
					background:#ff3346!important;
				}
				
				
				.calendartop {
					width:100%;
					.title{
						font-size:34rpx;
						padding:20rpx 30rpx 8rpx;
					}
					.datebox{
						background:#ff3346;
						display: flex;
						width:100%;
						color:#fff;
						font-size: 46rpx;
						padding:20rpx 30rpx;
						box-sizing:border-box;
						align-items: center;
						justify-content: center;
					}
				}
				.calendarbottom{
					color:#ff3346;
					display: flex;
					box-sizing:border-box;
					padding:30rpx 40rpx 40rpx;
					width:100%;
					justify-content: flex-end;
					.ok{
						  font-size: 28rpx;
						margin-left: 40rpx;
					}
					.cancel{
						 font-size: 28rpx;
					}
				}
			}
		}
	.content {
		background-color: #f5f5f5;
		min-height: 100vh;
		
	}
	
	/* 导航栏右侧按钮样式 */
	.nav-right {
		display: flex;
		align-items: center;
	}
	
	.submit-text {
		font-size: 32rpx;
		color: #8B2316;
		font-weight: 500;
	}
	
	/* 主要内容区域 */
	.main-content {
		
		margin-top: 20rpx;
	}
	
	/* 表单区域样式 */
	.form-section {
		display: flex;
		background-color: #ffffff;
		align-items: center;
		justify-content:space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.content-section {
			align-items: flex-start;
		}
		
		.section-label {
			width: 160rpx;
			flex-shrink: 0;
			
			.label-text {
				font-size: 32rpx;
				color: #8B2316;
				font-weight: 500;
			}
		}
		
		.section-content {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			.content-text {
				font-size: 32rpx;
				color: #333333;
			}
			.icon{
				margin-top: 8rpx;
			}
		}
		
		.content-input-area {
			flex: 1;
			margin-top: 20rpx;
			width:100%;
			.content-textarea {
				width: 100%;
				min-height: 200rpx;
				font-size: 32rpx;
				color: #333333;
				line-height: 1.5;
				border: none;
				outline: none;
				resize: none;
			}
		}
	}
	.cloumn{
		flex-direction: column;
	}
	/* 提醒选项区域 */
	.reminder-section {
		background-color: #ffffff;
		margin-top: 20rpx;
		
		.reminder-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.reminder-text {
				font-size: 32rpx;
				color: #8B2316;
				font-weight: 500;
			}
			
			.checkbox {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #cccccc;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				
				&.active {
					background-color: #8B2316;
					border-color: #8B2316;
				}
			}
		}
	}
</style>
