<!--
 * @Description:用于展示评测列表，带分页加载更多~
 * @Author: Aimee·Zhang
 * @Date: 2022-01-05 09:13:53
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-14 08:40:36
-->
<template>
	<view class="evaluation-list ">
		<view class="evaluation-item" v-for="(item, index) in evalList" :key="index">
			<!-- 评测列表主要内容 标题 图片 描述 -->
			<view class="--content">
				<u-image class="content-img" width="170rpx" height="170rpx" radius="20rpx" :src="item.cover ? item.cover : require('../../static/imgs/test.png')" :lazy-load="true" />
				<view class="title-des"> <view class="title">{{ item.title }}</view> <view class="des">{{ item.description || '--' }}</view> </view>
			</view>

			<!-- 分数 -->
			<view class="score" v-if="item.is_answer"> <span>{{ item.answer.total }}</span> 分 </view>

			<!-- 评测状态 -->
			<view class="--status">
				<!-- 已测试展示 状态-->
				<view class="status" v-if="item.is_answer"> <span class="dian">·</span> {{ item.remark }} </view>
				<view v-if="item.is_answer" class="history" @click="toResult(item)">查看历史结果</view>
				<!-- 未测试展示 状态-->
				<view class="status" v-if="!item.is_answer"> <span class="dian">·</span> <span class="person">{{ item.remark }}</span> 人已测 | 约4~8分钟 </view>
				<u-icon name="arrow-right" :color="item.is_answer ? '#26a377' : '#faa81a'" size="14" :bold="true" :label="item.is_answer ? '重新评测' : '开始测评'" labelPos="left" labelSize="14" space="1" :labelColor="item.is_answer ? '#26a377' : '#faa81a'" @click="nowEva(item)" />
			</view>
		</view>
		<!-- 没有更多 -->
		<view class="no-more">没有更多~</view>
	</view>
</template>

<script>
import { evaluations } from '@/apis/interfaces/evaluation.js';
export default {
	data() {
		return {
			evalList: []
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		// 测试列表
		getList() {
			evaluations().then(res => {
				this.evalList = res;
			}).catch(err => {
                uni.showToast({
                    title: err.message,
                    icon: "none",
                    duration: 2000,
                    mask: true
                })
            });
		},
		// nowEva
		nowEva(item) {
			uni.navigateTo({
				url: `/pages/evaluation/introduce?id=${item.evaluation_id}`
			});
		},
		//测评结果
		toResult(item) {
			uni.navigateTo({
				url: `/pages/evaluation/result?id=${item.evaluation_id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 列表
.evaluation-item {
	background-color: #fff;
	padding: $padding;
	margin: $margin;
	box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
	border-radius: $radius;
	position: relative;
	// 评测列表主要内容
	.--content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		.content-img {
			box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
			border-radius: 30rpx;
		}
		.title-des {
			padding-left: $padding - 10;
			width: 440rpx;
			.title {
				font-size: $title-size + 4;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 340rpx;
			}
			.des {
				font-size: $title-size-lg;
				color: $text-gray;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-top: $padding - 8;
			}
		}
	}
	// .测试状态
	.--status {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		color: $text-gray-m;
		font-size: $title-size-m;
		padding-top: $padding;
		.status {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			.dian {
				font-size: $title-size-lg;
				margin-right: $padding * 0.2;
				font-weight: bold;
			}
			.person {
				color: #faa81a;
			}
		}
		.history {
			text-decoration: underline;
		}
	}
	// 分数
	.score {
		font-size: $title-size-m - 2;
		color: $text-gray-m;
		position: absolute;
		right: $padding;
		top: $padding - 10;
		span {
			font-size: 50rpx;
			color: $main-color;
			font-weight: bold;
		}
	}
}
// 没有更多
.no-more {
	color: $uni-text-color-disable;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: $padding;
	font-size: $title-size-m;
}
</style>
