<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年6月8日 20:08:53
	 */
	import {
		ref
	} from 'vue'
	import {
		UploadImageAction,
		QuestionSaveAction,
		QuestionListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		hospital: {
			type: String,
			default: '0'
		}
	});
	const question_list = ref([])
	const QuestionList = async () => {
		const response = await QuestionListAction({
			...$props,
			type: 1
		})
		$response(response, () => {
			question_list.value = response.data.list.map((item) => {
				item.content = JSON.parse(item.content)
				item.more = (item.type === 1 || item.type === 4) ? '' : item.content.item.map((i) => {
					return ''
				})
				item.answer = (item.type === 1 || item.type === 4) ? '' : [];
				return item
			})
		})
	}
	const user_info = ref(false)
	const getUserInfo = () => {
		uni.$lu.user((info) => {
			if (!!info.id) {
				user_info.value = info
				QuestionList()
			}
		})
	}

	const questionMark = (info, key) => {
		switch (info.mark) {
			case 'NAME':
				question_list.value[key].answer = (!!user_info.value.person && !!user_info.value.person.id) ?
					user_info.value.person.name :
					''
				break;
			case 'SEX':
				question_list.value[key].answer = [(!!user_info.value.person && user_info.value.person.sex === 1) ? '男' : '女']
				break;
		}
	}


	const chooseContent = (content, index = 0) => {
		return content.split('{{MORE}}')[index]
	}

	const chooseItemClick = (question, key, answer, kk) => {
		let index = question.answer.indexOf(chooseContent(answer))
		if (index !== -1) {
			question.answer.splice(index, 1)
		} else {
			switch (question.type) {
				case 2:
					question.answer = [chooseContent(answer)]
					break;
				case 3:
					question.answer.push(chooseContent(answer))
					break;
			}
		}
	}

	const chooseImage = (key) => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0]
				uni.getFileInfo({
					filePath: tempFilePath,
					success: (result) => {
						if (key === 'photo') {
							const fileSize = result.size;
							const maxSize = 1024 * 1024 * 2;
							if (fileSize > maxSize) {
								uni.showToast({
									title: '选择的文件过大，请重新选择',
									icon: 'none'
								});
							} else {
								imageToBase64(tempFilePath, key);
							}
						} else {
							imageToBase64(tempFilePath, key);
						}
					}
				})
			}
		})
	}
	const imageToBase64 = (url, key) => {
		uni.getImageInfo({
			src: url,
			success(res) {
				let canvasWidth = res.width;
				let canvasHeight = res.height;
				let img = new Image();
				img.src = res.path;
				let canvas = document.createElement('canvas');
				let ctx = canvas.getContext('2d');
				if (canvasWidth >= 1000) {
					canvas.width = canvasWidth * .1;
				} else {
					canvas.width = canvasWidth;
				}
				if (canvasHeight >= 1000) {
					canvas.height = canvasHeight * .1;
				} else {
					canvas.height = canvasHeight;
				}
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				canvas.toBlob((file) => {
					const fileReader = new FileReader()
					fileReader.readAsDataURL(file)
					fileReader.onload = (event) => {
						if (fileReader.result) {
							UploadImage(fileReader.result, key)
						}
					}
				}, 'image/jpeg');
			}
		});
	}

	const UploadImage = async (base64, key) => {
		const response = await UploadImageAction({
			base64
		})
		$response(response, () => {
			question_list.value[key].answer = response.data.url
		})
	}

	const saveClick = (e) => {
		let content = []
		for (let i in question_list.value) {
			if ((question_list.value[i].type === 1 || question_list.value[i].type === 4)) {
				if (!question_list.value[i].answer) {
					uni.$lu.toast(`请填写第${Number(i)+1}题`)
					uni.$lu.anchor(e, `anchor-${i}`)
					return
				}
			}
			if ((question_list.value[i].type === 2 || question_list.value[i].type === 3)) {
				if (!question_list.value[i].answer.length) {
					uni.$lu.toast(`请选择第${Number(i)+1}题`)
					uni.$lu.anchor(e, `anchor-${i}`)
					return
				} else {
					for (let ii in question_list.value[i].content.item) {
						let index = question_list.value[i].content.item[ii].indexOf('{{MORE}}')
						if (index !== -1) {
							let iii = question_list.value[i].answer.indexOf(chooseContent(question_list.value[i].content.item[ii]))
							if (iii !== -1) {
								if (!question_list.value[i].more[ii]) {
									uni.$lu.toast(`请填写第${Number(i)+1}题,第${Number(ii)+1}项`)
									uni.$lu.anchor(e, `anchor-${i}-${ii}`)
									return
								}
							}
						}
					}
				}
			}
			content.push({
				question: question_list.value[i].question,
				answer: question_list.value[i].answer,
				more: question_list.value[i].more,
			})
		}
		QuestionSave(content)
	}
	const done_active = ref(false)
	const QuestionSave = async (content) => {
		const response = await QuestionSaveAction({
			content: JSON.stringify(content),
			type: 1
		})
		$response(response, () => {
			done_active.value = true
		})
	}

	onShow(() => {
		getUserInfo()
	})
</script>
<template>
	<view>
		<view>
			<view class="question_title_wrapper">健康问卷</view>
			<view v-if="done_active">
				<view class="question_tip_wrapper question_done_wrapper">问卷已提交，谢谢！</view>
			</view>
			<view v-else>
				<!-- <view class="question_tip_wrapper">尊敬的客户： 为了促进我们持续的优化和改进体检质量，现在占用您的一些宝贵时间对我们的工作情况进行调查。感谢您的认真对待，谢谢！</view> -->
				<view :id="`anchor-${k}`" class="question_item_wrapper" v-for="(i,k) in question_list" :key="k">
					<view class="question_item_title_wrapper">{{ i.question }}</view>
					<view :ref="questionMark(i,k)" class="question_item_item_wrapper">
						<view v-if="Number(i.type) === 1">
							<input :placeholder="i.content.placeholder" type="text" v-model="question_list[k].answer"
								class="question_item_item_input_wrapper">
						</view>
						<view v-if="Number(i.type) === 2 || Number(i.type) === 3">
							<view v-for="(ii,kk) in i.content.item">
								<view @click="chooseItemClick(i,k,ii,kk)" class="question_item_item_choose_wrapper" :key="kk">
									<view class="question_item_item_choose_checkbox_wrapper">
										<uni-icons v-if="i.answer.indexOf(chooseContent(ii)) !== -1" color="#24ba2d" type="checkmarkempty"
											size="40rpx"></uni-icons>
									</view>
									<view class="question_item_item_choose_text_wrapper">{{ chooseContent(ii) }}</view>
								</view>
								<view v-if="ii.indexOf('{{MORE}}') !== -1 && i.answer.indexOf(chooseContent(ii)) !== -1">
									<view :id="`anchor-${k}-${kk}`" class="question_item_title_wrapper">{{ chooseContent(ii,1) }}</view>
									<input type="text" v-model="question_list[k].more[kk]" class="question_item_item_input_wrapper">
								</view>
							</view>
						</view>
						<view v-if="Number(i.type) === 4">
							<view @click="chooseImage(k)" class="image_wrapper">
								<image :src="$image(question_list[k].answer)" v-if="!!question_list[k].answer"></image>
								{{ i.content.placeholder }}
							</view>
						</view>
					</view>
				</view>
				<view @click="saveClick" class="save_wrapper">提交</view>
			</view>
			<view class="blank_break_wrapper"></view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.question_item_item_choose_text_wrapper {
		width: 550rpx;
	}

	.question_done_wrapper {
		text-align: center;
	}

	.blank_break_wrapper {
		height: 200rpx;
	}

	.save_wrapper {
		width: 600rpx;
		height: 80rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 999rpx;
		margin: 150rpx auto 0;

	}

	.image_wrapper image {
		position: absolute;
		width: 300rpx;
		height: 200rpx;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.image_wrapper {
		position: relative;
		width: 300rpx;
		height: 200rpx;
		background: #f7f7f7;
		border: 1rpx #33333340 solid;
		margin: 20rpx auto 0;
		font-size: 28rpx;
		line-height: 200rpx;
		text-align: center;

	}

	.question_item_item_choose_wrapper {
		display: flex;
		align-items: center;
		width: 600rpx;
		margin: 20rpx auto 0;
	}

	.question_item_item_choose_checkbox_wrapper {
		width: 30rpx;
		height: 30rpx;
		background: #f7f7f7;
		border: 1rpx #33333340 solid;
		line-height: 30rpx;
		margin-right: 20rpx;
		text-align: center;
	}

	.question_item_item_input_wrapper {
		border: 1rpx #cccccc solid;
		height: 60rpx;
		border-radius: 10rpx;
		width: 580rpx;
		padding-left: 20rpx;
		margin: 30rpx auto 0;
	}

	.question_item_title_wrapper {
		font-size: 30rpx;
		margin-top: 50rpx;
		width: 600rpx;
		margin: 30rpx auto 0;
		font-weight: bold;
	}

	.question_tip_wrapper {
		font-size: 26rpx;
		margin-top: 50rpx;
		width: 600rpx;
		margin: 30rpx auto 0;
	}

	.question_title_wrapper {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 50rpx;
	}
</style>