<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
		</uni-nav-bar>


		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<!-- 问卷标题 -->
			<view class="survey-title">关于用户体验反馈的调查</view>

			<!-- 问卷说明 -->
			<view class="survey-desc">
				为了给您提供更好的服务，希望您能抽出几分钟时间，将进的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！
			</view>

			<!-- 问题1：社区大门数量 -->
			<view class="question-item">
				<view class="question-title">
					<text class="required">*</text>1.您社区的大门数量
				</view>
				<view class="answer-text">1</view>
			</view>

			<!-- 问题2：消防演练符合项 -->
			<view class="question-item">
				<view class="question-title">
					<text class="required">*</text>2.您所在的社区，关于消防演练，下列符合几项
				</view>
				<view class="answer-text">一周2~3次</view>
			</view>

			<!-- 问题3：健康医疗服务 -->
			<view class="question-item">
				<view class="question-title">
					<text class="required">*</text>3.您所在的社区是否有健康医疗服务
				</view>
				<view class="answer-text">是</view>
			</view>

			<!-- 问题4：综合评分（星级） -->
			<view class="question-item">
				<view class="question-title">
					<text class="required">*</text>4.您对所在社区的综合评分
				</view>
				<view class="star-container">
					<view v-for="(item, index) in 5" :key="index" class="star-item" :class="{ active: index < score }">
						<text class="star-icon">★</text>
					</view>
				</view>
			</view>

			<!-- 问题5：建议 -->
			<view class="question-item">
				<view class="question-title">
					<text class="required">*</text>5.您还有哪些建议
				</view>
				<view class="answer-text">没有其他建议</view>
				<!-- 如需可编辑输入框，替换为下方textarea -->
				<!-- <textarea class="suggest-input" placeholder="请输入您的建议" v-model="suggestion" /> -->
			</view>

		</scroll-view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {




		},
		created() {

		},
		onShow() {

		},

		mounted() {},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				score: 3, // 默认3星，对应原图
				suggestion: ''



			}
		},


		methods: {

			goBack() {
				uni.redirectTo({
					url: '/pages/service-list/questionnaireSurveyIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		/* background-color: #fff; */
	}

	/* 滚动内容区 */
	.content-scroll {
		flex: 1;
		padding: 0 30rpx;
	}

	/* 标题与描述 */
	.survey-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		text-align: center;
		margin: 0px 0 10px 0;
		;
	}

	.survey-desc {
		font-size: 12px;
		color: #4A4A4A;
		line-height: 1.6;
		margin-bottom: 10px;
		text-align: justify;
	}

	.question-item {
		margin-bottom: 50rpx;
	}

	.question-title {
		font-size: 16px;
		color: #000;
		margin-bottom: 5px;
		font-weight: 600;
	}

	.required {
		color: #ff0000;
		font-size: 34rpx;
		margin-right: 8rpx;
	}

	.answer-text {
		font-size: 32rpx;
		color: #333;
		line-height: 1.5;
		padding-left: 15px;
	}

	/* 星级评分样式 */
	.star-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.star-item {
		font-size: 48rpx;
		color: #dcdcdc;
		cursor: pointer;
		transition: color 0.2s;
	}

	.star-item.active {
		color: #409eff;
		/* 蓝色，和原图一致 */
	}

	.star-icon {
		font-family: monospace;
	}

	/* 建议输入框样式（如需可编辑） */
	.suggest-input {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		background: #fff;
		font-size: 32rpx;
		color: #333;
		box-sizing: border-box;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>