<!--
 * @Description:测评前置,用于测试介绍展示
 * @Author: Aimee·Zhang
 * @Date: 2022-01-05 09:16:10
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-13 17:26:38
-->
<template>
	<view class="introduce">
		<view class="intro-history" @click="info.is_answer?'toResult':''">{{info.is_answer?'测评记录':'暂未测评'}}</view>
		<view class="intro-content">
			<view class="intro-title">{{ info.title }}</view>
			<u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
			<u-image class="intro-img" width="100%" radius="20rpx" height="700rpx" :src="info.cover ? info.cover : require('../../static/imgs/indro.png')" :lazy-load="true" />
			<view class="answer" @click="nowAn">开始测评</view>
		</view>
		<view class="remark">本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。</view>
	</view>
</template>

<script>
import { evaluationsInfo } from '@/apis/interfaces/evaluation.js';
export default {
	data() {
		return {
			info: {},
			content: `本测试预计完成时间5-8分钟
			<br/>
                —
			<br/>
                适用于18-65岁，存在亚健康或尿酸偏高人群`,
			shadowStyle: {
				backgroundImage: 'none',
				paddingTop: '0',
				marginTop: '20rpx'
			}
		};
	},
	onShow() {
		evaluationsInfo(this.$Route.query.id).then(res => {
			this.content = res.content;
			this.info = res;
		});
	},
	methods: {
		nowAn() {
			uni.navigateTo({
				url: `/pages/evaluation/index?id=${this.$Route.query.id}`
			});
		},
		toResult(item) {
			uni.navigateTo({
				url: `/pages/evaluation/result?id=${this.$Route.query.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.introduce {
	background-color: $main-color;
	min-height: 100vh;
	.intro-history {
		padding: $padding * 1.5 $padding;
		color: $window-color;
		text-decoration: underline;
		font-size: $title-size-lg;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
	}
	// 测评展示
	.intro-content {
		background: rgba($color: #fff, $alpha: 1);
		min-height: 30vh;
		padding: 0 $padding;
		margin: $margin * 1.5;
		border-radius: $radius;
		position: relative;
		box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
		// 标题
		.intro-title {
			font-size: $title-size * 1.8;
			font-weight: bold;
			color: $text-color;
			position: relative;
			top: -40rpx;
		}
		// 介绍
		.intro-des {
			line-height: $title-size * 1.8;
			color: $text-color;
			position: relative;
			top: -10rpx;
			font-size: $title-size-m;
			padding-bottom: 20rpx;
		}
		// 图片
		.intro-img {
			margin-top: $padding * 0.8;
		}
		// 开始测评
		.answer {
			position: absolute;
			bottom: -30rpx;
			width: 400rpx;
			height: 90rpx;
			line-height: 90rpx;
			left: 50%;
			text-align: center;
			background: rgba($color: #fff, $alpha: 0.94);
			margin-left: -200rpx;
			border-radius: $radius-m * 4;
			font-weight: bold;
			color: $text-color;
			font-size: $title-size-m + 6;
		}
	}
	// 备注信息
	.remark {
		color: $text-gray;
		font-size: $title-size - 6;
		padding: $padding * 2 $padding;
		line-height: $title-size * 1.3;
	}
}
</style>
