<template>
	<view class="questionnaire-detail">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text class="ri-arrow-left-s-line li-text-70" @click="navBack"></text>
					<text class="li-text-42">问卷详情</text>
				</view>
			</template>
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>
		
		<!-- 整页背景 -->
		<view class="page-bg"></view>

		<!-- 问卷基本信息卡片 -->
		<view class="li-w-92% li-mx-auto li-mt-30">
			<view class="info-card li-bg-white li-rd-20 li-p-30 li-shadow-sm">
				<!-- 问卷标题 -->
				<view class="li-flex li-items-center li-justify-between li-pb-20 li-bottom-border2">
					<view class="li-flex li-items-center">
						<text class="ri-questionnaire-line li-text-40 li-mr-15 li-text-#0070F0"></text>
						<text class="li-text-34 li-font-bold">{{questionnaireDetail.title}}</text>
					</view>
					<wd-tag :color="getTypeColor(questionnaireDetail.type)" :bg-color="getTypeBgColor(questionnaireDetail.type)">
						{{questionnaireDetail.type}}
					</wd-tag>
				</view>

				<!-- 提交信息 -->
				<view class="li-mt-20">
					<view class="li-flex li-items-center li-mb-15">
						<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交人</text>
						<view class="li-flex li-items-center">
							<text class="content-text li-text-28 li-text-#333">{{questionnaireDetail.user_name}}</text>
							<view v-if="questionnaireDetail.is_anonymous" class="user-badge">匿名</view>
						</view>
					</view>

					<view class="li-flex li-items-center li-mb-15">
						<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">联系电话</text>
						<text class="content-text li-text-28 li-text-#333">{{questionnaireDetail.contact_phone || '未提供'}}</text>
					</view>

					<view class="li-flex li-items-center li-mb-15">
						<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">所属小区</text>
						<text class="content-text li-text-28 li-text-#333">{{questionnaireDetail.village_name}}</text>
					</view>

					<view class="li-flex li-items-center li-mb-15">
						<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交时间</text>
						<text class="content-text li-text-28 li-text-#333">{{questionnaireDetail.submit_time}}</text>
					</view>

					<view class="li-flex li-items-center li-mb-15">
						<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">问题数量</text>
						<text class="content-text li-text-28 li-text-#333">{{questionnaireDetail.questions?.length || 0}}题</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 问答内容区域 -->
		<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
			<view class="content-card li-bg-white li-rd-20 li-p-30 li-shadow-sm">
				<view class="li-flex li-items-center li-mb-20">
					<text class="ri-question-answer-line li-text-40 li-mr-15 li-text-#0070F0"></text>
					<text class="li-text-34 li-font-bold">问答内容</text>
				</view>

				<!-- 问答列表 -->
				<view v-if="questionnaireDetail.questions && questionnaireDetail.questions.length > 0">
					<view v-for="(question, index) in questionnaireDetail.questions" :key="index" class="question-item li-mb-30">
						<view class="question-title li-mb-10">
							<text class="question-index li-text-26 li-text-white bg-#0070F0">{{index + 1}}</text>
							<text class="li-text-30 li-font-bold li-ml-15">{{question.title}}</text>
							<text v-if="question.required" class="required-mark">*</text>
						</view>
						
						<!-- 问题类型标签 -->
						<view class="question-type li-my-10">
							<wd-tag size="small" color="#666" bg-color="#f5f5f5">{{getQuestionTypeName(question.type)}}</wd-tag>
						</view>
						
						<!-- 根据问题类型展示不同的答案内容 -->
						<view class="answer-content li-p-20 li-bg-#f9f9f9 li-rd-10">
							<!-- 单选题 -->
							<view v-if="question.type === 'radio'" class="radio-answer">
								<view v-for="(option, optionIndex) in question.options" :key="optionIndex" 
									class="option-item li-mb-10 li-py-10 li-px-20 li-rd-8"
									:class="{'selected-option': question.answer === option.value}">
									<text class="li-text-28">{{option.label}}</text>
								</view>
							</view>
							
							<!-- 多选题 -->
							<view v-else-if="question.type === 'checkbox'" class="checkbox-answer">
								<view v-for="(option, optionIndex) in question.options" :key="optionIndex" 
									class="option-item li-mb-10 li-py-10 li-px-20 li-rd-8"
									:class="{'selected-option': question.answer && question.answer.includes(option.value)}">
									<text class="li-text-28">{{option.label}}</text>
								</view>
							</view>
							
							<!-- 填空题 -->
							<view v-else-if="question.type === 'text'" class="text-answer">
								<text class="li-text-28">{{question.answer || '未填写'}}</text>
							</view>
							
							<!-- 评分题 -->
							<view v-else-if="question.type === 'rating'" class="rating-answer">
								<view class="rating-stars li-flex">
									<text v-for="i in 5" :key="i" 
										:class="[
											'ri-star-fill li-text-40 li-mr-15', 
											i <= question.answer ? 'li-text-#ff9900' : 'li-text-#dddddd'
										]">
									</text>
								</view>
								<text class="li-text-28 li-text-#666 li-mt-10">{{question.answer || 0}}分</text>
							</view>
							
							<!-- 图片上传题 -->
							<view v-else-if="question.type === 'image'" class="image-answer">
								<view v-if="question.answer && question.answer.length" class="image-list li-flex li-flex-wrap">
									<view v-for="(img, imgIndex) in question.answer" :key="imgIndex" class="image-item">
										<image :src="img" mode="aspectFill" class="uploaded-image" @click="previewImage(question.answer, imgIndex)"></image>
									</view>
								</view>
								<view v-else class="li-text-28 li-text-#999">未上传图片</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 空状态 -->
				<view v-else class="empty-state li-py-60 li-flex-center li-flex-col">
					<image src="https://img.yzcdn.cn/vant/empty-image-default.png" mode="aspectFit" class="empty-image"></image>
					<text class="li-text-28 li-text-#999 li-mt-20">暂无问卷内容</text>
				</view>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-mask">
			<wd-loading color="#0070F0" />
		</view>
		
		<wd-toast />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { useToast } from '@/uni_modules/wot-design-uni';

	const Toast = useToast();
	
	// 状态管理
	const loading = ref<boolean>(false);
	const questionnaireId = ref<string | number>('');

	// 模拟问卷详情数据
	const questionnaireDetail = ref({
		id: 2,
		title: '小区环境改造意见征集',
		village_name: '翠湖庭院',
		type: '意见征集',
		user_name: '李四',
		contact_phone: '136****5678',
		is_anonymous: true,
		submit_time: '2024-06-12 09:45',
		questions: [
			{
				id: 1,
				title: '您对小区目前的环境满意度如何？',
				type: 'radio',
				required: true,
				options: [
					{ label: '非常满意', value: '5' },
					{ label: '满意', value: '4' },
					{ label: '一般', value: '3' },
					{ label: '不满意', value: '2' },
					{ label: '非常不满意', value: '1' }
				],
				answer: '3'
			},
			{
				id: 2,
				title: '您认为小区环境需要改进的地方有哪些？（可多选）',
				type: 'checkbox',
				required: true,
				options: [
					{ label: '绿化维护', value: '1' },
					{ label: '健身设施', value: '2' },
					{ label: '儿童游乐设施', value: '3' },
					{ label: '休闲座椅', value: '4' },
					{ label: '照明系统', value: '5' },
					{ label: '停车位', value: '6' }
				],
				answer: ['1', '3', '5']
			},
			{
				id: 3,
				title: '请对小区环境改造提出您的具体建议',
				type: 'text',
				required: false,
				answer: '希望能增加更多的绿植，并加强对现有绿化的养护。小区内的照明系统也需要升级，部分区域晚上太暗影响出行安全。'
			},
			{
				id: 4,
				title: '请对小区物业服务进行评分',
				type: 'rating',
				required: true,
				answer: 4
			},
			{
				id: 5,
				title: '如有小区环境问题，请上传照片',
				type: 'image',
				required: false,
				answer: [
					'https://img.yzcdn.cn/vant/cat.jpeg',
					'https://img.yzcdn.cn/vant/leaf.jpg'
				]
			}
		]
	});

	// 获取问卷类型颜色
	const getTypeColor = (type) => {
		const colorMap = {
			'满意度调查': '#0070F0',
			'意见征集': '#ff9900',
			'投票选举': '#07c160',
			'需求调研': '#9254de',
			'活动报名': '#ff4d4f'
		};
		return colorMap[type] || '#666666';
	};

	// 获取问卷类型背景色
	const getTypeBgColor = (type) => {
		const bgColorMap = {
			'满意度调查': '#e8f4ff',
			'意见征集': '#fff6e9',
			'投票选举': '#e8fff1',
			'需求调研': '#f5f0ff',
			'活动报名': '#ffeded'
		};
		return bgColorMap[type] || '#f5f5f5';
	};
	
	// 获取问题类型名称
	const getQuestionTypeName = (type) => {
		const typeMap = {
			'radio': '单选题',
			'checkbox': '多选题',
			'text': '填空题',
			'rating': '评分题',
			'image': '图片上传'
		};
		return typeMap[type] || '未知类型';
	};

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

	// 返回上一页
	const navBack = () => {
		uni.navigateBack();
	};

	// 加载问卷详情
	const loadQuestionnaireDetail = async () => {
		if (!questionnaireId.value) return;
		
		loading.value = true;
		try {
			// 实际项目中这里应该调用API获取问卷详情
			await new Promise(resolve => setTimeout(resolve, 1000));
			// 模拟获取数据，实际项目中应该替换为API调用
			// questionnaireDetail.value = res.data;
			loading.value = false;
		} catch (error) {
			console.error('加载问卷详情失败', error);
			Toast.fail('加载失败，请重试');
			loading.value = false;
		}
	};

	onLoad((options) => {
		if (options.id) {
			questionnaireId.value = options.id;
			loadQuestionnaireDetail();
		}
	});
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.questionnaire-detail {
		min-height: 100vh;
		position: relative;
		z-index: 0;
		padding-bottom: 40rpx;
	}

	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
		z-index: 10;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	.page-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(247, 248, 250, 0.9) 0%, rgba(247, 248, 250, 1) 100%);
		z-index: -2;
	}

	.info-card, .content-card {
		transition: all 0.3s;
		position: relative;
		z-index: 1;
	}

	.li-bottom-border2 {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.user-badge {
		display: inline-block;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #999;
		padding: 2rpx 12rpx;
		border-radius: 16rpx;
		margin-left: 16rpx;
	}
	
	.question-item {
		.question-title {
			display: flex;
			align-items: center;
			
			.question-index {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 36rpx;
				height: 36rpx;
				border-radius: 18rpx;
				font-size: 22rpx;
			}
			
			.required-mark {
				color: #ff4d4f;
				margin-left: 10rpx;
			}
		}
		
		.answer-content {
			.option-item {
				transition: all 0.2s;
				background-color: #f2f2f2;
				
				&.selected-option {
					background-color: #e8f4ff;
					color: #0070F0;
					font-weight: 500;
				}
			}
			
			.image-list {
				margin-top: 16rpx;
				
				.image-item {
					width: 180rpx;
					height: 180rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					
					.uploaded-image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}
			}
		}
	}
	
	.empty-state {
		.empty-image {
			width: 200rpx;
			height: 200rpx;
		}
	}
	
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	::v-deep .wd-navbar__placeholder {
		height: calc(var(--status-bar-height) + 88rpx) !important;
		padding-top: constant(safe-area-inset-top) !important;
		padding-top: env(safe-area-inset-top) !important;
	}
</style>