webapp / GreenwayWeb

<template>
	<view class="questionnaire">

		<!-- 单选问题 -->
		<view style="padding:20px;background-color: #f6f6f6;">
			<view>
				<h2
					style="color: #000;overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;text-align:center">
					{{ wenjuan.title }}
				</h2>
				<!-- <h5 style="padding: 10px 0;color: #000;">请您认真作答以下题目</h5> -->
				<view class="" style="padding: 10px 0; height: 200px;">
					<image :src="this.$hostUrl + wenjuan.coverImage" mode="scaleToFill"
						style="width:100%;height: 100%;border-radius: 10px;"></image>
				</view>
			</view>
			<view style="padding: 15px;background-color: #fff;border-radius: 10px;">
				<view>
					<!-- <u-parse :content="wenjuan.remarks"></u-parse> -->
					<rich-text :nodes="wenjuan.remarks"></rich-text>
					<!-- {{wenjuan.remarks}} -->
					<!-- <view>
						<view style="display:flex;padding:10px 0;justify-content: space-between;">
							<view style="display:flex;">
								{{wenjuan.createUser}}
							</view>
							<view>
								{{wenjuan.createTime}}
							</view>
						</view>
					</view> -->
					<!-- <view>预计答题时间:{{this.wenjuan.estimatedTime}}分钟</view> -->
				</view>
			</view>
			<view class="question" v-for="(item, index) in wenjuan.question" style="">
				<p class="question-title"
					style="font-weight:600;overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;">
					<span v-if="item.required == '必填'" style="color: red;">*</span>{{ index }}.<span
						style="color:#0FBB59;padding:0 3px;">({{ item.type }})</span>
					{{ item.title }}
				</p>
				<view>

					<!-- <radio-group @change="radioChange" v-model="item.choose" 
						v-if="item.type =='单选'" >
						<label :class="item.choose == val ?'option green':'option gary' " :key="val.answer" v-for="(val, idx) in item.options">
							<view>
								<radio :value="val.answer"  activeBackgroundColor="#E5FFF0" 
									activeBorderColor="#4FCF86" iconColor="#0FBB59" />
							</view>
							<view>{{val.answer}}</view>
						</label>
					</radio-group> -->
					<u-radio-group v-model="item.choose" v-if="item.type == '单选'" style="width: 100%;">
						<view v-if="item.layoutType != 2">
							<u-radio v-for="(val, idx) in item.options" style="width: 100%;"
								:class="val.answer == item.choose ? 'option green' : 'option gary'" :name="val.answer"
								:disabled="item.disabled" :key="idx" :label-disabled="false" active-color="#4FCF86">
								{{ val.answer }}
							</u-radio>
						</view>
						<view v-else-if="item.layoutType == 2" class="myMultiple">
							<div v-for="(val, idx) in item.options"
								:class="['myOption gary', { optionActive: myChoose.answer == val.answer }]" :key="idx"
								@click="chooseAnswerOne(item.options, val, idx)">
								<p class="chooseTag" v-if="myChoose.answer == val.answer"><u-icon name="checkbox-mark"
										color="#fff" size="8pt"></u-icon></p>
								{{ val.answer }}
							</div>
						</view>
					</u-radio-group>

					<u-checkbox-group v-model="item.choose" v-if="item.type == '多选'" style="width: 100%;">
						{{item}}
						<view v-if="item.layoutType != 2">
							<u-checkbox v-for="(val, idx) in item.options" style="width: 100%;"
								:class="val.disabled ? 'option green' : 'option gary'" v-model="val.disabled"
								:label-disabled="false" :name="val.answer" :key="idx"
								active-color="#4FCF86">{{ val.answer }}</u-checkbox>
						</view>
						<view v-else-if="item.layoutType == 2" class="myMultiple">
							<div v-for="(val, index) in item.options"
								:class="['myOption gary', { optionActive: val.disabled == true }]" :key="index"
								@click="chooseAnswerMore(val, index,item)">
								<p class="chooseTag" v-if="val.disabled == true"><u-icon name="checkbox-mark"
										color="#fff" size="8pt"></u-icon></p>
								{{ val.answer }}
							</div>
						</view>
					</u-checkbox-group>
					<!-- <checkbox-group @change="checkboxChange(index,$event,item,idx)"
					v-model="item.choose" 
						>
						
						<label :class="item.choose == val.answer ?'option green':'option gary' "  >
							<view style="margin-bottom:5px;">
								
								<checkbox :name="val.answer" activeBackgroundColor="#E5FFF0"
									activeBorderColor="#4FCF86" iconColor="#0FBB59" />
									<span>{{val.answer}}</span	>
							</view>
							
						</label>
					</checkbox-group> -->
					<view v-if="item.type == '文本'">
						<u-input type="textarea" v-model="item.choose" placeholder="请输入" :border="true"></u-input>
					</view>
				</view>
			</view>

			<!-- 文本填写问题 -->
			<view class="">
				<!--    <p class="question-title">您的建议：</p >
		    <textarea v-model="suggestion"></textarea> -->
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" validate-on-rule-change="false"
					style="background-color:#fff;border-radius: 10px;">
					<u-form-item label="姓名" prop="name" borderBottom ref="item1" v-if="wenjuan.needName == '必填'"
						style="padding:10px 20px 0;">
						<u-input v-model="model1.name" placeholder="请输入姓名"></u-input>
					</u-form-item>
					<u-form-item label="电话" prop="phone" borderBottom v-if="wenjuan.needPhone == '必填'"
						style="padding: 0 20px;">
						<u-input v-model="model1.phone" placeholder="请输入电话"></u-input>
					</u-form-item>
					<u-form-item label="性别" prop="sexl" borderBottom v-if="wenjuan.needGender == '必填'"
						style="padding: 0 20px ;">
						<!-- <u-input v-model="model1.sexl"  placeholder="请输入性别"></u-input> -->
						<u-radio-group v-model="model1.sexl">
							<u-radio active-color="#0FBB59" @change="radioChange" v-for="(item, index) in SexList"
								:key="index" :name="item.name" :disabled="item.disabled">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>


					<view v-if="wenjuan.needOpinion == '必填'" style="padding:0 20px 10px 20px;">
						<view style="margin-bottom:10px;">意见</view>

						<u-input v-model="model1.opinion" type="textarea" :border="true" :maxlength="maxLength" />
						<div class="char-count" style="font-size:12px;">
							{{ currentLength }} / {{ maxLength }}
						</div>
					</view>

				</u-form>

			</view>

			<button class="submit-btn" @click="submit">提交问卷</button>
		</view>
		<u-mask :show="show">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image src="../../static/images/tijiao.png" style="position: absolute;top:40%;width:80%;left:10%"
						mode="aspectFit"></image>
				</view>
			</view>
		</u-mask>


		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				show: false,
				maxLength: 500, // 假设最大字数为500
				suggestion: '',
				model1: {
					name: '',
					phone: '',
					sexl: '',
					opinion: '',
					socialSecurityCardNumber: ''
				},
				wenjuan: {

				},
				wentile: [],
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					phone: [{
							required: true,
							message: '请输入电话'
						},
						{
							type: 'number',
							message: '必须为数字值'
						}
					],
				},

				current: [],
				pageTime: null,
				duoxuan: [],
				danAnswers: [],
				selectedAnswers: [],
				panduanId: [],
				wenjuanIds: '',
				scoreList: [],
				SexList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				],
				timeLeft: null,
				token: '',
				myChoose: {},
				myChooseItem: [

				],
				panduan: false
			};
		},
		computed: {
			currentLength() {
				return this.model1.opinion.length;
			}
		},
		onLoad(options) {

			if (options.ids != '') {
				if (options.src && options.token) {

					this.token = options.token
					let obj = {
						token: options.token
					}
					NET.request(API.jietoken, obj, 'get').then(res => {
						if (typeof res.data == 'string') {

							if (JSON.parse(res.data).phone) {
								this.model1.phone = Number(JSON.parse(res.data).phone)
							}
							if (JSON.parse(res.data).aac003Mask) {
								this.model1.name = JSON.parse(res.data).aac003Mask
							}
							if (JSON.parse(res.data).aac004) {
								this.model1.sexl = JSON.parse(res.data).aac004
								this.panduan = true
							}
							if (JSON.parse(res.data).aac002Mask) {
								this.model1.socialSecurityCardNumber = JSON.parse(res.data).aac002Mask
							}
						}

					})

					// if (options.token != undefined) {}

				} else if (options.phone != undefined) {
					this.model1.phone = options.phone
				}

				this.wenjuanIds = options.ids
				NET.request(API.wenjuanList, {
					id: options.ids,
					// reviewStatus: '3',
				}, 'post').then(res => {
					if (res.data.id) {
						this.wenjuan = res.data
						this.wenjuan.question = JSON.parse(res.data.question)
						//检查this.wenjuan.question这个list的每个里面是否有maxChoose参数，没有的话就加一个
						this.wenjuan.question.forEach(item => {
							if (!item.maxChoose) {
								item.maxChoose = 0
							}
						})


						this.timeLeft = parseInt(this.wenjuan.estimatedTime, 10) * 60; // 将分钟转换为秒
						this.updateCountdownDisplay()

						if (res.data.reviewStatus == '5' || res.data.reviewStatus == '4') {
							uni.reLaunch({
								url: `/pages_category_page1/question/succe?flag=3`
							})
						}
					} else {
						uni.reLaunch({
							url: `/pages_category_page1/question/succe?flag=1`
						})
					}

					// if (res.data.cereQuestionManagements.length > 0) {
					// 	for (let i = 0; i < res.data.cereQuestionManagements.length; i++) {
					// 		this.$set(res.data.cereQuestionManagements[i], 'value', [])
					// 	}
					// }

					// this.wentile = res.data.cereQuestionManagements

					// this.wenjuan.cereQuestionManagements.map(item => {

					// 	item.optionSettings = JSON.parse(item.optionSettings)
					// 	item.score = JSON.parse(item.score)
					// })

				})
			} else {
				uni.reLaunch({
					url: `/pages_category_page1/question/succe?flag=1`
				})
			}
			// 设置倒计时定时器
			// const countdownInterval = setInterval(() => {
			//   if (this.timeLeft > 0) {
			//     this.timeLeft--;
			//     this.updateCountdownDisplay();
			//   } else {
			//     clearInterval(countdownInterval);
			// 	location.reload(true);
			//     // console.log('倒计时结束');
			//     // 这里可以添加倒计时结束时的处理代码
			//   }
			// }, 1000); // 每秒更新一次
			this.pageTime = this.getCurrentTimestamp()

		},
		watch: {},
		methods: {
			// 获取时间
			currentTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();

				// 为月、日、小时、分钟和秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;

				// 返回格式化的日期和时间字符串
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			updateCountdownDisplay() {
				const minutes = Math.floor(this.timeLeft / 60);
				const seconds = this.timeLeft % 60;
				// console.log(`${minutes} 分 ${seconds} 秒`);
				// 这里可以替换为更新DOM元素的代码
			},
			// formatTime(seconds) {
			//   const minutes = Math.floor(seconds / 60);
			//   const remainingSeconds = seconds % 60;
			//   return `${minutes}分${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}秒`;
			// },
			getCurrentTimestamp() {
				let Times = Date.now();
				return Times // 或者 new Date().getTime();
			},
			checkRequiredQuestions(qust) {
				for (let key in qust) {

					let question = qust[key];
					if (question.required === '必填') {
						if (question.type === '文本' || question.type === '单选') {
							if (question.choose === '') {

								this.$refs.uToast.show({
									title: '请填写所有必填题目',
								})

								return false; // 返回false表示有未填写的必填题目
							}
						} else if (question.type === '多选') {


							let hasEnabledOption = question.options.some(option => option.disabled);

							if (!hasEnabledOption) {
								this.$refs.uToast.show({
									title: '请填写所有必填题目',
								})

								return false; // 返回false表示有未填写的必填题目
							}
						}
					}
				}
				return true; // 返回true表示所有必填题目都已填写
			},
			submit() {
				let putTime = this.getCurrentTimestamp() - this.pageTime
				putTime = (putTime / 1000).toFixed(2)
				if (!this.checkRequiredQuestions(this.wenjuan.question)) {
					return
				}
				if (this.model1.name == '' && this.wenjuan.needName == '必填') {
					this.$refs.uToast.show({
						title: '请输入姓名',
					})
					return;
				}
				if (this.wenjuan.needName == '不填' && this.token == '') {

					this.model1.name = '匿名'

				}
				if (this.model1.phone == '' && this.wenjuan.needPhone == '必填') {
					this.$refs.uToast.show({
						title: '电话号码不能为空'
					});
					return;
				}
				if (this.wenjuan.needPhone == '必填' && this.isChineseOrPunctuation(this.model1.phone)) {
					this.$refs.uToast.show({
						title: '请输入电话且不能包含汉字或标点特殊符号',
					})
					return;
				}

				// if(this.wenjuan.needPhone =='不填' && this.wenjuan.fillingConditions == '可重复填写'){
				//  this.model1.phone  = ''
				// }

				if (this.model1.sexl != '男' && this.model1.sexl != '女' && this.wenjuan.needGender == '必填') {
					this.$refs.uToast.show({
						title: '请选择性别',
					})
					return;
				}
				if (this.wenjuan.needGender == '不填' && this.panduan == false) {

					this.model1.sexl = '未知'

				}
				if (this.model1.opinion == '' && this.wenjuan.needOpinion == '必填') {
					this.$refs.uToast.show({
						title: '请输入意见',
					})
					return;
				}



				// JSON.stringify(danAnswers)
				// let array = this.danAnswers.concat(this.selectedAnswers)
				// obj.answerOptions = JSON.stringify(array)
				var arr = []
				// for (let i = 0; i < this.wentile.length; i++) {
				// 	var info = {
				// 		id: "",
				// 		value: [],
				// 		cores:0,
				// 	}
				// 	if (this.wentile[i].questionType == '单选' || this.wentile[i].questionType == '文本'  ) {

				// 			info.id = this.wentile[i].id
				// 			info.value = this.wentile[i].value
				// 			let index =this.wentile[i].value
				// 			if(this.wentile[i].score){

				// 				for (const key in this.wentile[i].score) {
				// 				  if (this.wentile[i].score.hasOwnProperty(key)) { // 确保只获取对象自身的属性，而不是继承的属性

				// 					if(key == index){
				// 						info.cores = this.wentile[i].score[key]; // 设置 info.cores 为当前键对应的值
				// 						      break; // 如果找到了匹配的键，可以提前退出循环
				// 					}
				// 				  }
				// 				}
				// 			}
				// 			// console.log(this.wentile[i].cores[index])
				// 			// info.cores.this.wentile[i].value = 

				// 			arr.push(info)



				// 		// if (this.wentile[i].value != '' && this.wentile[i].value != null && this.wentile[i].value !=
				// 		// 	undefined) {
				// 		// 	info.id = this.wentile[i].id
				// 		// 	info.value = this.wentile[i].value
				// 		// 	let index =this.wentile[i].value
				// 		// 	if(this.wentile[i].score){

				// 		// 		for (const key in this.wentile[i].score) {
				// 		// 		  if (this.wentile[i].score.hasOwnProperty(key)) { // 确保只获取对象自身的属性，而不是继承的属性

				// 		// 			if(key == index){
				// 		// 				info.cores = this.wentile[i].score[key]; // 设置 info.cores 为当前键对应的值
				// 		// 				      break; // 如果找到了匹配的键，可以提前退出循环
				// 		// 			}
				// 		// 		  }
				// 		// 		}
				// 		// 	}
				// 		// 	// console.log(this.wentile[i].cores[index])
				// 		// 	// info.cores.this.wentile[i].value = 

				// 		// 	arr.push(info)

				// 		// }
				// 	} else {
				// 		if (this.wentile[i].value.length > 0) {
				// 			info.id = this.wentile[i].id
				// 			info.value = this.wentile[i].value
				// 				let index =this.wentile[i].value
				// 				   console.log(this.wentile[i].score);
				// 				if(this.wentile[i].score){

				// 					for (const key in this.wentile[i].score) {
				// 					  if (this.wentile[i].score.hasOwnProperty(key)) { // 确保只获取对象自身的属性，而不是继承的属性
				// 							console.log('1111111111111111111',key,index)
				// 							for(let j=0;j<index.length;j++){
				// 								if(key == index[j]){
				// 									console.log(info.cores,this.wentile[i].score[key])
				// 									info.cores += this.wentile[i].score[key]; // 设置 info.cores 为当前键对应的值

				// 								}
				// 							}

				// 					  }
				// 					}
				// 				}
				// 			arr.push(info)

				// 		}
				// 	}


				// }
				console.log(this.wenjuan)

				// let obj = {
				// 	questionnaireId: this.wenjuanIds,
				// 	userName: this.model1.name,
				// 	contactNumber: this.model1.phone,
				// 	gender: this.model1.sexl,
				// 	responseTime: putTime,
				// 	opinion:this.model1.opinion,
				// 	createTime: this.currentTime(),
				// 	answerOptions: {},
				// 	answeringScore: '',
				// 	questionnaireScore: null,

				// }
				//  obj.answeringScore = []

				// for(let i=0;i<arr.length;i++){
				// 	console.log()
				// 	if(arr[i].cores ==null){
				// 		obj.answerOptions[i+1] = arr[i].value
				// 	}else{
				// 		obj.questionnaireScore +=arr[i].cores
				// 		obj.answeringScore.push(arr[i].cores)
				// 		if(typeof arr[i].value !='string'){

				// 			arr[i].value.sort((a, b) => a - b)
				// 			obj.answerOptions[i+1] = arr[i].value.join(',')
				// 		}else{
				// 			obj.answerOptions[i+1]=arr[i].value
				// 		}
				// 	}


				// }
				// obj.answerOptions= JSON.stringify(obj.answerOptions)
				// obj.answeringScore = obj.answeringScore.join(',')

				var obj = {
					...this.wenjuan
				}


				for (var key in obj.question) {
					console.log(obj.question[key])
					if (obj.question[key].type == '多选') {
						obj.question[key].choose = []
						obj.question[key].options.map(res => {
							if (res.disabled) {
								obj.question[key].choose.push(res.answer)
							}

						})
						obj.question[key].choose = obj.question[key].choose.join(',')
					}
				}
				const result = Object.keys(obj.question).reduce((acc, key) => {
					const question = obj.question[key];
					const chooseAnswers = question.choose.split(","); // 处理多选的情况
					const indexes = chooseAnswers.map((choose) => {
						const optionIndex = question.options.findIndex(
							(option) => option.answer === choose
						);
						return optionIndex >= 0 ? optionIndex + 1 : null; // 序号从1开始
					});

					acc[key] = indexes.filter((index) => index !== null).join(","); // 只保留有效序号
					return acc;
				}, {});

				// 计算总分数
				const totalScore = Object.keys(obj.question).reduce((sum, key) => {
					const question = obj.question[key]
					if (question.type === "单选" || question.type === "多选") {
						const chooseAnswers = question.choose.split(","); // 多选时拆分答案
						chooseAnswers.forEach((choose) => {
							const matchedOption = question.options.find(
								(option) => option.answer === choose
							);
							if (matchedOption) {
								sum += parseFloat(matchedOption.score || 0); // 累加分数
							}
						});
					}
					return sum;
				}, 0);

				// console.log(obj.question,totalScore,result)
				// return
				obj.questionnaireId = this.wenjuanIds
				obj.userName = this.model1.name
				obj.contactNumber = this.model1.phone
				obj.gender = this.model1.sexl
				obj.responseTime = putTime
				obj.answerOptions = JSON.stringify(result)
				obj.createTime = this.currentTime()
				obj.opinion = this.model1.opinion
				obj.questionnaireScore = totalScore

				// let obj = {
				// 	questionnaireId: this.wenjuanIds,
				// 	userName: this.model1.name,
				// 	contactNumber: this.model1.phone,
				// 	gender: this.model1.sexl,
				// 	responseTime: putTime,
				// 	opinion:this.model1.opinion,
				// 	createTime: this.currentTime(),
				// 	answerOptions: {},
				// 	answeringScore: '',
				// 	questionnaireScore: null,

				// }
				obj.question = JSON.stringify(obj.question)
				let tijiaoObj = {
					questionnaireId: this.wenjuanIds,
					userName: this.model1.name,
					contactNumber: this.model1.phone,
					gender: this.model1.sexl,
					responseTime: putTime,
					answerOptions: JSON.stringify(result),
					socialSecurityCardNumber: this.model1.socialSecurityCardNumber,
					createTime: this.currentTime(),
					opinion: this.model1.opinion,
					questionnaireScore: totalScore,
					question: obj.question
				}

				console.log(tijiaoObj)

				NET.request(API.wenjuanUp, tijiaoObj, 'post').then(res => {
					// this.show =true

					if (res.data == 'false') {
						uni.reLaunch({
							url: `/pages_category_page1/question/succe?chonfu=true`
						})
					} else {
						uni.reLaunch({
							url: `/pages_category_page1/question/succe?ids=${this.wenjuanIds}`
						})
					}

				})

			},

			isChineseOrPunctuation(str) {
				const regex = /[^\d]/;
				return regex.test(str);
			},


			// radioChange(index, e, item, idx) {
			// 	console.log(index, e, item, idx)

			// 	// item.value = idx;
			// 	// this.$forceUpdate();

			// },
			radioChange(ind) {
				// console.log(index, e, item, idx)
				// console.error(this.items)
				// for (let i = 0; i < this.items.length; i++) {
				// 	if (this.items[i].value === evt.detail.value) {
				// 		this.current = i;
				// 		break;
				// 	}
				// }
				// item.value = idx;
				// this.$forceUpdate();

			},
			checkboxChange(index, e, item, idx) {

				// 	const index1 = item.value.indexOf(idx)
				// 	if (index1 !== -1) {
				// 		item.value.splice(index1, 1);
				// 	} else {
				// 		item.value.push(idx)
				// 	}
				// 	this.$forceUpdate();
			},
			chooseAnswerOne(options, chooseItem, idx) {

				options.forEach(item => {
					item.disabled = false
				})

				for (let key in this.wenjuan.question) {
					this.wenjuan.question[key].options.map(res => {
						if (res.answer == chooseItem.answer) {
							this.wenjuan.question[key].choose = chooseItem.answer
						}
					})


				}

				this.myChoose = {
					...chooseItem
				}
				chooseItem.disabled = true
			},
			chooseAnswerMore(chooseItem, idx, item) {
				if (item.maxChoose && item.maxChoose > 0) {
					// 获取当前题目的已选中选项数量
					const selectedCount = item.options.filter(option => option.disabled).length;
					// 如果已选中到达 maxChoose，并且当前项未被选中，则不允许选择
					if (selectedCount >= item.maxChoose && !chooseItem.disabled) {
						uni.showToast({
							title: `最多只能选择 ${item.maxChoose} 个选项`,
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}



				if (chooseItem.disabled) {
					chooseItem.disabled = false
					for (let key in this.wenjuan.question) {
						this.wenjuan.question[key].options.map(res => {
							if (res.answer == chooseItem.answer) {
								this.wenjuan.question[key].choose = ''
							}
						})
					}
				} else {
					for (let key in this.wenjuan.question) {
						this.wenjuan.question[key].options.map(res => {
							if (res.answer == chooseItem.answer) {
								this.wenjuan.question[key].choose = chooseItem.answer
							}
						})
					}
					chooseItem.disabled = true
				}
			},
			chooseAnswer(item) {
				console.log(1111);
			}
			// chooseAnswerMore(chooseItem, idx) {
			// 	// 获取所有已选中的选项数量

			// 	if (chooseItem.disabled) {
			// 		chooseItem.disabled = false
			// 		for (let key in this.wenjuan.question) {
			// 			this.wenjuan.question[key].options.map(res => {
			// 				if (res.answer == chooseItem.answer) {
			// 					this.wenjuan.question[key].choose = ''
			// 				}
			// 			})
			// 		}
			// 	} else {
			// 		for (let key in this.wenjuan.question) {
			// 			this.wenjuan.question[key].options.map(res => {
			// 				if (res.answer == chooseItem.answer) {
			// 					this.wenjuan.question[key].choose = chooseItem.answer
			// 				}
			// 			})
			// 		}
			// 		chooseItem.disabled = true
			// 	}
			// }

		}
	};
</script>

<style>
	/* 整体页面背景渐变颜色设置 */
	body {
		background: linear-gradient(to bottom, #e9f2f8, #d0e0ea);
		font-family: Arial, sans-serif;
		line-height: 1.6;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
	}

	.question {
		background-color: white;
		padding: 15px;
		margin: 10px 0;
		border-radius: 10px;
	}

	/* 问卷容器样式，确保宽度自适应且不超出屏幕，设置内边距和背景等 */
	.questionnaire {
		width: 100%;
		max-width: 600px;
		flex-grow: 1;
		margin: auto;
		/* padding: 30px; */
		background-color: white;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		box-sizing: border-box;
	}

	/* 页面标题样式，设置背景色、文字颜色、宽度及内边距等 */
	h3 {
		text-align: center;
		color: #000;
		/* background-color: #007BFF; */
		margin: 0;
		padding: 10px 0;
		width: 100%;
		box-sizing: border-box;
	}

	/* 问题标题样式，设置字体大小、颜色及下边框 */
	.question-title {
		font-size: 18px;
		color: #000;
		margin-bottom: 10px;
	}

	/* 选项样式，设置列表样式及光标样式 */
	.option {
		list-style-type: none;
		margin: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		color: black;
		padding: 10px 20px;
		border-radius: 3px;
		transition: background-color 0.3s ease;
		margin-right: 10px;
		font-size: 15px;
		font-weight: 500;

		.u-radio__label {
			color: #000000;
			font-size: 15px;
			font-weight: 500;
		}
	}

	.myOption {
		margin: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 15px 20px;
		border-radius: 3px;
		transition: background-color 0.3s ease;
		margin-right: 10px;
		font-size: 16px;
		color: #000;
		font-family: 'Alibaba PuHuiTi 2.0-55 Regular';
		letter-spacing: 1px;
		overflow: hidden;
		position: relative;

		.chooseTag {
			position: absolute;
			top: 0;
			right: 0;
			width: 20px;
			height: 20px;
			background-color: #0fbb59;
			border-radius: 0 0 0 20px;
			display: flex;
			align-items: center;
			justify-content: center;

			.u-icon__icon {
				margin-left: 4px;
				margin-bottom: 2px;
			}
		}
	}

	.green {
		background-color: #cff4de;

		.u-radio__label {
			color: #12ad55;
		}
	}

	.gary {

		background-color: #f5f5f5;

	}

	.optionActive {
		background-color: #cff4de;
		color: #12ad55;
	}


	/* 文本域样式，设置宽度、高度、边框及内边距 */
	textarea {
		width: 100%;
		height: 100px;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 10px;
		resize: vertical;
		box-sizing: border-box;
	}

	/* 提交按钮样式，设置背景色、颜色、边框、内边距、光标及过渡效果 */
	.submit-btn {
		background-color: #3F9B6A;
		color: white;
		border: none;
		padding: 0px 20px;
		border-radius: 3px;
		cursor: pointer;
		margin-top: 20px;
		transition: background-color 0.3s ease;
		width: 100%;
		box-sizing: border-box;
	}

	/* 提交按钮悬停效果，改变背景色 */
	.submit-btn:hover {
		background-color: #3F9B6A;
	}

	.uni-checkbox-input {
		width: 15px;
		height: 15px;
	}

	.uni-radio-input {
		width: 15px;
		height: 15px;
	}

	::v-deep .u-radio__label {
		white-space: normal !important;
		/* 允许文本换行 */
		word-break: break-all !important;
		/* 当内容过长时，自动换行 */
	}

	::v-deep .myMultiple {
		display: flex;
		width: 100%;
		flex-wrap: wrap;

	}
</style>