<!--
 * @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" v-if="info.is_answer" @click="toResult">测评记录</view>
        <view class="intro-history" v-else @click="toResult">暂未测评</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;
            }).catch(err => {
                uni.showToast({
                    title: err.message,
                    icon: "none",
                    duration: 2000,
                    mask: true
                })
            });
        },
        methods: {
            nowAn() {
                uni.navigateTo({
                    url: `/pages/evaluation/index?id=${this.$Route.query.id}`
                });
            },
            toResult() {
                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>
