<template>
	<view class="qianBaoContainer">
		<!-- 钱包展示结束 -->
		<view class="qianBaoShow relative ">
			<view class="showBg relative">
				<image src="/static/myImage/ic_beijign.png" mode="widthFix"></image>
				<view class="showContent absolute">
					<view class="content_touxiang">
						<image :src="avatar" mode="widthFix"></image>
					</view>
					<view class="content_NameText">
						{{nickName}}
					</view>
				</view>
			</view>
			<!-- 钱包展示结束 -->
			<!-- 余额展示和分销记录 star-->
			<view class="qianBaoCate absolute">
				<!-- 余额背景展示 -->
				<view class="querShow-bg relative">
					<image src="/static/myImage/qianbaoBg.png" class="absolute bgImg" mode="widthFix"></image>
					<!-- 余额展示内容 -->
					<view class="show-content">
						<view class="content-text">
							当前余额
						</view>
						<view class="content-bottom">
							<view class="content-bottom_left b1">
								<text class="b1" style="font-size: 36rpx;">￥</text>
								<text style="font-size: 72rpx; font-weight: 700;">{{userINfoS.money}}</text>
							</view>
							<view class="content-bottom_right b2" @click="tixian">
								提现
							</view>
						</view>
					</view>
				</view>
				<!-- 余额背景展示 -->
				<!-- 余额展示end -->
				<!-- 分销销售内容 -->
			</view>
			<!-- 余额展示和分销记录end -->
			<view class="fenXiaoContainer">
				<view class="fenxiaoTitle">
					分销记录
				</view>
				<view class="fenXiaoContent  ">
					<view class="fenxiao-Content" v-for="(item,index) in fenXiaoArry">
						<view class="fenxiao-Content-item">
							<view class="item-left">
								<view class="item-left-Touxiang">
									<image style="width: 100%;" :src="item.avatar" mode="widthFix">
									</image>
								</view>
								<view class="item-left-Toux-name">
									{{item.nickname}}
								</view>
							</view>
							<view class="item-right">
								<view class="item-right-money">
									+{{item.money}}
								</view>
								<view class="item-right-date">
									{{item.createtime}}
								</view>
								<!-- 是大家看法好看 -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 体现钱包弹窗star -->
		<u-popup v-model="show" mode="bottom" border-radius="40" width="750rpx" height="488rpx">
			<view class="popup">
				<!-- 体现金额 -->
				<view class="tixianMoney">
					输入提现金额
				</view>
				<!-- 体现输入框 -->
				<view class="tixianInput">
					<view class="input-Danwei">
						￥
					</view>
					<view class="input-keybord">
						<view class="input-wraper">
							<input type="digit" :value="user_inputText" @input="getValue" placeholder="请输入金额" />
						</view>
					</view>
				</view>
				<!-- 体现按钮 -->
				<view class="tixianBtn">
					<view class="tixianBtn-quXiaoBtn tixianBtn-com" @click="quBtn">
						取消
					</view>
					<view class="tixianBtn-quDingBtn tixianBtn-com" @click="tixianBtn(user_inputText)">
						提现
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 体现弹窗end -->
	</view>
</template>

<script>
	import Login from '../../../login.js'
	export default {
		data() {
			return {
				userINfoS:'',//钱包页面的用户信息obj
				avatar: '', // 头像
				nickName: '', // 昵称
				get_QianbaoData: '',//钱包渲染数据
				user_inputText: '', //用户输入的体现金额
				show: false, //钱包体现按钮
				fenXiaoArry: '', //分销数据arry
			}
		},
		onShow() {
			this.get_QianbaoData_Arry(); //请求后台钱包数据
		},
		onLoad() {

		},
		methods: {
			get_QianbaoData_Arry() {
				let that = this;
				that.avatar = uni.getStorageSync("avatar");
				that.nickName = uni.getStorageSync("nickName");
				that.$rqs('/api/user/money').then(res => {
					console.log(res, "____________");
					that.get_QianbaoData = res.data.data;
					that.userINfoS = res.data.data.user;
					that.fenXiaoArry = res.data.data.wallet;
					console.log(res.data.data.wallet, "==============================,wallet");
					that.fenXiaoArry.forEach(item =>{
						item.money = (Number(item.money)).toFixed(0);
					})
				})
			},
			close() {
				this.show = false
			},
			tixian() {
				this.show = !this.show
			},
			//取消体现
			quBtn() {
				this.close()
			},
			// 监听用户体现金额
			getValue(e){
				this.user_inputText = Number(e.detail.value);
			},
			//微信体现 e 就是体现金额
			tixianBtn(e) {
				console.log("点击体现");
				if(Number(this.user_inputText) > 0 && Number(this.user_inputText) <　Number(this.userINfoS.money)){
					console.log(true);
					this.$rqs('/api/user/tixian',{money:Number(this.user_inputText)},"GET").then(res=>{
						console.log(res);
					})
				}else{
					console.log(false);
					uni.showToast({
						title:'请输入正确全额',
						icon:'none'
					})
				}
			
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FB;
	}

	.qianBaoShow {
		height: 416rpx;
	}

	.showBg {
		height: 416rpx;
	}

	.showBg image {
		width: 100%;
	}

	.fenXiaoContainer {
		padding: 48rpx;
		box-sizing: border-box;
		margin-top: 48rpx;

	}

	.qianbaoContent {
		height: 100%;
		padding-top: 164rpx;
		width: 100%;
		top: 0;
	}

	.showContent {
		height: 116rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 100rpx;
		left: 40rpx;
	}

	.content_touxiang {
		width: 116rpx;
		height: 116rpx;
		border-radius: 58rpx;
		overflow: hidden;
	}

	.content_touxiang image {
		width: 100%;
	}

	.content_NameText {
		margin-left: 24rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 34rpx;
		font-weight: 700;
	}

	.qianBaoCate {
		width: 100%;
		transform: translateY(-152rpx);
	}

	.qianBaoBg {
		width: 100%;
		height: 100%;
	}

	.qianBaoCate image {
		width: 100%;
	}

	.querShow {
		width: 670rpx;
		border-radius: 24rpx;
		top: -92rpx;
		left: 40rpx;
		margin-bottom: 48rpx;

	}

	.querShow-bg {
		width: 670rpx;
		height: 208rpx;
		border-radius: 24rpx;
		margin: 0 auto;
		z-index: 1;
	}

	.qianBaoCate::after {
		content: '';
		width: 100%;
		height: 116rpx;
		background-color: #F7F8FB;
		border-radius: 40rpx;
		position: absolute;
		z-index: -1;
		left: 0;
		bottom: 0;
		transform: translateY(10rpx);
	}

	.querShow-bg image {
		width: 670rpx;
		height: 208rpx;
		border-radius: 24rpx;
	}

	.show-content {
		padding: 24rpx 24rpx 14rpx 32rpx;
		box-sizing: border-box;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 40rpx 40rpx 0 0;
	}

	.content-bottom {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}

	.content-text {
		color: rgba(62, 85, 78, 1);
		font-size: 32rpx;
	}

	.b1 {
		color: #EBC39A;
		font-size: 72rpx;
		font-weight: 700;
		font-family: "D-DIN";
	}

	.b2 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 48rpx;
		line-height: 56rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #3E554E;
	}

	.fenXianContent {
		height: 100%;
		width: 100%;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(247, 248, 251, 1);
		box-sizing: border-box;
		padding: 0 40rpx;
	}

	.fenxiaoTitle {
		color: rgba(31, 31, 31, 1);
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 24rpx;
	}

	.fenXiao-Content {
		box-sizing: border-box;
		padding: 0 32rpx;
		height: 130rpx;
	}

	.fenxiao-Content-item {
		/* width: 670rpx; */
		height: 130rpx;
		background-color: #f6f8fa;
		box-sizing: border-box;
		padding: 32rpx 0 34rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eceef0;
	}

	.bgImg {
		z-index: -1;
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item-left-Toux-name {
		margin-left: 16rpx;
	}

	.item-left-Touxiang {
		width: 64rpx;
		height: 64rpx;
	}

	.item-right-money {
		color: rgba(235, 195, 154, 1);
		font-size: 36rpx;
		font-weight: 700;
	}

	.item-right-date {
		margin-top: 6rpx;
		color: rgba(200, 201, 204, 1);
		font-size: 22rpx;
		font-weight: 500;
	}

	.tixian {}

	.popup {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 48rpx 32rpx 68rpx;
	}

	.tixianMoney {
		height: 44rpx;
		color: rgba(50, 50, 51, 1);
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 44rpx;
	}

	.tixianInput {
		display: flex;
		width: 654rpx;
		margin-bottom: 74rpx;
		height: 104rpx;
		align-items: center;
		justify-content: flex-start;
		border: 0.10rpx solid rgba(0.7599999904632568, 0.7599999904632568, 0.7599999904632568, 1);
	}

	.input-Danwei {
		width: 52rpx;
		height: 64rpx;
		color: rgba(31, 31, 31, 1);
		font-size: 52rpx;
		font-weight: 700;
		margin-right: 8rpx;
		margin-left: 24rpx;
	}

	.input-keybord {
		color: rgba(194, 194, 194, 1);
		font-size: 32rpx;
		font-weight: 400;
	}

	.input-keybord .input-wraper {
		width: 100%;
		height: 100%;
	}

	.tixianBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tixianBtn-com {
		width: 330rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.tixianBtn-quDingBtn {
		background-color: #3E554E;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-weight: 400;
	}

	.tixianBtn-quXiaoBtn {
		background-color: #FFFFFF;
		color: rgba(31, 31, 31, 1);
		font-size: 28rpx;
		border: 2rpx solid rgba(0.8623999953269958, 0.8688533306121826, 0.8799999952316284, 1);
		background: rgba(255, 255, 255, 1);

	}
</style>