<template>
	<view class="">
		<view class="nav_area"></view>
		<view class="search_area">
			<view class="search_box">
				<input type="text" v-model="account" placeholder="请输入团队人员id/手机号码" placeholder-style="color: #ededed;">
				<button @click="search()">搜索</button>
			</view>
		</view>
		<view class="list_area">
			<view v-for="(item,index) in listsData" :key="index" class="list-item">
				<view class="info">
					<image :src="item.avatar" mode=""></image>
					<view class="">ID：{{item.id}}</view>
				</view>
				<view class="amount">
					<view class="amount1">
						<view class=""><text>余额：</text>{{item.balance}}</view>
						<view class="red" @click="modifyScore(1, item, index)">上分</view>
					</view>
					<view class="amount1">
						<view class=""><text>可提余额：</text>{{item.withdrawal_balance}}</view>
						<view class="red" @click="modifyScore(2, item, index)">下分</view>
					</view>
				</view>
			</view>
		</view>
		<view class="edit_mask" v-if="showScore" @click.stop="">
			<view class="score_area">
				<view class="title">{{scoreTitle}}</view>
				<view class="content">
					<view class="info_box">
						<view class="">ID：<text>{{scoreInfo.id}}</text></view>
					</view>
					<view class="info_box">
						<view class="">余额：<text>{{scoreInfo.balance}}</text></view>
						<view class="">可提余额：<text>{{scoreInfo.withdrawal_balance}}</text></view>
					</view>
					<view class="input_box">
						<input type="number" :placeholder="scoreTip" v-model="limit">
					</view>
				</view>
				<view class="btngroup">
					<view class="cancel" @click="showScore=false">取消</view>
					<view class="confirm" @click="submit">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import updateTabBar from '@/common/js/updateTabBar.js'
	import API from '@/common/js/api.js'
	export default {
		data(){
			return {
				listsData: [
					{id:111,balance:'1000.00',withdrawal_balance:'1000.00'},
					{id:123,balance:'1000.00',withdrawal_balance:'1000.00'},
					{id:222,balance:'1000.00',withdrawal_balance:'1000.00'}
				],
				showScore: false,
				scoreTitle: '',
				scoreTip: '',//输入框默认显示
				scoreInfo: {},
				limit: '',// 上下分额度
				page: 1,
				noMore: false,
				submitType: 1,//1上2下
				account: '',//搜索
			}
		},
		methods: {
			getDataList(){
				API.request('/agentTeam/userList', {
					limit: 10,
					title: this.account,
					page: this.page
				}, res=>{
					// console.log(res);
					
					if(res.data.length<10){
						this.noMore = true;
					}
					if(this.page>1){
						this.listsData = this.listsData.concat(res.data.list);
					}else{
						this.listsData = res.data.list;
					}
					
				})
			},
			// 打开上分下分弹窗
			modifyScore(type, val, i){
				this.submitType = type;
				if(type===1){
					this.scoreTitle = '上分'
					this.scoreTip = '请输入上分额度'
				}else if(type===2){
					this.scoreTitle = '下分'
					this.scoreTip = '请输入下分额度'
				}
				this.scoreInfo = val;
				this.modifyType = type;
				this.showScore = true;
			},
			// 提交上分下分
			submit(){
				if(!this.limit){
					uni.showToast({
						title: this.scoreTip,
						icon: 'none'
					})
					return;
				}
				let url = this.submitType===1?'/agentTeam/upScores':'/agentTeam/downScores'
				API.request(url, {
					user_id: this.scoreInfo.id,
					quota: this.limit
				}, res=>{
					uni.showToast({
						title: res.msg
					})
					this.account = '';
					this.search();
				})
			},
			search(){
				this.page = 1;this.noMore= false;
				this.getDataList();
			}
		},
		onLoad() {
			updateTabBar.changeAgent();
		},
		onShow() {
			this.getDataList();
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++;
				this.getDataList();
			}else{
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		height: 88rpx;
		padding: 0px 25rpx;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	
	}
	
	.search_area{
		.search_box{
			width: 700rpx;
			height: 80rpx;
			border: 1px solid #EDEDED;
			border-radius: 40rpx;
			display: flex;
			margin: 15px auto;
		}
		input{
			flex: 1;
			height: 80rpx;
			padding: 0px 20px;
			font-size: 14px;
		}
		button{
			width: 165rpx;
			height: 80rpx;
			background-color: #F05859;
			border-radius: 40rpx;
			color: #fff;
			font-size: 14px;
			line-height: 40px;
		}
	}
	
	.list_area{
		.list-item{
			width: 700rpx;
			height: 172rpx;
			border-radius: 10px;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11);
			box-sizing: border-box;
			padding: 10px;
			margin: 20px auto;
			display: flex;
			align-items: center;
			font-size: 14px;
		}
		.info{
			text-align: center;
			margin-right: 10px;
		}
		.amount{
			flex: 1;
		}
		.amount1{
			display: flex;
			justify-content: space-between;
			padding: 0px 10px;
			margin: 10px 0px;
		}
		text{
			color: #999;
		}
		.red{
			color: #F05859;
		}
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.edit_mask{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0px;
		left: 0px;
		background-color: rgba(0,0,0,.5);
		z-index: 999;
		
		.title{
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			font-size: 18px;
		}
		.btngroup{
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #f1f1f1;
			.cancel{
				line-height: 90rpx;
				color: #999;
				border-right: 2rpx solid #f1f1f1;
			}
			.confirm, .cancel{
				width: 50%;
				text-align: center;
			}
		}
	}
	.score_area{
		width: 670rpx;
		border-radius: 10px;
		background-color: #fff;
		color: #444;
		height: 500rpx;
		margin: calc(50vh - 250rpx) auto;
		
		.content{
			height: 268rpx;
			padding: 0px 55rpx;
			box-sizing: border-box;
		}
		.info_box{
			height: 66rpx;
			display: flex;
			justify-content: space-between;
			font-size: 16px;
			color: #999;
			margin-bottom: 6rpx;
			
			text{
				color: #101010;
			}
		}
		.input_box{
			width: 560rpx;
			height: 80rpx;
			border-radius: 5px;
			border: 1px solid #ededed;
			text-align: center;
			input{
				height: 80rpx;
				font-size: 14px;
			}
		}
	}
	
</style>