<!--
 * @Description:测评结果页面,用于展示测评结果内容
 * @Author: Aimee·Zhang
 * @Date: 2022-01-05 09:16:10
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-13 17:30:56
-->
<template>
	<view class="answer" v-if="loaded">
		<!-- 头像 -->
		<view class="user">
			<view class="left">
				<u-image width="80rpx" height="80rpx" :src="info.user.avatar ? info.user.avatar : require('@/static/user/cover.png')" :lazy-load="true" shape="circle" />
				<span class="name">{{ info.user.nickname }}</span>
			</view>
			<view class="right">
				<u-icon name="arrow-right" color="#34ce98" size="14" :bold="true" label="重新评测" labelPos="left" labelSize="14" labelColor="#34ce98" space="1" @click="reEva" />
			</view>
		</view>
		<!-- 皮肤年龄 -->
		<view class="answer-item">
			<!-- 标题 -->
			<view class="title-content">
				<view class="title">{{ info.title }}{{ info.explain.title }}</view>
				<u-icon name="share-square" color="#333" size="30" />
			</view>
			<!-- 雷达图 -->
			<view class="charts-box">
				<view class="charts-box"><qiun-data-charts type="radar" :chartData="chartData" :loadingType="4" background="none" :tooltipShow="false" :tapLegend="false" /></view>
			</view>
			<!-- 描述 -->
			<view class="des">
				<u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
					<rich-text :nodes="info.explain.content"></rich-text>
				</u-read-more>
			</view>
		</view>
		<!-- 建议改进 -->
		<view class="answer-item">
			<!-- 标题 -->
			<view class="title-content"><view class="title">建议从一下几个方面改进</view></view>
			<block v-for="(itme, index) in 3" :key="index">
				<view class="title2">
					<u-image width="34rpx" height="34rpx" :src="require('../../static/icon/health.png')" :lazy-load="true" shape="circle" />
					<span>严厉节食导致营养不良，内分泌紊乱</span>
				</view>
				<!-- 描述 -->
				<view class="des">饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。</view>
			</block>
		</view>
		<!-- 营养建议 -->
		<view class="answer-item">
			<!-- 标题 -->
			<view class="title-content"><view class="title">营养建议</view></view>
			<block v-for="(item, index) in 3" :key="index">
				<view class="title2"> <span>{{ item }}. 低Gi</span> </view>
				<!-- 描述 -->
				<view class="des">饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。</view>
			</block>
		</view>
		<!-- 更多 -->
		<view class="answer-item">
			<!-- 标题 -->
			<view class="title-content"> <view class="title">更多护肤知识</view> <u-icon name="arrow-right" color="#333" size="20" /> </view>
			<!-- 横向滚动推荐 -->
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view v-for="(item, index) in 6" :key="index" id="demo1" class="scroll-view-item_H">
					<u-image width="180rpx" height="180rpx" :src="require('../../static/imgs/indro.png')" :lazy-load="true" radius="4" />
					<view class="title">{{ item }}正确洗脸</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { evaluationsAnswersInfo } from '@/apis/interfaces/evaluation.js';
export default {
	data() {
		return {
			chartData: {},
			info: {},
			shadowStyle: {
				backgroundImage: 'none',
				paddingTop: '0',
				marginTop: '20rpx'
			},
			loaded: false
		};
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			evaluationsAnswersInfo(this.$Route.query.id).then(res => {
				this.info = res;
				this.chartData = {
					categories: res.veidoo.categories,
					series: [
						{
							data: res.veidoo.data
						}
					]
				};
				this.loaded = true;
			}).catch(err => {
                uni.showToast({
                    title: err.message,
                    icon: "none",
                    duration: 2000,
                    mask: true
                })
            });
		},
		reEva() {
			uni.navigateTo({
				url: `/pages/evaluation/index?id=${this.$Route.query.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.answer {
	min-height: 100vh;
	padding-bottom: $padding;

	// 用户头像
	.user {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: $padding;
		border-bottom: solid 1rpx #f7f7f7;
		margin-bottom: $margin * 1.5;
		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			font-size: $title-size-m;
			.name {
				padding-left: $padding;
				width: 320rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: $text-color;
				font-weight: bold;
			}
		}
		.right {
			border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
			padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
			border-radius: $padding;
		}
	}
	// 展示列表
	.answer-item {
		background: rgba($color: #fff, $alpha: 1);
		padding: $padding * 1.3 $padding;
		margin: $margin;
		border-radius: $radius;
		position: relative;
		box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
		//标题
		.title-content {
			font-size: $title-size + 6;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			.title {
				color: $text-color;
				font-weight: bold;
			}
		}
		// 描述
		.des {
			font-size: $title-size - 4;
			color: $text-color;
			line-height: $title-size * 2 - 18;
			// 介绍
			.intro-des {
				line-height: $title-size * 1.8;
				color: $text-color;
				position: relative;
				top: -10rpx;
				font-size: $title-size-m !important;
				padding-bottom: 20rpx;
			}
		}
		// 雷达图
		.charts-box {
			width: 100%;
			height: 400rpx;
			margin: $margin 0;
		}
		//二级标题
		.title2 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			span {
				font-size: $title-size-m + 2;
				font-weight: bold;
				margin-left: $margin * 0.3;
			}
		}
		// 横向滚动
		.scroll-view_H {
			white-space: nowrap;
			border-radius: $radius;
			.scroll-view-item_H {
				display: inline-block;
				width: 180rpx;
				margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
				box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
				.title {
					text-align: center;
					padding: $padding * 0.6 $padding * 0.3;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: $text-gray;
					font-size: $title-size - 4;
				}
			}
		}
	}
}
</style>
