<template>
	<view class="challengeChoose">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="content">
			<view class="search">
				<input type="text" v-model="phone" placeholder="请输入代理昵称/代理手机号" />
			</view>
			<view class="list">
				<scroll-view scroll-y="true" :style="{ height: scrollViewHeight + 'px' }">
					<view class="item" v-for="(item, index) in showList" :key="index">
						<image class="avatar" :src="item.avatar"></image>
						<view class="info">
							<text class="nickname">{{ item.nickname }}</text>
							<text class="score">{{ item.integral }}学分</text>
						</view>
						<view class="choose" @click="choose(item)">挑战</view>
					</view>
					<view class="item">没有更多了</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getCrown } from '@/api.js'
	export default {
		data() {
			return {
				pageTitle: '选择代理',
				scrollViewHeight: 0,
				list: [],
				phone: ''
			};
		},
		computed: {
			showList() {
				if (this.phone) {
					return this.list.filter(e => (e.nickname + e.up_phone).includes(this.phone))
				}
				return this.list
			}
		},
		mounted() {
			uni.loading()
			this.$scrollViewHeight('.list')
			this.$ajax.get(api_getCrown).then(([, { data: { data: { list }}}]) => {
				uni.hideLoading()
				this.list = list.sort((a, b) => b.integral - a.integral)
			})
		},
		methods: {
			choose({ id, nickname, avatar }) {
				uni.pkInfo = {
					accept_id: id,
					accept_avatar: avatar,
					accept_nickname: nickname,
				}
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.challengeChoose {
		@include page();
		overflow: scroll;
		.content {
			@include flex(column);
			background: $custom-nav-borderbot-color;
			.search {
				width: 100%;
				height: 98rpx;
				margin: 1px 0;
				@include flex();
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 0 38rpx 0 45rpx;
				input {
					flex: 1;
					height: 64rpx;
					padding: 0 24rpx;
					background: #F2F4F5;
					margin-right: 24rpx;
					border-radius: 78rpx;
					border: 1rpx solid #EEEEEE;
				}
				.searchBTN {
					width:168rpx;
					height:64rpx;
					color: #FFFFFF;
					@include flex();
					font-size: 32rpx;
					border-radius:64rpx;
					background:rgba(247,100,84,1);
				}
			}
			.list {
				flex: 1;
				width: 100%;
				.item {
					@include flex();
					height: 140rpx;
					margin-bottom: 1rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					padding: 0 38rpx 0 45rpx;
					.avatar {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}
					.info {
						flex: 1;
						margin: 0 25rpx;
						font-size: 26rpx;
						@include flex(column);
						align-items: flex-start;
						.nickname {
							width: 375rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.score {
							color: #C55AAE;
							margin-top: 12rpx;
						}
					}
					.choose {
						width:168rpx;
						height:64rpx;
						color: #FFFFFF;
						@include flex();
						font-size: 32rpx;
						border-radius:32rpx;
						background:rgba(247,100,84,1);
					}
				}
			}
		}
	}
</style>
