<template>
<view class="container">
	<view v-if="!dingdan_ok">
		<!-- 确认成功页面 -->
		<view v-if="showSuccessPage" class="success-page">
			<view class="success-icon">✓</view>
			<view class="success-title">确认成功</view>
			<view class="success-desc">诊单已确认，感谢您的配合</view>
			<button class="back-btn" @click="goBack">返回</button>
		</view>
		
		<!-- 诊单详情表单 -->
		<view v-else class="form-wrapper">
			<!-- 基本信息 -->
			<view class="section">
				<view class="section-title">基本信息</view>
				
				<view class="info-item">
					<text class="label">患者姓名</text>
					<text class="value">{{ formData.patient_name || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">身份证号</text>
					<text class="value">{{ formData.id_card || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">手机号</text>
					<text class="value">{{ formData.phone || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">性别</text>
					<text class="value">{{ formData.gender === 1 ? '男' : '女' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">年龄</text>
					<text class="value">{{ formData.age || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">诊断日期</text>
					<text class="value">{{ formData.diagnosis_date || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">诊断类型</text>
					<text class="value">{{ getDiagnosisTypeName() || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">证型</text>
					<text class="value">{{ getSyndromeTypeName() || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">糖尿病期数</text>
					<text class="value">{{ getDiabetesTypeName() || '-' }}</text>
				</view>
			</view>
			
			<!-- 现病史 -->
			<view class="section">
				<view class="section-title">现病史</view>
				
				<view class="info-item">
					<text class="label">口腔感觉</text>
					<text class="value">{{ getAppetiteName() || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">每日饮水量</text>
					<text class="value">{{ getWaterIntakeName() || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">体重变化</text>
					<text class="value">{{ getWeightChangeName() || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">脂肪肝程度</text>
					<text class="value">{{ getFattyLiverDegreeName() || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">饮食情况</text>
					<view class="tag-list">
						<text v-for="item in getDietConditionNames()" :key="item" class="tag">{{ item }}</text>
						<text v-if="getDietConditionNames().length === 0" class="value">-</text>
					</view>
				</view>
				
				<view class="info-item">
					<text class="label">肢体感觉</text>
					<view class="tag-list">
						<text v-for="item in getBodyFeelingNames()" :key="item" class="tag">{{ item }}</text>
						<text v-if="getBodyFeelingNames().length === 0" class="value">-</text>
					</view>
				</view>
				
				<view class="info-item">
					<text class="label">睡眠情况</text>
					<view class="tag-list">
						<text v-for="item in getSleepConditionNames()" :key="item" class="tag">{{ item }}</text>
						<text v-if="getSleepConditionNames().length === 0" class="value">-</text>
					</view>
				</view>
			</view>
			
			<!-- 既往史 -->
			<view class="section">
				<view class="section-title">既往史</view>
				
				<view class="info-item">
					<text class="label">既往史</text>
					<view class="tag-list">
						<text v-for="item in getPastHistoryNames()" :key="item" class="tag">{{ item }}</text>
						<text v-if="getPastHistoryNames().length === 0" class="value">-</text>
					</view>
				</view>
			</view>
			
			<!-- 其他病史 -->
			<view class="section">
				<view class="section-title">其他病史</view>
				
				<view class="info-item">
					<text class="label">外伤史</text>
					<text class="value">{{ formData.trauma_history === 1 ? '有' : '无' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">手术史</text>
					<text class="value">{{ formData.surgery_history === 1 ? '有' : '无' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">过敏史</text>
					<text class="value">{{ formData.allergy_history === 1 ? '有' : '无' }}</text>
				</view>
			</view>
			
			<!-- 诊断信息 -->
			<view class="section">
				<view class="section-title">诊断信息</view>
				
				<view class="info-item" v-if="formData.tongue_images && formData.tongue_images.length > 0">
					<text class="label">舌苔照片</text>
					<view class="image-list">
						<image 
							v-for="(img, index) in formData.tongue_images" 
							:key="index" 
							:src="img" 
							class="tongue-image"
							mode="aspectFill"
							@click="previewImage(img)"
						/>
					</view>
				</view>
				
				<view class="info-item">
					<text class="label">症状</text>
					<text class="value multi-line">{{ formData.symptoms || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">舌苔</text>
					<text class="value">{{ formData.tongue_coating || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">脉象</text>
					<text class="value">{{ formData.pulse || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">治则</text>
					<text class="value multi-line">{{ formData.treatment_principle || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">处方</text>
					<text class="value multi-line">{{ formData.prescription || '-' }}</text>
				</view>
				
				<view class="info-item">
					<text class="label">医嘱</text>
					<text class="value multi-line">{{ formData.doctor_advice || '-' }}</text>
				</view>
			</view>
			
		</view>
		
		<!-- 底部浮动按钮 -->
		<view class="fixed-bottom">
			<button class="confirm-btn" @click="handleConfirm">确认诊单</button>
		</view>
	</view>
	
	<view v-else class="success-container">
		<view class="success-content">
			<view class="success-icon-wrapper">
				<view class="success-icon-circle">
					<text class="success-icon-check">✓</text>
				</view>
			</view>
			<view class="success-title">确认成功</view>
			<view class="success-message">诊单已确认，感谢您的配合</view>
			
		</view>
	</view>
</view>
	
</template>

<script setup>
import { ref,onMounted,getCurrentInstance  } from "vue";
// 2. 获取组件实例，通过 proxy 访问全局属性
const { proxy } = getCurrentInstance()
const formData = ref({
	patient_name: '',
	id_card: '',
	phone: '',
	gender: 1,
	age: '',
	diagnosis_date: '',
	diagnosis_type: '',
	syndrome_type: '',
	diabetes_type: '',
	appetite: '',
	water_intake: '',
	diet_condition: [],
	weight_change: '',
	body_feeling: [],
	sleep_condition: [],
	fatty_liver_degree: '',
	past_history: [],
	trauma_history: 0,
	surgery_history: 0,
	allergy_history: 0,
	tongue_images: [],
	symptoms: '',
	tongue_coating: '',
	pulse: '',
	treatment_principle: '',
	prescription: '',
	doctor_advice: ''
});
let dingdan_ok=ref(false)
// 字典选项
const diagnosisTypeOptions = ref([]);
const syndromeTypeOptions = ref([]);
const diabetesTypeOptions = ref([]);
const pastHistoryOptions = ref([]);
const appetiteOptions = ref([]);
const waterIntakeOptions = ref([]);
const dietConditionOptions = ref([]);
const weightChangeOptions = ref([]);
const bodyFeelingOptions = ref([]);
const sleepConditionOptions = ref([]);
const fattyLiverDegreeOptions = ref([]);

onMounted(() => {
	getDictOptions();
	loadDiagnosisDetail();
});

// 获取字典数据
const getDictOptions = async () => {
	try {
		const [
			diagnosisType, 
			syndromeType,
			diabetesType,
			pastHistory,
			appetite,
			waterIntake,
			dietCondition,
			weightChange,
			bodyFeeling,
			sleepCondition,
			fattyLiverDegree
		] = await Promise.all([
			getDictData('diagnosis_type'),
			getDictData('syndrome_type'),
			getDictData('diabetes_type'),
			getDictData('past_history'),
			getDictData('appetite'),
			getDictData('water_intake'),
			getDictData('diet_condition'),
			getDictData('weight_change'),
			getDictData('body_feeling'),
			getDictData('sleep_condition'),
			getDictData('fatty_liver_degree')
		]);
		
		diagnosisTypeOptions.value = diagnosisType?.diagnosis_type || [];
		syndromeTypeOptions.value = syndromeType?.syndrome_type || [];
		diabetesTypeOptions.value = diabetesType?.diabetes_type || [];
		pastHistoryOptions.value = pastHistory?.past_history || [];
		appetiteOptions.value = appetite?.appetite || [];
		waterIntakeOptions.value = waterIntake?.water_intake || [];
		dietConditionOptions.value = dietCondition?.diet_condition || [];
		weightChangeOptions.value = weightChange?.weight_change || [];
		bodyFeelingOptions.value = bodyFeeling?.body_feeling || [];
		sleepConditionOptions.value = sleepCondition?.sleep_condition || [];
		fattyLiverDegreeOptions.value = fattyLiverDegree?.fatty_liver_degree || [];
	} catch (error) {
		console.error('获取字典数据失败:', error);
	}
};

// 获取单个字典数据
const getDictData = async (type) => {
	try {
		const res = await proxy.apiUrl({
			url: '/api/tcm/getDict',
			method: 'GET',
			data: { type }
		}, false);
		
		if (res.code === 1) {
			return res.data;
		}
		return null;
	} catch (error) {
		console.error(`获取字典${type}失败:`, error);
		return null;
	}
};

// 解析页面参数（支持普通参数和scene参数）
const parsePageParams = (options) => {
	const params = {};
	
	// 如果有scene参数（扫码进入），解析scene
	if (options.scene) {
		try {
			// URL解码scene参数
			const decodedScene = decodeURIComponent(options.scene);
			// 解析键值对：id=4&share_user=1&doctor_id=2
			decodedScene.split('&').forEach(item => {
				const [key, value] = item.split('=');
				if (key && value) {
					params[key] = value;
				}
			});
		} catch (error) {
			console.error('解析scene参数失败:', error);
		}
	}
	
	// 合并普通参数（普通跳转进入）
	Object.keys(options).forEach(key => {
		if (key !== 'scene' && options[key]) {
			params[key] = options[key];
		}
	});
	
	// 获取当前登录用户ID（从本地存储或全局状态获取）
	// TODO: 根据你的项目实际情况获取用户ID
	// 例如: const userInfo = uni.getStorageSync('userInfo');
	// params.user_id = userInfo?.id || 0;
	
	return params;
};

// 加载诊单详情
const loadDiagnosisDetail = async () => {
	// 从页面参数获取诊单ID
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const params = parsePageParams(currentPage.options);
	dingdan_ok.value=uni.getStorageSync('dingdan_ok');
	const diagnosisId = params.id;
	console.log('页面参数:', params, '诊单ID:', diagnosisId);
	
	if (!diagnosisId) {
		uni.showToast({ title: '缺少诊单ID', icon: 'none' });
		return;
	}
	
	uni.showLoading({ title: '加载中...' });
	
	try {
		// 通过 proxy 调用全局的 apiUrl
		const res = await proxy.apiUrl({
			url: '/api/tcm/diagnosisDetail',
			method: 'GET',
			data: {
				id: diagnosisId,
				user_id: params.user_id || 0,
				share_user_id: params.share_user || 0
			},
		}, false); // 不显示加载中
		
		if (res.code === 1) {
			formData.value = res.data;
		} else {
			uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
		}
	} catch (err) {
		uni.showToast({ title: '请求失败', icon: 'none' });
		console.error(err);
	} finally {
		uni.hideLoading();
	}
};

// 获取选中项名称
const getDiagnosisTypeName = () => {
	const item = diagnosisTypeOptions.value.find(i => i.value === formData.value.diagnosis_type);
	return item ? item.name : '';
};

const getSyndromeTypeName = () => {
	const item = syndromeTypeOptions.value.find(i => i.value === formData.value.syndrome_type);
	return item ? item.name : '';
};

const getDiabetesTypeName = () => {
	const item = diabetesTypeOptions.value.find(i => i.value === formData.value.diabetes_type);
	return item ? item.name : '';
};

const getAppetiteName = () => {
	const item = appetiteOptions.value.find(i => i.value === formData.value.appetite);
	return item ? item.name : '';
};

const getWaterIntakeName = () => {
	const item = waterIntakeOptions.value.find(i => i.value === formData.value.water_intake);
	return item ? item.name : '';
};

const getWeightChangeName = () => {
	const item = weightChangeOptions.value.find(i => i.value === formData.value.weight_change);
	return item ? item.name : '';
};

const getFattyLiverDegreeName = () => {
	const item = fattyLiverDegreeOptions.value.find(i => i.value === formData.value.fatty_liver_degree);
	return item ? item.name : '';
};

const getDietConditionNames = () => {
	if (!formData.value.diet_condition || formData.value.diet_condition.length === 0) return [];
	// 处理字符串类型（逗号分隔）或数组类型
	const values = Array.isArray(formData.value.diet_condition) 
		? formData.value.diet_condition 
		: formData.value.diet_condition.split(',');
	
	return values.map(val => {
		const item = dietConditionOptions.value.find(i => i.value === val);
		return item ? item.name : val;
	}).filter(Boolean);
};

const getBodyFeelingNames = () => {
	if (!formData.value.body_feeling || formData.value.body_feeling.length === 0) return [];
	// 处理字符串类型（逗号分隔）或数组类型
	const values = Array.isArray(formData.value.body_feeling) 
		? formData.value.body_feeling 
		: formData.value.body_feeling.split(',');
	
	return values.map(val => {
		const item = bodyFeelingOptions.value.find(i => i.value === val);
		return item ? item.name : val;
	}).filter(Boolean);
};

const getSleepConditionNames = () => {
	if (!formData.value.sleep_condition || formData.value.sleep_condition.length === 0) return [];
	// 处理字符串类型（逗号分隔）或数组类型
	const values = Array.isArray(formData.value.sleep_condition) 
		? formData.value.sleep_condition 
		: formData.value.sleep_condition.split(',');
	
	return values.map(val => {
		const item = sleepConditionOptions.value.find(i => i.value === val);
		return item ? item.name : val;
	}).filter(Boolean);
};

const getPastHistoryNames = () => {
	if (!formData.value.past_history || formData.value.past_history.length === 0) return [];
	// 处理字符串类型（逗号分隔）或数组类型
	const values = Array.isArray(formData.value.past_history) 
		? formData.value.past_history 
		: formData.value.past_history.split(',');
	
	return values.map(val => {
		const item = pastHistoryOptions.value.find(i => i.value === val);
		return item ? item.name : val;
	}).filter(Boolean);
};

// 预览图片
const previewImage = (current) => {
	uni.previewImage({
		current,
		urls: formData.value.tongue_images
	});
};

// 确认诊单
const handleConfirm = () => {
	uni.showModal({
		title: '确认诊单',
		content: '确认后将无法修改，是否确认？',
		success: (res) => {
			if (res.confirm) {
				confirmDiagnosis();
			}
		}
	});
};

// 提交确认诊单
const confirmDiagnosis = async () => {
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const params = parsePageParams(currentPage.options);
	
	console.log('确认诊单参数:', params);
	
	if (!params.id) {
		uni.showToast({ title: '缺少诊单ID', icon: 'none' });
		return;
	}



	uni.showLoading({ title: '提交中...' });
	
	try {
		const res = await proxy.apiUrl({
			url: '/api/tcm/confirmDiagnosis',
			method: 'POST',
			data: {
				id: params.id,
				user_id: params.user_id || 0,
				share_user: params.share_user || 0
			}
		}, false);
		
		if (res.code === 1) {
			uni.showToast({ 
				title: '确认成功', 
				icon: 'none',
				duration: 2000
			});
			 uni.setStorageSync('dingdan_ok', true);
			 dingdan_ok.value=true;
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		} else {
			uni.showToast({ title: res.msg || '确认失败', icon: 'none' });
		}
	} catch (err) {
		uni.showToast({ title: '请求失败', icon: 'none' });
		console.error(err);
	} finally {
		uni.hideLoading();
	}
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.form-wrapper {
	padding: 20rpx;
	padding-bottom: 140rpx; /* 为底部按钮留出空间 */
}

.section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.info-item {
	display: flex;
	margin-bottom: 24rpx;
	line-height: 1.6;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.label {
	flex-shrink: 0;
	width: 180rpx;
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

.value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	word-break: break-all;
	
	&.multi-line {
		white-space: pre-wrap;
		line-height: 1.8;
	}
}

.tag-list {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag {
	display: inline-block;
	padding: 8rpx 20rpx;
	background-color: #f0f5ff;
	color: #1890ff;
	font-size: 24rpx;
	border-radius: 8rpx;
}

.image-list {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.tongue-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
}

.fixed-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0) 100%);
	z-index: 100;
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 44rpx;
	border: none;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

/* 确认成功页面样式 */
.success-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx;
}

.success-content {
	width: 100%;
	max-width: 600rpx;
	background: #fff;
	border-radius: 32rpx;
	padding: 80rpx 40rpx 60rpx;
	text-align: center;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	animation: successFadeIn 0.5s ease-out;
}

@keyframes successFadeIn {
	from {
		opacity: 0;
		transform: translateY(-40rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.success-icon-wrapper {
	margin-bottom: 40rpx;
}

.success-icon-circle {
	width: 160rpx;
	height: 160rpx;
	margin: 0 auto;
	background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12rpx 40rpx rgba(82, 196, 26, 0.3);
	animation: successScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successScale {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.success-icon-check {
	font-size: 100rpx;
	color: #fff;
	font-weight: bold;
	line-height: 1;
}

.success-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 24rpx;
	animation: successSlideIn 0.6s ease-out 0.2s both;
}

@keyframes successSlideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.success-message {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 16rpx;
	animation: successSlideIn 0.6s ease-out 0.3s both;
}

.success-tips {
	font-size: 24rpx;
	color: #999;
	animation: successSlideIn 0.6s ease-out 0.4s both;
}
</style>
