<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年6月9日 02:10:34
	 */
	import {
		ref
	} from 'vue'
	import {
		QuestionSaveAction,
		HospitalExtraInfoAction,
		QuestionPushAction,
		QuestionListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	const $props = defineProps({
		hospital: {
			type: String,
			default: '0'
		}
	});
	const order_type_config = ref(false)
	const HospitalExtraInfo = async () => {
		const response = await HospitalExtraInfoAction({
			hospital: $store.buy_info.hospital,
			mark: 'order_type'
		})
		$response(response, () => {
			order_type_config.value = response.data.info
			QuestionList()
		})
	}
	const question_list = ref([])
	const QuestionList = async () => {
		const response = await QuestionListAction({
			...$props,
			type: 2,
			sex: before_data.value.sex === 1 ? '男' : '女'
		})
		$response(response, () => {
			question_list.value = response.data.list.map((item) => {
				item.answer = []
				return item
			})
		})
	}
	const before_data = ref({
		name: '',
		sex: 1,
		age: '1'
	})
	const user_info = ref(false)
	const ageComputed = (date) => {
		let birthday = new Date(date);
		let today = new Date();
		let age = today.getFullYear() - birthday.getFullYear();
		if (today.getMonth() < birthday.getMonth() ||
			(today.getMonth() == birthday.getMonth() && today.getDate() < birthday.getDate())) {
			age--;
		}
		return age
	}
	const getUserInfo = () => {
		console.log(JSON.stringify($store.buy_info))
		const person = $store.buy_info.person[0]
		before_data.value = {
			name: person.name,
			sex: person.sex,
			age: ageComputed(person.birthday),
		}
		HospitalExtraInfo()
	}
	const done_active = ref(false)
	const sexClick = (sex) => {
		if (before_data.value.sex !== sex) {
			before_data.value.sex = sex
			QuestionList()
		}
	}

	const chooseItemClick = (question, key, answer, kk) => {
		let index = question.answer.indexOf(answer['选项序号'])
		if (index !== -1) {
			question.answer.splice(index, 1)
		} else {
			switch (question['题目类型']) {
				case '单选':
					question.answer = [answer['选项序号']]
					break;
				case '多选':
					question.answer.push(answer['选项序号'])
					break;
			}
		}
	}

	const saveClick = (e) => {
		if (!before_data.value.name) {
			uni.$lu.toast(`请输入您的姓名`)
			anchor('-3')
			return
		}
		if (!before_data.value.sex) {
			uni.$lu.toast(`请选择您的性别`)
			anchor('-2')
			return
		}
		if (!before_data.value.age || Number(before_data.value.age) <= 0) {
			uni.$lu.toast(`请输入您的年龄`)
			anchor('-1')
			return
		}
		let must = {}
		for (let i in question_list.value) {
			must[`Q${question_list.value[i]['题目序号']}`] = Number(i)
		}
		let link = {}
		for (let i in question_list.value) {
			for (let ii in question_list.value[i]['选项列表']) {
				if (!!question_list.value[i]['选项列表'][ii]['关联题目序号列表']) {
					if (`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}` in must) {
						link[`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}`] = must[
							`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}`]
						delete must[`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}`]
					}
				}
			}
		}

		for (let i in question_list.value) {
			for (let ii in question_list.value[i]['选项列表']) {
				if (!!question_list.value[i]['选项列表'][ii]['关联题目序号列表']) {
					let index = question_list.value[i].answer.indexOf(question_list.value[i]['选项列表'][ii]['选项序号'])
					if (index !== -1) {
						must[`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}`] = link[
							`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}`]
						delete link[`Q${question_list.value[i]['选项列表'][ii]['关联题目序号列表']}`]
					}
				}
			}
		}
		let save = {}
		for (let i in must) {
			let info = question_list.value[must[i]]
			if (!info.answer.length) {
				uni.$lu.toast(`请回答第${info['题目序号']}题`)
				anchor(must[`Q${info['题目序号']}`])
				return
			}
			save[info['题目序号']] = info.answer
		}
		QuestionPush(save)
	}

	const anchor = (key) => {
		uni.createSelectorQuery()
			.select('#anchor--4')
			.boundingClientRect((rect) => {
				let top = rect.top
				uni.createSelectorQuery()
					.select(`#anchor-${key}`)
					.boundingClientRect((rect) => {
						scroll_top.value = rect.top - top
					})
					.exec()
			})
			.exec()
	}
	const scroll_top = ref(0)
	const scrollAction = (e) => {
		scroll_top.value = e.target.scrollTop
	}
	const choose_result = ref([])
	const QuestionPush = async (choose) => {
		const response = await QuestionPushAction({
			hospital: $props.hospital,
			age: before_data.value.age,
			sex: before_data.value.sex,
			choose
		})
		$response(response, () => {
			choose_result.value = []
			for (let i in response.data.list) {
				// if (!!response.data.list[i]['可选']) {
				choose_result.value.push(response.data.list[i])
				// }
			}
			done_active.value = true
		})
	}

	const clearClick = () => {
		choose_result.value = []
	}

	const delClick = (key) => {
		choose_result.value.splice(key, 1)
	}

	const doneClick = () => {
		if (order_type_config.value.item === 1 && choose_result.value.length) {
			let items = []
			for (let i in choose_result.value) {
				items.push(choose_result.value[i]['Id'])
			}
			$store.buy_info.items = items
			uni.redirectTo({
				url: '/pages/buy/info/info'
			})
		} else {
			uni.redirectTo({
				url: '/pages/main/home/home'
			})
		}
	}

	const QuestionSave = async (content) => {
		const response = await QuestionSaveAction({
			content: JSON.stringify(content),
			type: 1
		})
		$response(response, () => {
			done_active.value = true
		})
	}
	//设置灰度
	const SysGreyType=ref(0)
	const GetGreySet=()=>{
		uni.getStorage({
			key: 'SysGreytype',
			success: function (res) {
				console.log(res.data);
				if(res.data==1){
					SysGreyType.value=1
				}
			}
		});
	}
	onShow(() => {
		GetGreySet()
		getUserInfo()
	})
</script>
<template>
	<view >
		<view >
			<view class="question_title_wrapper">健康问卷</view>
			<view v-if="done_active">
				<view class="question_tip_wrapper question_done_wrapper">
					问卷已提交，{{ (order_type_config.item === 1 && !!choose_result.length) ? '为您推荐以下检测项目。' : '谢谢！' }}</view>
				<view v-if="order_type_config.item === 1 && !!choose_result.length" class="item_content_wrapper">
					<view class="items_items_wrapper">
						<view class="title_wrapper">
							<view class="title_line_wrapper"></view>
							<view class="title_text_wrapper">自选项目</view>
							<view @click="clearClick()" class="clear_button_wrapper">
								<view class="clear_button_icon_wrapper">
									<image :src="$image('/storage/assets/mp/combo/清空.png')"></image>
								</view>
								<view class="clear_button_text_wrapper">清空</view>
							</view>
						</view>
						<view class="items_list_wrapper" >
							<view class="items_list_item_wrapper" v-for="(i,k) in choose_result" :key="k">
								<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i['名称'] }}</view>
								<view class="items_list_item_right_wrapper">
									<view class="items_list_item_price_wrapper">￥{{ Number(i['价格']).toFixed(2) }}</view>
									<view @click="delClick(k)" class="items_list_item_del_wrapper">
										<image :src="$image('/storage/assets/mp/combo/删除.png')"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @click="doneClick()" class="save_wrapper">
					{{ (order_type_config.item === 1 && !!choose_result.length) ? '开始预约' : '退出问卷' }}
				</view>
			</view>
			<view v-else class="question_wrapper">
				<scroll-view :scroll-top="scroll_top" style="height: 100%;" scroll-y="true" @scroll="scrollAction">
					<view :id="`anchor--4`"></view>
					<view :id="`anchor--3`" class="question_item_wrapper">
						<view class="question_item_title_wrapper">请输入您的姓名</view>
						<view class="question_item_item_wrapper">
							<input type="text" v-model="before_data.name" class="question_item_item_input_wrapper">
						</view>
					</view>
					<view :id="`anchor--2`" class="question_item_wrapper">
						<view class="question_item_title_wrapper">请选择您的性别</view>
						<view class="question_item_item_wrapper">
							<view @click="sexClick(1)" class="question_item_item_choose_wrapper">
								<view class="question_item_item_choose_checkbox_wrapper">
									<uni-icons v-if="before_data.sex === 1" color="#24ba2d" type="checkmarkempty"
										size="40rpx"></uni-icons>
								</view>
								<view class="question_item_item_choose_text_wrapper">男</view>
							</view>
							<view @click="sexClick(2)" class="question_item_item_choose_wrapper">
								<view class="question_item_item_choose_checkbox_wrapper">
									<uni-icons v-if="before_data.sex === 2" color="#24ba2d" type="checkmarkempty"
										size="40rpx"></uni-icons>
								</view>
								<view class="question_item_item_choose_text_wrapper">女</view>
							</view>
						</view>
					</view>
					<view :id="`anchor--1`" class="question_item_wrapper">
						<view class="question_item_title_wrapper">请输入您的年龄</view>
						<view class="question_item_item_wrapper">
							<input type="text" v-model="before_data.age" class="question_item_item_input_wrapper">
						</view>
					</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['题目序号'] }}. {{ i['题干'] }}</view>
						<view v-for="(ii,kk) in i['选项列表']" :key="kk" class="question_item_item_wrapper">
							<view @click="chooseItemClick(i,k,ii,kk)" class="question_item_item_choose_wrapper">
								<view class="question_item_item_choose_checkbox_wrapper">
									<uni-icons v-if="i.answer.indexOf(ii['选项序号']) !== -1" color="#24ba2d" type="checkmarkempty"
										size="40rpx"></uni-icons>
								</view>
								<view class="question_item_item_choose_text_wrapper">
									{{ ii['选项序号'] }}. {{ ii['内容'] }}
								</view>
							</view>
						</view>
					</view>
					<view @click="saveClick" class="save_wrapper" :class="SysGreyType==1? 'grey' :''">提交</view>
				</scroll-view>
			</view>
			<view class="blank_break_wrapper"></view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.title_wrapper {
		display: flex;
		align-items: center;
		height: 95rpx;
		width: 750rpx;
		background: #ffffff;
		border-bottom: 2rpx solid #EBEBEB;
		position: relative;
	}

	.title_line_wrapper {
		width: 7rpx;
		height: 27rpx;
		border-radius: 999rpx;
		margin-left: 30rpx;
	}

	.clear_button_text_wrapper {
		margin-left: 21rpx;
	}

	.clear_button_wrapper {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #7D7D7D;
		line-height: 1;
	}

	.clear_button_icon_wrapper image {
		width: 24rpx;
		height: 26rpx;
		display: block;
	}

	.clear_button_icon_wrapper {
		width: 24rpx;
		height: 26rpx;
	}

	.items_list_item_del_wrapper image {
		width: 24rpx;
		height: 26rpx;
		display: block;
	}

	.items_list_item_del_wrapper {
		width: 24rpx;
		height: 26rpx;
		margin-right: 13rpx;
	}

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

	.items_list_item_price_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #F02E50;
		line-height: 1;
		position: absolute;
		left: 500rpx;
	}

	.items_list_item_text_wrapper {
		margin-left: 22rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		max-width: 450rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.items_list_item_wrapper {
		width: 690rpx;
		height: 94rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EBEBEB;
		margin: 0 auto;
		position: relative;
	}

	.title_text_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1;
		margin-left: 15rpx;
	}

	.items_items_wrapper {
		background: #ffffff;
	}

	.question_wrapper {
		position: fixed;
		left: 0;
		right: 0;
		top: 130rpx;
		bottom: calc(20rpx + var(--safe-area-inset-bottom));
	}

	.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;
	}
	.grey{
			   filter: grayscale(100%);   
		}
</style>