<template>
	<view>
		<view class="user-list">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in list" :key="index">
					<u-cell :title="`${item.nickname}`" value="移除" isLink>
						<u-avatar slot="icon" shape="square" size="45" :src="item.avatar"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell>
				</u-list-item>
			</u-list>
			<view class="bottom"></view>
		</view>
		<empty v-if="!list.length" tips="暂无数据" />
	</view>
</template>

<script>
	import * as Api from '@/api/user-referee.js'
	import Empty from '@/components/empty'
	export default {
		components: {
			// Search,
			Empty
		},
		data() {
			return {
				list: []
			}
		},
		onLoad(option) {
			this.getUserReferee()
		},
		onShow(){},
		methods: {
			getUserReferee(){
				const userId = uni.getStorageSync('userId')
				Api.listUserReferee({userId}).then(res => {
					this.list = res.data
				})
			},
			onRemove(id){
				Api.removeUserReferee(id).then(()=>{
					this.$toast('移除成功')
					this.getUserReferee()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-list{
		width: 750rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		.item{
			border-bottom: 1rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			.info{
				.food{
					color: #ff0000;
					.goods-name{
						padding-right: 10rpx;
					}
				}
				.is-buy{
					color: #ff0000;
				}
				.no-buy{
					color: #0000ff;
				}
				.order-ok{
					color: #51b2aa;
				}
			}
			.time{
				color: #c2c2c2;
			}
			.remove{
				padding: 0 30rpx;
			}
		}
		.bottom{
			height: 50rpx;
		}
		.custom-style {
				margin: 10rpx 0;
				width: 220rpx;
			}
		.custom-active-style {
				margin: 10rpx 0;
				width: 220rpx;
				color: #ffffff;
				background-color: #51b2aa;
			}
	}
</style>
