<template>
	<view class="expend">
		<view class="top">
			<view style="display: flex;justify-content: space-between;">
				<view>
					<view class="name">{{Info.name}}</view>
					<view class="tel">{{Info.tel}}</view>
				</view>
				<view>
					<uni-icons type="wallet" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
						size="70"></uni-icons>
				</view>
			</view>
			<view
				style="display: flex;justify-content: space-around; margin-top: 20rpx; background-color: #fff;border-radius: 40rpx; padding: 10rpx;">

				<view>
					<view class="info_title">
						总充值金额(真实)
					</view>
					<view class="price">{{Info.all_true_money}}</view>
				</view>
				<view>
					<view class="info_title" style="color: #18bc37;">
						剩余额度
					</view>
					<view class="price" style="color: #55aa00;">{{Info.amount}}</view>
				</view>
			</view>
			<view style="padding: 40rpx; margin-top: 40rpx;">
				<view class="title">收费金额</view>
				<input class="input" v-model="money" placeholder-style="color:#ccc;font-size:45rpx" type="number" placeholder="输入扣款额" />
				<view class="title">收费内容</view>

				<view class="uni-textarea" style="border: 1px solid #ccc; border-radius: 20rpx;padding: 20rpx;margin-top: 20rpx;">
					<textarea placeholder-style="color:#ccc" v-model="desc" placeholder="服务内容" />
				</view>



				<view class="button" @click="expendFuc">收 费</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		MemberGetDetail,MemberExpend
	} from "@/api"
	import {
		onLoad,onShow
	} from "@dcloudio/uni-app"
	let member_id=ref(0)
	let Info=ref({});
	const GetMemberInfo=()=>{
		MemberGetDetail({member_id:member_id.value}).then(res => {
			if (res.status) {
				 Info.value=res.data.info
			}
		
		})
	}
	let money=ref(null);
	let desc=ref('');
	const expendFuc=()=>{
		if(money.value==null){
			uni.showToast({
				title: '请输入金额',
				icon: 'none'
			});
			return false;
		}
		if(desc.value==''){
			uni.showToast({
				title: '请输入收费内容',
				icon: 'none'
			});
			return false;
		}
		uni.showModal({
			title: '提示',
			content: '确定扣款吗？',
			confirmText:'确认',
			cancelText:'取消',
			success: function (r) {
				if (r.confirm) {
					 MemberExpend({member_id:member_id.value,money:money.value,desc:desc.value}).then(res => {
					 	if (res.status) {
					 		 uni.showToast({
					 		 	title: '扣款成功',
					 		 }); 
					 		 uni.switchTab({
					 		 	url:'/pages/index/index'
					 		 })
					 	}
					 
					 })
				} else if (r.cancel) {
					 
				}
			}
		});
		
	}
	onLoad((e)=>{
	   member_id.value=e.member_id
	   GetMemberInfo()
	})
</script>

<style scoped>
	.expend {
		height: calc(100vh - 90rpx);
		background-color: #fff;
	}

	.top {
		height: 240rpx;
		padding: 50rpx;
		background-color: #26CED0;
		color: #fff;
	}

	.name {
		font-size: 45rpx;
		font-weight: 700;
	}

	.tel {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.info_title {
		font-size: 30rpx;
		color: #733e29
	}

	.price {
		text-align: center;
		color: #FF8A5B;
		font-weight: 700;
		margin-top: 10rpx;


	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
	}

	.input {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border: 0rpx;
		border-bottom: 1rpx solid #b0e2f9;
		height: 100rpx;
		color:#FF8A5B;
		font-size: 50rpx;
		font-weight: 700;
	}
   textarea{
	   color:#666;
	   font-size: 36rpx;
   }
	 
	.button {
		width: 100%;
		background-color: #26CED0;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-weight: 700;
		border-radius: 50rpx;
		margin-top: 80rpx;
	}
</style>