<template>
	<view class="" style="padding-top: calc(var(--status-bar-height) + 88rpx);">
		<view class="nav_area dis-flex-between-center">
			<view style="flex: 0.3;"></view>
			<view class="" style="font-size: 18px;color: #101010;">代理</view>
			<view style="flex: 0.3;text-align: right;" @click="add">新增代理</view>
		</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="edit" @click="edit(item, index)"></view>
				<view class="delete" @click="remove(item, index)">删除</view>
				<view class="info">
					<image :src="item.avatar" mode=""></image>
					<view class="">ID：{{item.id}}</view>
				</view>
				<view class="amount">
					<view class="amount2">
						<view class=""><text>电话：</text>{{item.phone}}</view>
						<view class=""><text>余额：</text>{{item.balance}}</view>
						<view class=""><text>可提余额：</text>{{item.withdrawal_balance}}</view>
					</view>
					<view class="amount1">
						<view class="red" @click="modifyScore(1, item, index)">上分</view>
						<view class="red" @click="modifyScore(2, item, index)">下分</view>
					</view>
				</view>
			</view>
			<view class="list-item" style="height: 0px;padding: 0px;"></view>
		</view>
		<view class="edit_mask" v-if="showEdit" @click.stop="">
			<view class="edit_area" :class="editType=='add'?'add':'edit'">
				<view class="title">{{title}}</view>
				<view class="content">
					<view class="input_box" v-if="editType=='edit'">
						<view class="">ID:</view>
						<input type="text" disabled v-model="editInfo.id" class="disabled">
					</view>
					<view class="input_box">
						<view class="">电话:</view>
						<input type="text" placeholder="电话为登陆账号" v-model="editInfo.phone"
						 :disabled="editType=='edit'" :class="editType=='edit'?'disabled':''">
					</view>
					<view class="input_box">
						<view class="">密码:</view>
						<input placeholder="请输入新密码" v-model="editInfo.password">
					</view>
				</view>
				<view class="btngroup">
					<view class="cancel" @click="cancel">取消</view>
					<view class="confirm" @click="confirm">确定</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.phone}}</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 API from '@/common/js/api.js'
	export default {
		data(){
			return {
				listsData: [
					{id:111,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'},
					{id:123,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'},
					{id:222,phone:'135XXXX7777',balance:'1000.00',withdrawal_balance:'1000.00'}
				],
				showEdit: false,
				editType: 'add',//add/edit
				title: "新增代理",
				originInfo: {
					id: '',phone: '',password: ''
				},
				editInfo: {},
				showScore: false,
				scoreTitle: '',
				scoreTip: '',//输入框默认显示
				scoreInfo: {},
				limit: '',// 上下分额度
				account: '',//搜索
				noMore: false,
				page: 1,
				modifyType: 1,//1上2下
			}
		},
		methods: {
			getAgentList(){
				API.request('/adminAgentTeam/agentList', {
					limit: 10,title: this.account,page: this.page
				}, res=>{
					if(res.data.list.length<10){
						this.noMore = true;
					}
					if(this.page>1){
						this.listsData = this.listsData.concat(res.data.list);
					}else{
						this.listsData = res.data.list;
					}
				})
			},
			// 编辑代理
			edit(val, i){
				this.title = "编辑";
				this.editType = "edit";
				this.showEdit = true;
				this.editInfo = val;
			},
			// 删除代理
			remove(val, i){
				let _this = this;
				uni.showModal({
					title:'温馨提示',
					content:"确定是否删除该代理信息",
					success(res) {
						if(res.confirm){
							API.request('/adminAgentTeam/deleteAgent', {
								aid: val.id
							}, res=>{
								uni.showToast({
									title: res.msg
								})
								_this.listsData.splice(i, 1);
								// _this.account = '';
								// _this.search();
							})
						}
						
					}
				})
			},
			cancel(){
				this.showEdit = false;
			},
			// 提交代理新增编辑
			confirm(){
				if(!this.editInfo.password){
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
				}
				if(!this.editInfo.phone){
					uni.showToast({
						title: '请输入登陆账号',
						icon: 'none'
					})
				}
				if(this.editType=='add'){
					API.request('/adminAgentTeam/addAgent', {
						phone: this.editInfo.phone,
						password: this.editInfo.password
					}, res=>{
						uni.showToast({
							title: res.msg
						})
						this.account = '';
						this.search();
						this.showEdit = false;
					})
				}else if(this.editType=='edit'){
					API.request('/adminAgentTeam/editAgent', {
						aid: this.editInfo.id,
						password: this.editInfo.password
					}, res=>{
						uni.showToast({
							title: res.msg
						})
						this.account = '';
						this.search();
						this.showEdit = false;
					})
				}
				
			},
			add(){
				this.title = "新增代理";
				this.editType = "add";
				this.showEdit = true;
				this.editInfo = this.originInfo;
			},
			// 打开上分下分弹窗
			modifyScore(type, val, i){
				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.modifyType===1?'/adminAgentTeam/agentUpScores':'/adminAgentTeam/agentDownScores'
				API.request(url, {
					aid: this.scoreInfo.id,
					quota: this.limit
				}, res=>{
					uni.showToast({
						title: res.msg
					})
					this.limit = '';
					this.account = '';
					this.search();
					this.showScore = false;
				})
			},
			search(){
				this.page = 1;
				this.noMore = false;
				this.getAgentList();
			}
		},
		onShow() {
			this.account = '';
			this.search();
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++;
				this.getAgentList();
			}else{
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dis-flex-between-center{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.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{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0px 10px;
		
		.list-item{
			width: 340rpx;
			// height: 172rpx;
			border-radius: 10px;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.11);
			box-sizing: border-box;
			padding: 10px;
			margin: 0px auto 10px;
			font-size: 14px;
			position: relative;
			
			.edit{
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				background-image: url("../../static/backgroundUser/riLine-edit-line@2x.png");
				background-size: contain;
				top: 108rpx;
				right: 26rpx;
			}
			.delete{
				position: absolute;
				width: 76rpx;
				height: 48rpx;
				top: 0px;
				right: 0px;
				border-radius: 3px 10px 3px 3px;
				font-size: 12px;
				line-height: 48rpx;
				text-align: center;
				color: #999;
				background-color: #f1f1f1;
			}
		}
		.info{
			text-align: center;
			margin-right: 10px;
		}
		.amount{
			flex: 1;
			margin-top: 10px;
		}
		.amount2{
			line-height: 50rpx;
		}
		.amount1{
			display: flex;
			justify-content: space-between;
			padding: 0px 20px;
			margin: 10px 0px 5px;
		}
		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;
			}
		}
	}
	.edit_area{
		width: 670rpx;
		border-radius: 10px;
		background-color: #fff;
		color: #444;
		&.add{
			height: 480rpx;
			margin: calc(50vh - 240rpx) auto;
			.content{
				height: 248rpx;
			}
		}
		&.edit{
			height: 626rpx;
			margin: calc(50vh - 313rpx) auto;
			.content{
				height: 394rpx;
			}
		}
		
		
		.input_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px 40rpx;
			margin-bottom: 40rpx;
			font-size: 16px;
			view{
				flex: 1;
				text-align: center;
			}
			.disabled /deep/ .uni-input-input{
				background: #ebebeb !important;
			}
			input{
				width: 430rpx;
				height: 80rpx;
				text-align: center;
				font-size: 14px;
				border: 1px solid #ededed;
				border-radius: 5px;
			}
		}
		
	}
	.score_area{
		width: 670rpx;
		border-radius: 10px;
		background-color: #fff;
		color: #444;
		height: 570rpx;
		margin: calc(50vh - 285rpx) auto;
		
		.content{
			height: 338rpx;
			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>