<template>
	<view>
		<view class="whitebg">
			<view class="resultbox" v-for="(form,index) in formlist" :key="index">
				<view class="ppbar">
					<view class="bar-text">
						<view v-for="n in form.evalTutorVoList" :style="{width: ((n.maxScore-n.minScore)/(form.evalTutorVoList[form.evalTutorVoList.length-1]?.maxScore-form.evalTutorVoList[0]?.minScore)*100) +'%'}">
							<text class="brr">123</text>
<!-- 							<view>
								<text>{{Math.floor(n.minScore)}}</text>
								<text>{{Math.floor(n.maxScore)}}</text>
							</view> -->
						</view>
					</view>
					<view class="bar-bg"></view>
					<view class="dotbox" :style="{left: (form.score/(form.evalTutorVoList[form.evalTutorVoList.length-1]?.maxScore-form.evalTutorVoList[0]?.minScore)*100) +'%'}">
						<text>{{form.score}}</text>
						<image src="@/exam/img/dian.png" />
					</view>
				</view>
				<view>
					<view class="flexline" v-if="formlist.length>1">
						<label>测评条目</label>
						<view>{{form.title}}</view>
					</view>
					<view class="flexline">
						<label>测评结果</label>
						<view>{{form.desc}}</view>
					</view>
					<view class="flexline">
						<label>辅导建议</label>
						<view>{{form.expression}}</view>
					</view>
				</view>
			</view>
			
			<view class="content">
				{{paperInfo.instruction}}
			</view>
			<button class="sharebtn" @click="showRecmand">分享测试</button>
			<!-- <button class="sharebtn" open-type="share" @click="showRecmand">分享测试</button> -->
		</view>
		
		<view v-if="reclist?.length>0">
			<view class="tbar">
				相关测评
			</view>
			<view class="list">
				<view class="item" v-for="n in reclist" :key="n" @click="goDetail">
					<image :src="config.baseUrl_api + n.images"></image>
					<view class="info">
						<view class="tt esp_2">{{n.paperName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js';
	import config from '@/config.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	const app = getApp();
	const formlist = ref([])
	const paperInfo = ref({})
	const reclist = ref([])
	const recImg = ref('')
	let paperId = ''
	onLoad((option)=>{
		paperId = option.id
	})
	onShow(() => {
		if (app.globalData.isLogin) {
			init();
		} else {
			app.firstLoadCallback = () => {
				init();
			};
		}
	})
	function init(){
		uni.showLoading({
			title:'加载中'
		})
		api.getUserAnswerResult({paperId:paperId}).then(res=>{
			formlist.value = res.data
			uni.hideLoading()
		})
		api.getPaperInfo(paperId).then(res=>{
			paperInfo.value = res.data
		})
		getReclist()
	}
	function getReclist(){
		api.getHomePageHot().then(res=>{
			reclist.value = res.data
		})
	}
	onShareAppMessage(() => {
		return {
			title: '',
			path: `/exam/subject?id=${paperId}`
			// imageUrl: app.globalData.baseUrl + project.value.proPic
		};
	});
	onShareTimeline(() => {
		return {
			title: '',
			path: '/pages/index/index'
			// imageUrl: app.globalData.baseUrl + project.value.proPic
		};
	});
	function showRecmand(){
		uni.showLoading({
			title:'加载中'
		})
		const currUser = uni.getStorageSync('currUser')
		api.getExclusiveImage(currUser.userId).then(res=>{
			recImg.value = 'data:image/png;base64,' + res.msg
			// showRecImg.value = true
			 clickImg()
			uni.hideLoading()
		})
	}
	function clickImg() {
		uni.previewImage({
			urls: [recImg.value],
			// current: 0,
			success: function(res) {
				console.log('success', res)
			},
			fail: function(res) {
				console.log('fail', res)
			},
			complete: function(res) {
				console.log('complete', res)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.whitebg {
		background: #fff;
		padding: 60rpx 30rpx;
	}

	.resultbox {
		color: #fff;margin: 0 0 20rpx;
		padding: 30rpx;border-radius: 20rpx;overflow: hidden;
background: linear-gradient(90deg, #81A7F3, #A2CCF1);

		.ppbar {
			position: relative;margin-bottom: 40rpx;

			.bar-bg {
				height: 10rpx;
				background: #fff;
				opacity: 0.4;
				border-radius: 0rpx;position: absolute;width: 100%;
				left: 0;top: 100rpx;
			}

			.bar-text {background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.6));
				text-align: center;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;

				// line-height: 100rpx;
				.brr{border-right: 1rpx solid #82a7f3;height: 100rpx;display: inline-block;
				width: 100%;text-align: center;color: transparent;}
				view {flex: 1 1 auto;
						view{display: flex;justify-content: space-between;
						text{padding: 0 4rpx;opacity: 0;}
					}
					&:last-child .brr{border-right:none;}
				}
				
			}

			.dotbox {text-align: center;margin-left: -32rpx;
				position: absolute;top: 26rpx;
				text{display: block;font-size: 34rpx;font-weight: bold;padding: 0 10rpx;
				color: #82a7f3;    margin: 0 0 14rpx 0;background-color: #fff;border-radius: 10rpx;
					position: relative;
					&::after{
						content: '';position: absolute;bottom: -10rpx;left: 0;right: 0;
						margin: auto;
						    width: 0;
						    height: 0;
						    border-left: 10rpx solid transparent;
						    border-right: 10rpx solid transparent;
						    border-top: 10rpx solid #fff;
					}
				}
				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.flexline {
			display: flex;margin: 0 0 20rpx;

			label {
				opacity: 0.6; flex: 0 0 auto;
				margin-right: 40rpx;
			}
			view{
				  flex: 1 1 auto;
			}
		}
	}

	.content {padding: 20rpx;
		margin: 20rpx 0;
font-size: 30rpx;
font-weight: 400;
line-height: 44rpx;
color: #030303;
	}

	.sharebtn {
		height: 70rpx;
		width: 50%;
		color: #FFFFFF;
		font-size: 30rpx;
		background: #F89D46;
		border-radius: 35rpx;
	}

	.list {
		padding: 24rpx 0 0 24rpx;
		overflow: hidden;
	}

	.item {
		border-radius: 15rpx;
		background: #fff;
		width: 338rpx;
		float: left;
		margin: 0 24rpx 24rpx 0;

		image {
			height: 180rpx;
			width: 100%;
		}

		.info {
			padding: 20rpx 26rpx;
			height: 100rpx;
			box-sizing: border-box;

			.tt {
				font-size: 28rpx;
				line-height: 36rpx;
			}
		}
	}

	.tbar {
		padding: 0 25rpx;
		margin: 40rpx 0 10rpx;

		text {
			float: right;
			color: #929AA0;
			background: #fff;
			border-radius: 20rpx;
			padding: 0 14rpx;
		}
	}
</style>