<template>
	<!-- 问卷调查 -->
	<view class="questionNaire" v-if="!dataResult">
		<div class="flex">
			<p class="title">问卷调查</p>
			<img src="@/static/images/quesNaire.png" alt="暂无数据" class="imgs" />
		</div>
		<div class="content">
			<p class="title">{{ quesList.topicName || '' }}</p>
			<div class="contview">
				{{ quesList.introduce || '' }}
			</div>
		</div>
		<uni-forms :modelValue="formData" label-width="100%" class="formCont">
			<uni-forms-item label="您的姓名" required name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入您的姓名" />
			</uni-forms-item>
			<uni-forms-item label="您的手机号" required name="telephone">
				<uni-easyinput type="text" v-model="formData.telephone" placeholder="请输入您的手机号" maxlength="11" />
			</uni-forms-item>
			<uni-forms-item :label="`${index + 1},` + item.problemName" v-for="(item, index) in quesList.problemConfigList" :key="item">
				<!-- 单选 -->
				<uni-data-checkbox
					v-model="formData.problemResultList[index].answersResult"
					:localdata="item.problemOptionList"
					:map="{ text: 'optionName', value: 'id' }"
					v-if="item.problemType == 'radio'"
				/>
				<!-- multiple 多选 -->
				<uni-data-checkbox
					multiple
					v-model="formData.problemResultList[index].answersResult"
					:localdata="item.problemOptionList"
					:map="{ text: 'optionName', value: 'id' }"
					v-if="item.problemType == 'checkbox'"
				/>
				<!-- 简答题 -->
				<uni-easyinput
					type="textarea"
					v-model="formData.problemResultList[index].answersResult"
					placeholder="请输入"
					v-if="item.problemType == 'answers'"
				/>
			</uni-forms-item>
			<button class="btnForm" @click="submitData">提交</button>
		</uni-forms>
	</view>
	<!-- 已提交过的 -->
	<view class="questionNaire" v-if="dataResult">
		<div class="noDatas">
			<img src="@/static/images/noData.png" alt="暂无数据" class="imgs" />
			<p class="titles">您已提交过调查问卷，无需再次提交</p>
		</div>
	</view>
</template>

<script setup name="questionNaire">
import { onMounted, ref } from 'vue';
import { questionNaireList, questionNaireAdd, questionNaireResult } from '@/utils/homeApi.js';

const quesList = ref({ topicName: '', introduce: '', problemConfigList: [] });

const formData = ref({
	name: null,
	telephone: null,
	questionnaireId: '',
	programOpenId: '1623498094314524674', //小程序openId
	problemResultList: []
});
const dataResult = ref(true); //是否填过调查问卷

// 查询是否填过
function getResult() {
	let params = {
		programOpenId: formData.value.programOpenId
	};
	questionNaireResult(params).then((res) => {
		dataResult.value = res.data;
		if (!res.data) {
			getQuesList();
		}
	});
}

// 数据提交
function submitData() {
	console.log(formData.value);
	let pattrens = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
	if (!pattrens.test(formData.value.telephone)) {
		uni.showToast({
			icon: 'none',
			title: '手机号格式不正确'
		});
		return false;
	}
	let params = JSON.parse(JSON.stringify(formData.value));
	// 多选转换格式为string，方便后端接收
	params.problemResultList.map((item) => {
		if (item.problemType == 'checkbox') {
			item.answersResult = item.answersResult.join(',');
		}
	});
	questionNaireAdd(params).then((res) => {
		if (res.code == 200) {
			uni.showToast({
				icon: 'none',
				title: '提交成功'
			});
			getResult();
		}
	});
}
// 获取问题列表
function getQuesList() {
	formData.value.problemResultList = [];
	questionNaireList().then((res) => {
		let datas = res.data;
		quesList.value = datas;
		formData.value.questionnaireId = datas.id;
		datas.problemConfigList.map((item) => {
			formData.value.problemResultList.push({
				answersResult: item.problemType == 'checkbox' ? [] : '',
				problemType: item.problemType,
				problemId: item.id
			});
		});
	});
}

onMounted(() => {
	formData.value.programOpenId = uni.getStorageSync('openidXGWXMN');
	getResult();
});
</script>

<style lang="scss">
.checklist-text,
uni-text {
	font-size: 16rpx !important;
}

.questionNaire {
	padding: 15rpx;

	.flex {
		align-items: center;
		justify-content: center;
		.title {
			width: 200rpx;
			text-align: center;
			color: #00a8a8;
			font-size: 50rpx;
		}
		.imgs {
			width: 196rpx;
			height: 127rpx;
			margin-left: 30rpx;
		}
	}
	.content {
		background: rgba(255, 255, 255, 0.7);
		padding: 15rpx;
		margin: 10rpx 15rpx;
		border-radius: 8rpx;
		.title {
			text-align: center;
		}
		.contview {
			color: #7b7b7e;
			font-size: 18rpx;
			line-height: 30rpx;
		}
	}
	.formCont,
	.uni-forms {
		background: #fff;
		padding: 15rpx;
		margin: 15rpx;
		border-radius: 8rpx;
		.btnForm {
			background: #00a8a8;
			color: #fff;
			border-radius: 50rpx;
		}
		.uni-forms-item {
			display: flex;
			flex-wrap: wrap;
			.uni-forms-item__label {
				font-size: 24rpx !important;
			}
		}
		.uni-forms-item.is-direction-left {
			flex-direction: column;
		}
	}
}
</style>