<template>
	<view>
		<u-popup :show="popupShow" :round="10" mode="center" :safeAreaInsetBottom="false" @touchmove.prevent.stop>
			<view class="set-turn">
				<view class="set-turn-title">请输入对方手机号码：</view>
				<view class="set-turn-input">
					<u-input placeholder="请输入手机号码" type="number" border="surround" v-model="mobile" @change="change" />
				</view>
				<view class="set-turn-title" style="display: inline-block;">对方用户昵称：</view>
				<view style="display: inline-block;">
					<view class="" v-if="info && info.nickName ">{{ info.nickName }}</view>
					<view class="red" v-else-if="!info">未查询到用户</view>
					<view class="" v-else>-</view>
				</view>
				<view class="set-turn-title">请输入盲豆转赠数量：</view>
				<view class="set-turn-input">
					<u-input placeholder="请输入转赠数量" type="number" border="surround" v-model="beanNum" />
				</view>
				<view class="loss">
					<view>盲豆转赠折损说明：</view>
					<view>（20个盲豆起转，每次扣除10盲豆）</view>
				</view>
				<view class="flex set-turn-btn">
					<view class="btn close" @click="close">取消</view>
					<view class="btn confirm" @click="confirm">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script> 
	import $http from '@/utils/request.js'
	export default {
		name: "set-turn",
		props: {
			popupShow: {
				type: [Boolean],
				default: false
			},
			coinNum: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				mobile: '',
				info: {},
				beanNum: '',
			};
		},
		methods: {
			change(e) {
				if(!e) { this.info = {} }
				if(e.length < 11) {
					this.info = {}
				}
				if(e.length > 11) { 
					uni.$u.toast('请输入正确的手机号') 
					this.info = {}
				}
				if(e.length != 11) return
				$http.post(`/api/v1/mp/user/mine/sysUser/mobile/${ e }`, {}).then(res => {
					this.info = res && res.data
				})
				
			},
			
			close() {
				this.$emit('close')
			},
			
			confirm() {
				if(this.info == null) {
					uni.$u.toast('未查询到用户')
					return
				}
				if(Object.keys(this.info).length  == 0) {
					uni.$u.toast('请确认转赠用户')
					return
				}
				if(!this.beanNum) {
					uni.$u.toast('请输入盲豆数量')
					return
				}
				if(this.beanNum < 20) {
					uni.$u.toast('每次转赠盲豆不少于20')
					return
				}
				if(this.beanNum > 1000) {
					uni.$u.toast('每次最多转赠1000')
					return
				}
				if(this.beanNum > this.coinNum) {
					uni.$u.toast('超过现有盲豆数量')
					return
				}
				$http.post('/api/v1/mp/user/mine/coin/transfer/save', {
					phone: this.mobile,
					transferCoin: this.beanNum,
				}).then( res => {
					if(res.code == 0){
						this.close()
						this.$emit('confirm')
						setTimeout(()=>{
							uni.$u.toast('转赠成功')
						},500)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.set-turn {
		width: 75vw;
		padding: 40rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		&-title {
			margin-bottom: 30rpx;
			color: #666666;
			font-size: 28rpx
		}

		&-input {
			padding-bottom: 30rpx;
		}
		
		.red {
			color: red;
		}
		
		&-btn {
			justify-content: space-around;
			margin-top: 20rpx;
			
			.btn {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				text-align: center;
			}
			
			.close {
				border: 1px solid rgba(187, 187, 187, 100);
			}
			
			.confirm {
				color: #FFFFFF;
				background-color: $uni-bg-color;
			}
		}
		.loss {
			padding: 5px 0 10px 0;
			font-size: 26rpx;
			color: #999999;
		}
	}
</style>
