<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		nextTick,
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	import QuestionComponent from '../src/question.vue'
	import Question2Component from '../src2/question.vue'
	const $store = useStore()
	const $props = defineProps({
		id: {
			type: String,
			default: '0'
		}
	});

	const getUserInfo = async () => {
		const response = await $api('UserInfo')
		$response(response, () => {
			$store.setUser(response.data.info);
			getQuestionGet()
		})
	}
	const question_info = ref(false)
	const question_list = ref([])
	const question_active = ref(0)
	const start_time = ref(new Date() / 1000)
	const getQuestionGet = async () => {
		const response = await $api('QuestionGet', {
			id: $props.id,
			person: $store.user.person_id,
		})
		$response(response, () => {
			question_info.value = response.data.info
			question_list.value = response.data.list
			question_active.value = 0
			start_time.value = new Date() / 1000
			nextTick(() => {
				localGet()
			})
		})
	}

	const getQuestionLogPush = async () => {
		const response = await $api('QuestionLogPush', {
			id: $props.id,
			person: $store.user.person_id,
		})
		$response(response, () => {
			let content_map = {}
			for (let i in response.data.info) {
				content_map['c' + response.data.info[i]['index']] = response.data.info[i]
			}
			let list = question_list.value
			for (let i in list) {
				if (`c${Number(i) + 1}` in content_map) {
					if (content_map[`c${Number(i) + 1}`].id === list[i].id) {
						if ('active' in content_map[`c${Number(i) + 1}`]) {
							setValue(String(Number(i) + 1), content_map[`c${Number(i) + 1}`].active)
						} else {
							setValue(String(Number(i) + 1), content_map[`c${Number(i) + 1}`].value)
						}
					}
				}
				if (list[i].type === 'select' && list[i].select[Number(list[i].value)].children.length > 0) {
					let children = list[i].select[Number(list[i].value)].children
					for (let ii in children) {
						let question_index = `${Number(i) + 1}-${Number(ii) + 1}`
						if (`c${question_index}` in content_map) {
							if (content_map[`c${question_index}`].id ===
								list[i].select[Number(list[i].value)].children[ii].id) {
								if ('active' in content_map[`c${question_index}`]) {
									setValue(question_index, content_map[`c${question_index}`].active)
								} else {
									setValue(question_index, content_map[`c${question_index}`].value)
								}
							}
						}

						if (children[ii].type === 'select' && children[ii].select[Number(children[ii].value)].children
							.length > 0) {
							let children_2 = children[ii].select[Number(children[ii].value)].children
							for (let iii in children_2) {
								let question_index = `${Number(i) + 1}-${Number(ii) + 1}-${Number(iii) + 1}`
								if (`c${question_index}` in content_map) {
									if (content_map[`c${question_index}`].id ===
										children[ii].select[Number(children[ii].value)].children[iii].id) {
										if ('active' in content_map[`c${question_index}`]) {
											setValue(question_index, content_map[`c${question_index}`].active)
										} else {
											setValue(question_index, content_map[`c${question_index}`].value)
										}
									}
								}
							}
						}
					}
				}
			}
		})
	}

	const mountedAction = () => {
		getUserInfo()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}

	const setValue = (index, value) => {
		const indexes = index.split('-').map(Number);
		for (let i in indexes) {
			indexes[i] = indexes[i] - 1
		}
		let type = question_list.value[indexes[0]].type
		let content = 0
		switch (indexes.length) {
			case 1:
				question_list.value[indexes[0]].value = value
				break
			case 2:
				content = Number(question_list.value[indexes[0]].value)
				question_list.value[indexes[0]].select[content].children[indexes[1]].value = value
				break
			case 3:
				content = Number(question_list.value[indexes[0]].value)
				let content2 = Number(question_list.value[indexes[0]].select[content].children[indexes[1]].value)
				question_list.value[indexes[0]].select[content].children[indexes[1]].select[content2].children[indexes[2]]
					.value = value
				break
		}
		localSave()
	}
	const localSave = () => {
		let data = {
			info: question_info.value,
			list: question_list.value
		}
		uni.setStorageSync('QUESTION_SAVE', JSON.stringify(data))
	}
	const localGet = () => {
		let local_get = uni.getStorageSync('QUESTION_SAVE')
		if (!!local_get) {
			let local_data = JSON.parse(local_get)
			if (JSON.stringify(local_data.info) === JSON.stringify(question_info.value)) {
				question_list.value = local_data.list
				submitClick(false)
			} else {
				uni.removeStorageSync('QUESTION_SAVE')
			}
		}
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})

	const submitClick = (submit = true) => {
		let value_array = []
		let list = question_list.value
		for (let i in list) {
			if (!list[i].value && list[i].value === '') {
				question_active.value = Number(i)
				return uni.$lu.toast(`请填写第 ${Number(i) + 1} 题`)
			}
			let value_data = {
				id: list[i].id,
				index: String(Number(i) + 1),
				question: list[i].question,
			}
			if (list[i].type === 'select') {
				value_data['value'] = list[i].select[Number(list[i].value)].content
				value_data['active'] = list[i].value
				value_data['select'] = list[i].select.map((item) => {
					return item.content
				})
			} else {
				value_data['value'] = list[i].value
			}
			value_array.push(value_data)
			if (list[i].type === 'select' && list[i].select[Number(list[i].value)].children.length > 0) {
				let children = list[i].select[Number(list[i].value)].children
				for (let ii in children) {
					if (!children[ii].value && children[ii].value === '') {
						question_active.value = Number(i)
						return uni.$lu.toast(`请填写第 ${Number(i) + 1}-${Number(ii) + 1} 题`)
					}
					let child_value_data = {
						id: children[ii].id,
						index: `${Number(i) + 1}-${Number(ii) + 1}`,
						question: children[ii].question,
						value: children[ii].value
					}
					if (children[ii].type === 'select') {
						child_value_data['value'] = children[ii].select[Number(children[ii].value)].content
						child_value_data['active'] = children[ii].value
						child_value_data['select'] = children[ii].select.map((item) => {
							return item.content
						})
					} else {
						child_value_data['value'] = children[ii].value
					}
					value_array.push(child_value_data)
					if (children[ii].type === 'select' && children[ii].select[Number(children[ii].value)].children.length > 0) {
						let children_2 = children[ii].select[Number(children[ii].value)].children
						for (let iii in children_2) {
							if (!children_2[iii].value && children_2[iii].value === '') {
								question_active.value = Number(i)
								return uni.$lu.toast(`请填写第 ${Number(i) + 1}-${Number(ii) + 1}-${Number(iii) + 1} 题`)
							}
							let child_value_data2 = {
								id: children_2[iii].id,
								index: `${Number(i) + 1}-${Number(ii) + 1}-${Number(iii) + 1}`,
								question: children_2[iii].question,
								value: children_2[iii].value
							}
							if (children_2[iii].type === 'select') {
								child_value_data2['value'] = children_2[iii].select[Number(children_2[iii].value)].content
								child_value_data2['active'] = children_2[iii].value
								child_value_data2['select'] = children_2[iii].select.map((item) => {
									return item.content
								})
							} else {
								child_value_data2['value'] = children_2[iii].value
							}
							value_array.push(child_value_data2)
						}
					}
				}
			}
		}
		if (!!submit) {
			QuestionSubmit(value_array)
		}
	}

	const QuestionSubmit = async (content) => {
		const response = await $api('QuestionSubmit', {
			question_id: $props.id,
			content: content,
			person_id: $store.user.person_id,
			use_time: new Date() / 1000 - start_time.value
		})
		$response(response, () => {
			uni.removeStorageSync('QUESTION_SAVE')
			uni.redirectTo({
				url: '/pages/main/question/done/done?id=' + response.data.id
			})
		})
	}

	const changePageUp = () => {
		if (question_active.value === 0) {
			return uni.$lu.toast('已经是第一题')
		}
		question_active.value--
	}

	const changePageDown = () => {
		let list = question_list.value
		if (question_active.value === list.length - 1) {
			return uni.$lu.toast('已经是最后一题')
		}
		const i = question_active.value
		if (!list[i].value && list[i].value === '') {
			return uni.$lu.toast(`请填写第 ${Number(i) + 1} 题`)
		}
		if (list[i].type === 'select' && list[i].select[Number(list[i].value)].children.length > 0) {
			let children = list[i].select[Number(list[i].value)].children
			for (let ii in children) {
				if (!children[ii].value && children[ii].value === '') {
					return uni.$lu.toast(`请填写第 ${Number(i) + 1}-${Number(ii) + 1} 题`)
				}
			}
		}
		question_active.value++
	}

	const changeUserClick = () => {
		uni.navigateTo({
			url: '/pages/user/choose/choose'
		})
	}
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view v-if="question_list.length !== 0">
			<view v-if="question_info.type === '检前评估'">
				<view class="banner_wrapper">
					<view @click="getQuestionLogPush()" class="push_log_wrapper">带入上次答题记录</view>
					<image src="@/static/assets/question/banner.png"></image>
				</view>
				<view v-for="(i,k) in question_list" :key="k">
					<QuestionComponent @setValue="setValue" :info="i" :index="String(k + 1)"></QuestionComponent>
				</view>
				<view @click="submitClick()" class="submit_button_wrapper">提交</view>
				<view class="submit_blank_wrapper"></view>
			</view>
			<view v-else>
				<view class="q2_banner_wrapper">
					<view class="q2_banner_text_wrapper">健康问卷</view>
					<image src="@/static/assets/question/q2banner.png"></image>
				</view>
				<view class="user_wrapper">
					<view class="user_box_wrapper">
						<view class="user_info_wrapper">
							<view class="user_name_wrapper">{{ $store.user.name }}</view>
							<view class="user_sex_wrapper">{{ Number($store.user.sex) === 1 ? '男士' : '女士' }}</view>
						</view>
						<view @click="changeUserClick()" class="change_user_button_wrapper">切换用户</view>
					</view>
				</view>
				<view class="qr_title_wrapper">
					<view class="qr_title_icon_wrapper">
						<image src="@/static/assets/question/icon.png"></image>
					</view>
					<view class="qr_title_text_wrapper">
						<view class="qr_title_title_wrapper">体检中心健康问卷</view>
						<view class="qr_title_tip_wrapper">尊敬的先生/女士,为了能够更好地为您进行健康评估,请您认真填写以下问卷。</view>
					</view>
				</view>
				<view class="question_index_wrapper">
					<text>共</text>
					<text class="question_count_wrapper">{{ question_list.length }}</text>
					<text>题 / 第</text>
					<text class="question_count_wrapper">{{ question_active + 1}}</text>
					<text>题</text>
				</view>
				<view v-for="(i,k) in question_list" :key="k">
					<view class="q2_box_wrapper" v-if="question_active === k">
						<view class="q2_card_wrapper">
							<Question2Component @setValue="setValue" :info="i" :index="String(k + 1)">
							</Question2Component>
						</view>
						<view class="page_button_wrapper">
							<view class="page_button_line_wrapper"></view>
							<view class="page_button_group_wrapper">
								<view @click="changePageUp()" class="page_item_wrapper" :class="[
									k === 0 ? 'disable' : ''
								]">
									<view class="page_icon_wrapper page_left_wrapper">
										<image src="@/static/assets/question/next.png"></image>
									</view>
									<view class="page_text_wrapper">上一题</view>
								</view>
								<view @click="changePageDown()" class="page_item_wrapper" :class="[
									k === question_list.length - 1 ? 'disable' : ''
								]">
									<view class="page_text_wrapper">下一题</view>
									<view class="page_icon_wrapper">
										<image src="@/static/assets/question/next.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @click="submitClick()" class="q2_submit_button_wrapper">提交</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.question_count_wrapper {
		color: #36B6BA;
		margin: 0 5rpx;
	}

	.question_index_wrapper {
		display: flex;
		align-items: center;
		justify-content: end;
		font-size: 16rpx;
		color: #88888A;
		margin-right: 40rpx;
		margin-top: 40rpx;
	}

	.page_text_wrapper {
		color: #595757;
		font-size: 24rpx;
		margin: 0 20rpx;
	}

	.page_icon_wrapper {
		width: 12rpx;
		height: 24rpx;
	}

	.page_icon_wrapper image {
		width: 12rpx;
		height: 24rpx;
		display: block;
		object-fit: contain;
	}

	.page_left_wrapper {
		transform: rotate(180deg);
	}

	.page_item_wrapper {
		display: flex;
		align-items: center;
	}

	.page_item_wrapper.disable {
		opacity: .6;
	}

	.page_button_group_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 120rpx);
		margin: 0 auto;
		height: 120rpx;
	}

	.page_button_wrapper {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.page_button_line_wrapper {
		width: 599rpx;
		height: 2rpx;
		background: #B5B6B6;
		margin: 0 auto;
	}

	.q2_submit_button_wrapper {
		width: 514rpx;
		height: 93rpx;
		background: linear-gradient(90deg, #73BCBB 0%, #05A0A9 100%);
		border-radius: 46rpx;
		margin: 40rpx auto 0;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 93rpx;
		text-align: center;
	}

	.q2_card_wrapper {
		width: 682rpx;
		height: calc(100% - 125rpx);
		overflow-y: auto;
	}

	.q2_box_wrapper {
		width: 682rpx;
		height: calc(100vh - 780rpx - 20rpx);
		background: #ffffff;
		border-radius: 10rpx;
		margin: 10rpx auto 0;
		position: relative;
	}

	.qr_title_tip_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		color: #898989;
		line-height: 29rpx;
		margin-top: 16rpx;
		width: 469rpx;
	}

	.qr_title_text_wrapper {
		margin-left: 28rpx;
	}

	.qr_title_title_wrapper {
		font-size: 30rpx;
		font-weight: bold;
		color: #3F3B3B;
		margin-top: 3rpx;
	}

	.qr_title_icon_wrapper {
		width: 95rpx;
		height: 100rpx;
		margin-left: 78rpx;
	}

	.qr_title_icon_wrapper image {
		width: 95rpx;
		height: 100rpx;
		display: block;
		object-fit: contain;
	}

	.qr_title_wrapper {
		display: flex;
		align-items: center;
		margin-top: 53rpx;
	}

	.change_user_button_wrapper {
		width: 120rpx;
		height: 39rpx;
		background: url(@/static/assets/question/btn.png) repeat fixed center;
		background-size: 120rpx 39rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 39rpx;
		text-align: center;
		border-radius: 999rpx;
		margin-right: 39rpx;
	}

	.user_name_wrapper {
		font-weight: 400;
		font-size: 27rpx;
		color: #5A5857;
		line-height: 1;
		margin-left: 43rpx;
	}

	.user_sex_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		color: #9F9FA0;
		line-height: 1;
		margin-left: 20rpx;
	}

	.user_info_wrapper {
		display: flex;
		align-items: end;
	}

	.user_box_wrapper {
		width: 682rpx;
		height: 100rpx;
		background: #ffffff;
		border-radius: 10rpx;
		position: absolute;
		left: 50%;
		top: -39rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user_wrapper {
		position: relative;
		height: calc(100rpx - 39rpx);
	}

	.q2_banner_text_wrapper {
		color: #ffffff;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		font-size: 30rpx;
		z-index: 9;
	}

	.q2_banner_wrapper {
		position: relative;
		width: 750rpx;
		height: 226rpx;
		overflow: hidden;
	}

	.q2_banner_wrapper image {
		width: 750rpx;
		height: 383rpx;
		display: block;
		object-fit: contain;
	}

	.submit_blank_wrapper {
		height: 100rpx;
	}

	.submit_button_wrapper {
		width: 520rpx;
		height: 100rpx;
		background: #239EA3;
		border-radius: 50rpx;
		margin: 40rpx auto 0;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	.banner_wrapper {
		width: 724rpx;
		height: 434rpx;
		margin: 0 auto;
		position: relative;
	}

	.push_log_wrapper {
		position: absolute;
		z-index: 9;
		width: 210rpx;
		height: 50rpx;
		background: #38C6BC;
		right: 30rpx;
		top: -15rpx;
		border-radius: 6rpx;
		margin: 40rpx auto 0;
		font-weight: 500;
		font-size: 16rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.banner_wrapper image {
		width: 724rpx;
		height: 434rpx;
		display: block;
		object-fit: contain;
	}
</style>