<template>
	<view class="hisrace">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content">
			<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
				<view class="top">
					<view class="title">赛季综合信息</view>
					<view class="line"></view>
					<view class="row">
						<view class="item">参赛次数：<text>{{ info.times || 0 }}届</text></view>
						<view class="item">赛季最高排名：<text>{{ info.rank || 0 }}名</text></view>
					</view>
					<view class="line"></view>
					<view class="row">
						<view class="item">综合赛季学分：<text>{{ info.score || 0 }}分</text></view>
						<view class="item">销售产品总量：<text>{{ info.sold_total || 0 }}套</text></view>
					</view>
					<view class="line"></view>
					<view class="fight">
						<text style="color: #FA6342;">虽然没有很傲人的成绩</text>
						<text>但我还未曾停下追逐的步伐</text>
					</view>
					<!-- <view class="btn">
						<view class="button">
							<text class="cuIcon cuIcon-share"></text>
							<text>分享给好友</text>
						</view>
						<view class="button">
							<text class="cuIcon cuIcon-down"></text>
							<text>保存到相册</text>
						</view>
					</view> -->
				</view>
				<view class="mid">历史赛季信息</view>
				<view class="bot">
					<view class="item" v-for="(item, index) in list" :key="index">
						<view class="title">大卫博士商学院第{{ item.season | numToZh }}季卖货学位争霸赛</view>
						<view class="line"></view>
						<view class="info">
							<view class="left">
								<text>赛季学分：</text>
								<text style="color: #FA6342;">{{ item.score || 0 }}分</text>
							</view>
							<view class="right">
								<text>赛季排名：</text>
								<text style="color: #FA6342;">{{ item.rank || 0 }}名</text>
							</view>
						</view>
					</view>
					<view v-if="!list.length" style="text-align: center;">无</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { api_getHistoryRace } from '../../api.js';
	export default {
		data() {
			return {
				pageTitle: '历史赛季',
				scrollViewHeight: 0,
				 list: [],
				info: {}
			};
		},
		onLoad(opt) {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			this.$scrollViewHeight('.content')  //设置页面内 scroll view 的高度
			this.$hideLoading()  //异步操作结束，停止 loading
			this.$ajax.get(`${api_getHistoryRace}?id=${opt.id}`).then(([ , { data: res }]) => {
				this.info = res.data.per_data
				this.list = res.data.list
			})
		}
	}
</script>

<style lang="scss" scoped>
	.hisrace {
		@include page();
		.content {
			font-size: 24rpx;
			scroll-view {
				background: linear-gradient(#FE531B 0%, #FFB260 100%);
				box-sizing: border-box;
				padding: 30rpx;
				.top {
					background: #FFFFFF;
					box-sizing: border-box;
					padding: 40rpx;
					.title {
						font-size: 32rpx;
						text-align: center;
						margin-bottom: 33rpx;
					}
					.line {
						height: 1rpx;
						background: #EEEEEE;
					}
					.row {
						height: 59rpx;
						line-height: 59rpx;
						display: flex;
						.item {
							float: left;
							width: 50%;
							box-sizing: border-box;
							padding-left: 30rpx;
							text {
								color: #FA6342;
							}
						}
					}
					.fight {
						height: 98rpx;
						margin-top: 34rpx;
						background:linear-gradient(90deg,rgba(255,255,255,0.3) 0%,rgba(250,99,66,0.3) 50%,rgba(255,255,255,0.3) 100%);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
					// .btn {
					// 	height: 60rpx;
					// 	margin-top: 30rpx;
					// 	display: flex;
					// 	justify-content: space-between;
					// 	.button {
					// 		height: 100%;
					// 		width: 240rpx;
					// 		box-sizing: border-box;
					// 		border: 2rpx solid #FA6342;
					// 		border-radius: 30rpx;
					// 		display: flex;
					// 		justify-content: center;
					// 		align-items: center;
					// 		color: #FA6342;
					// 		text {
					// 			margin: 0 6rpx;
					// 			&.cuIcon {
					// 				font-size: 36rpx;
					// 			}
					// 		}
					// 	}
					// }
				}
				.mid {
					margin: 15rpx 0 2rpx;
					height: 74rpx;
					background: #FFFFFF;
					font-size: 32rpx;
					line-height: 74rpx;
					text-align: center;
				}
				.bot {
					background: #EEEEEE;
					.item {
						height: 150rpx;
						margin-bottom: 10rpx;
						background: #FFFFFF;
						display: flex;
						flex-direction: column;
						.title {
							height: 96rpx;
							width: 100%;
							line-height: 96rpx;
							text-align: center;
							font-size: 26rpx;
						}
						.line {
							height: 2rpx;
							background: #EEEEEE;
						}
						.info {
							@include flex();
							flex: 1;
							padding: 0 34rpx;
							font-size: 26rpx;
							box-sizing: border-box;
							justify-content: space-between;
						}
					}
				}
			}
		}
	}
</style>
