<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	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);
			getQuestionLogInfo()
		})
	}

	const mountedAction = () => {
		getUserInfo()
	}
	const question_info = ref(false)
	const getQuestionLogInfo = async () => {
		const response = await $api('QuestionLogInfo', {
			id: $props.id,
			person: $store.user.person_id,
		})
		$response(response, () => {
			question_info.value = response.data
		})
	}

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

	const toPath = (path) => {
		uni.navigateTo({
			url: `/pages/main/question${path}`
		})
	}

	const QuestionLogDelete = async () => {
		const response = await $api('QuestionLogDelete', {
			id: $props.id,
			person: $store.user.person_id,
		})
		$response(response, () => {
			uni.redirectTo({
				url: `/pages/main/question/list/list`
			})
		})
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view v-if="!!question_info">
			<view class="no_items_wrapper" v-if="question_info.items.length === 0">
				<view class="done_icon_wrapper">
					<uni-icons color="#ffffff" type="checkmarkempty" size="80"></uni-icons>
				</view>
				<view class="done_tip_wrapper">问卷已提交，感谢您的参与！</view>
			</view>
			<view v-else>
				<view class="banner_wrapper">
					<image src="@/static/assets/question/log.png"></image>
				</view>
				<view class="user_wrapper">
					<view class="avatar_wrapper">
						<image src="@/static/assets/question/avatar.png"></image>
					</view>
					<view class="user_info_wrapper">
						<view class="user_item_wrapper">
							<view class="user_value_wrapper">{{ question_info.age }}</view>
							<view class="user_text_wrapper">评估年龄</view>
						</view>
						<view class="user_line_wrapper"></view>
						<view class="user_item_wrapper">
							<view class="user_value_wrapper">{{ question_info.weight }}</view>
							<view class="user_text_wrapper">体重指数（BMI）</view>
						</view>
					</view>
				</view>
				<view class="user_blank_wrapper"></view>
				<view class="item_wrapper">
					<view class="item_title_wrapper">健康风险</view>
					<view class="item_list_wrapper">
						<view v-if="question_info.check_items.length === 0">· 无</view>
						<view class="item_item_wrapper" v-for="(i,k) in question_info.check_items" :key="k">
							· {{ i.name }}
						</view>
					</view>
				</view>
				<view class="bottom_button_wrapper">
					<view @click="toPath(`/info/info?id=${$props.id}`)" class="check_button_wrapper">查看体检方案</view>
					<view class="button_line_wrapper">
						<view @click="toPath('/list/list')" class="short_button_wrapper">查看答题记录</view>
						<view @click="QuestionLogDelete()" class="short_button_wrapper">删除评估记录</view>
					</view>
				</view>
				<view class="bottom_blank_wrapper"></view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.no_items_wrapper {
		margin-top: 300rpx;
	}

	.done_icon_wrapper {
		width: 200rpx;
		height: 200rpx;
		background: #06A2F9;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 99999rpx;
	}

	.done_tip_wrapper {
		width: 500rpx;
		margin: 0 auto;
		font-size: 30rpx;
		text-align: center;
		font-weight: bold;
		margin-top: 50rpx;
	}

	.bottom_blank_wrapper {
		height: calc(340rpx + 20rpx);
	}

	.short_button_wrapper {
		width: 326rpx;
		height: 88rpx;
		background: #239EA3;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 0 8rpx;
	}

	.button_line_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32rpx;
	}

	.check_button_wrapper {
		width: 668rpx;
		height: 88rpx;
		background: #239EA3;
		border-radius: 44rpx;
		margin: 41rpx auto 0;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.bottom_button_wrapper {
		width: 750rpx;
		height: 340rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 0rpx 0rpx #DBDCDD;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.item_item_wrapper {
		font-weight: 400;
		font-size: 30rpx;
		color: #595959;
		line-height: 80rpx;
	}

	.item_list_wrapper {
		margin-left: 32rpx;
		margin-top: 30rpx;
	}

	.item_title_wrapper {
		width: 314rpx;
		height: 72rpx;
		background: #DDFCFE;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #4EBDC6;
		text-align: center;
		line-height: 72rpx;
		margin: 0 auto;
	}

	.item_wrapper {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 16rpx auto 0;
		padding-bottom: 100rpx;
	}

	.user_blank_wrapper {
		height: 234rpx;
		width: 100%;
	}

	.user_item_wrapper {
		text-align: center;
		width: 45%;
	}

	.user_line_wrapper {
		width: 2rpx;
		height: 110rpx;
		background: #4C4E61;
		opacity: 0.22;
	}

	.user_value_wrapper {
		font-weight: 500;
		font-size: 72rpx;
		color: #232323;
	}

	.user_text_wrapper {
		font-size: 24rpx;
		color: #6C728B;
	}

	.user_info_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 90rpx;
	}

	.banner_wrapper {
		width: 750rpx;
		height: 423rpx;
		margin: 0 auto;
	}

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

	.user_wrapper {
		width: 710rpx;
		height: 280rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		position: absolute;
		top: 378rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.avatar_wrapper {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 150rpx;
		height: 150rpx;
		background: #239EA3;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.avatar_wrapper image {
		width: 140rpx;
		height: 140rpx;
		display: block;
		object-fit: contain;
	}
</style>