<template>
	<navBar :title="'新的患者'" />
	<view class="new-patient-page">
		<!-- 提醒区域 -->
		 <view class="contentbox">
			<view class="reminder-section">
			<view class="reminder-icon">
				<up-image :src="tipImg" width="35rpx" height="42rpx"></up-image>
			</view>
			<text class="reminder-text">提醒: 为了避免不必要的纠纷,请您务必选择线下就诊过的患者</text>
		</view>

		<!-- 随访申请 -->
		<view class="follow-up-section" v-if="applyList.length > 0">
			<view class="section-title">随访申请</view>
			<view class="pending-request" v-for="(item, index) in applyList" :key="index">
				<view class="request-item">
					<view class="avatar">
						<up-image :src="docUrl+item.photo" radius="10rpx" width="120rpx" height="120rpx" ></up-image>
					</view>
					<view class="request-content">
						<view class="request-time">{{ item.createDate }}</view>
						<view class="request-text">{{ item.content }}</view>
						
						<view class="action-buttons">
							<button class="reject-btn" @click="applyListOperate(item.uuid,3)">拒绝</button>
							<button class="agree-btn" @click="applyListOperate(item.uuid,2,item.content)">同意</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 申请记录 -->
		<view class="history-section" v-if="historyList.length > 0">
			<view class="section-title">申请记录(近一月)</view>
			<view class="history-list">
				<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="goPatientDetail(item.patient_uuid,item.status)">
					<view class="avatar">
						<up-image v-if="docUrl+item.patient_photo" :src="docUrl + item.patient_photo" radius="10rpx" width="120rpx" height="120rpx"></up-image>
						
					</view>
					<view class="history-content">
						<view class="history-time">{{ formatDate2(item.create_date) }}</view>
						<view class="nickname">昵称：{{ item.nickname || item.patient_name }}</view>
						<view class="history-text">{{ item.content}}</view>
						<view class="status-info">
							<up-image :src="goImg" width="30rpx" height="30rpx" v-if="item.status==2"></up-image>
							<text class="status-text">{{ getStatusText(item.status) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<empty v-if="applyList.length == 0 && historyList.length == 0" :emptyDesc="'暂无新随访申请患者'" />

		 </view>
		<!-- 底部按钮 -->
		<view class="bottom-button">
			<button class="add-patient-btn" @click="addPatient">加患者</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad,onShow,onBackPress} from '@dcloudio/uni-app';
import goImg from "@/static/go_big.png"
import api from '@/api/api.js'
import docUrl from "@/utils/docUrl"
import dayjs from 'dayjs'
import navTo from "@/utils/navTo.js"
import empty from "@/components/empty/empty.vue"
import navBar from "@/components/navBar/navBar.vue"
import tipImg from "@/static/sendgroup_tishi_big.png"
const from=ref('');
onLoad((options) => {
	if(options.from){
		from.value = options.from;
	}
});
onBackPress(() => {
	if(!from.value){
		plus.runtime.quit();
		return true;
	}
});
// 响应式数据
const pendingRequest = ref({
	name: '陈新华',
	message: '我是陈新华,在线上和您沟通过,请您同意我作为您的随访患者',
	time: '2025-08-18 15:55:03'
});
const applyList = ref([]);
const historyList = ref([]);

// 方法
const goBack = () => {
	if(!from.value){
		plus.runtime.quit();
	}else{
		uni.navigateBack();
	}
};

const rejectRequest = () => {
	uni.showModal({
		title: '确认拒绝',
		content: '确定要拒绝陈新华的随访申请吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '已拒绝申请',
					icon: 'none'
				});
				// 这里可以调用API拒绝申请
			}
		}
	});
};

const agreeRequest = () => {
	uni.showModal({
		title: '确认同意',
		content: '确定要同意陈新华的随访申请吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '已同意申请',
					icon: 'none'
				});
				// 这里可以调用API同意申请
			}
		}
	});
};
const getRelationRecordLately = async () => {
	const res = await api.relationRecordLately({
		page:1,
		pageSize:100
	});
	console.log('随访记录API响应:', res);
	if(res.code === 200){
		historyList.value = res.data.list;
	}
};
const getApplyList = async () => {		// 申请列表
		
		try {
			
			let userInfo=uni.getStorageSync('userInfo')
			const res = await api.applyList();
			console.log('申请列表API响应:', res);
			
			if (res && res.code === 200) {
				applyList.value = res.data;
			} else {
				console.log('申请列表API响应异常:', res);
				uni.showToast({
					title: res.message || '获取申请列表失败',
					icon: 'error',
					duration: 2000
				});
			}
		} catch (error) {
			console.error('获取申请列表失败:', error);
			uni.showToast({
				title: '网络请求失败',
				icon: 'error',
				duration: 2000
			});
		}
	};
	const applyListOperate = async (uuid,status,content) => {
		let data = {
			uuid: uuid,
			status: status
		}
		const res = await api.applyListOperate(data);
		if(res.code === 200){

			uni.showToast({
				title: '操作成功',
				icon: 'none',
				duration: 1500
			});
			let nickname = content.split('，')[0].replace('我是', '');
		 getApplyList();
		 getRelationRecordLately();
		 if(status == 2){
			navTo({
				url: `/pages_app/patientRemark/patientRemark?uuid=${uuid}&&nickname=${nickname}`
			})
		 }
		}
	};
	onShow(() => {
		getApplyList();
		getRelationRecordLately();
		
	});

	const goPatientDetail = (uuid,status) => {
		
		if(status == 2){
			navTo({
			url: `/pages_app/patientDetail/patientDetail?uuid=${uuid}`
		})
		}
	}

// 辅助方法
// 格式化日期
const formatDate = (dateString) => {
	if (!dateString) return '';
	const date = new Date(dateString);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	return `${year}-${month}-${day} ${hours}:${minutes}`;
};
const formatDate2 = (dateString) => {
	return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
}

// 获取状态文本
const getStatusText = (status) => {
	switch (status) {
		case 1: return '待审核';
		case 2: return '已同意';
		case 3: return '已拒绝';
	}
};

const addPatient = () => {
	navTo({
		url:'/pages_app/myCode/myCode?from=myPatient'
	});
	// 这里可以跳转到添加患者页面
};
</script>

<style lang="scss" scoped>
.new-patient-page {

	background-color: #f5f5f5;
}

.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 30rpx;
	background-color: #ffffff;
	font-size: 24rpx;
	color: #333;
	
	.status-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.time {
			font-weight: 500;
		}
		
		.status-icons {
			display: flex;
			gap: 10rpx;
			
					.status-icon {
			width: 32rpx;
			height: 32rpx;
			background-color: #ff0000;
			color: #ffffff;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			font-weight: normal;
		}
		}
	}
	
	.status-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.network {
			color: #666;
		}
		
		.wifi-icon {
			width: 32rpx;
			height: 24rpx;
			background-color: #333;
			border-radius: 2rpx;
		}
		
		.battery {
			width: 40rpx;
			height: 20rpx;
			border: 2rpx solid #333;
			border-radius: 4rpx;
			background-color: #ff0000;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.battery-text {
				font-size: 20rpx;
				color: #ffffff;
			}
		}
	}
}

.header {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.back-btn {
		padding: 10rpx;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: normal;
		color: #ff0000;
		margin-right: 60rpx; // 为了保持标题居中
	}
}
.contentbox{
	top: calc(var(--status-bar-height) + 44px);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 100rpx;
	overflow-y: scroll;
	z-index: 1;
	box-sizing: border-box;
}
.reminder-section {
	display: flex;
	align-items:center;
	padding: 30rpx;
	
	background-color: #ffffff;
	
	
	.reminder-icon {
		width: 35rpx;
		height: 42rpx;
		margin-right: 20rpx;
		margin-top: 4rpx;
	}
	
	.reminder-text {
		flex: 1;
		font-size: 32rpx;
		color: #999;
		line-height: 1.5;
	}
}

.follow-up-section {
	background-color: #ffffff;
	
	
	.section-title {
		padding: 30rpx 30rpx 30rpx;
		font-size: 32rpx;
		background-color: #f0f0f0;
		font-weight: normal;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.pending-request {
		padding: 30rpx;
		
		.request-item {
			display: flex;
			
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				margin-top: 30rpx;
				background-color: #ffb6c1;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.avatar-icon {
					width: 120rpx;
					height: 120rpx;
					background-color: #ffffff;
					border-radius: 50%;
				}
			}
			
			.request-content {
				flex: 1;
				margin-left: 20rpx;
				.request-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					margin-bottom: 20rpx;
				}
				
				.request-time {
					font-size: 24rpx;
					display: flex;
					justify-content: flex-end;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.action-buttons {
					display: flex;
					justify-content: center;
					
					gap:60rpx;
					.reject-btn {
						
						width:180rpx;
						height: 70rpx;
						border: 2rpx solid #8B2316;
						background-color: #ffffff;
						color: #8B2316;
						padding:0;
						border-radius: 10rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0;
					}
					
					.agree-btn {
						margin: 0;
					   width:180rpx;
						padding:0;
						height: 70rpx;
						background-color: #8B2316;
						color: #ffffff;
						border: none;
						border-radius: 10rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
}

.history-section {
	background-color: #ffffff;
	margin-bottom: 120rpx; // 为底部按钮留出空间
	
	.section-title {
		padding: 30rpx 30rpx 30rpx;
		font-size: 32rpx;
		font-weight: normal;
		background-color: #f0f0f0;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.history-list {
		margin-bottom: 30rpx;
		.history-item {
			display: flex;
			
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				margin-top: 30rpx;
				background-color: #ffb6c1;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.avatar-icon {
					width: 40rpx;
					height: 40rpx;
					background-color: #ffffff;
					border-radius: 50%;
				}
			}
			
			.history-content {
				flex: 1;
				margin-left: 20rpx;
				min-width: 0;
				.nickname {
					font-size: 30rpx;
					font-weight: normal;
					color: #8B2316;
					margin-bottom: 10rpx;
				}
				
				.history-text {
					display: block;
					width: 100%;
					font-size: 30rpx;
					color: #333;
					line-height: 1.4;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 20rpx;
				}
				
				.status-info {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					gap: 10rpx;
					margin-bottom: 10rpx;
					
					.status-arrow {
						width: 0;
						height: 0;
						border-left: 8rpx solid transparent;
						border-right: 8rpx solid transparent;
						border-bottom: 12rpx solid #999;
						transform: rotate(45deg);
					}
					
					.status-text {
						font-size: 30rpx;
						color: #999;
					}
				}
				
				.history-time {
					display: flex;
					justify-content: flex-end;
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}
}

.bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	
	background-color: #ffffff;
	border-top: 1rpx solid #f0f0f0;
	
	.add-patient-btn {
		width: 100%;
		height: 100rpx;
		background-color: #00cac1;
		color: #ffffff;
		border: none;
		border-radius: 0rpx;
		font-size: 32rpx;
		font-weight: normal;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
