<template>
	<view>
		<!-- 导航栏区域 -->
		<view class="navBarWrap" :style="{'padding-top':statusBarHeight+'rpx'}">
			<image @click="back" src="../../static/image/back_white.png" mode=""></image>
			我的钱包
			<view style="width: 44rpx;"></view>
			<!-- <image @click="shareFlag = true" src="../../static/image/Group_365@2x.png" mode=""></image> -->
		</view>
		<!-- 钱包余额区域 -->
		<view class="walletBalWrap">
			<!-- 实名认证：现在在“礼物收益”界面中，应调换到“我的钱包” -->
			<view class="checkNameTxt" v-if="userInfo.id_no == ''" @click="href('checkName')">
				为了不影响您使用钱包，请先实名认证
			</view>
			<view class="balVal">
				{{wallet.gift_money}}
			</view>
			<view class="bottomBtn" @click="turnOut">
				<view class="btn">
					提现
				</view>
			</view>
			<!-- <view class="walletBal" @click="href('wallet/accountDetail')">账户明细<image src="../../static/image/my/right_white.png" mode=""></image></view> -->
			<view class="detailBtn" @click="href('wallet/accountDetail')">
				账户明细
				<image src="../../static/image/my/right_white.png" mode=""></image>
			</view>
			<view class="incomeWrap">
				<view class="income">
					<view class="incomeItem" @click="href('recharge')">
						<view class="title">
							问野币
						</view>
						<view class="val">
							<text>{{wallet.landlord_money | formatPrice}}</text>
						</view>
					</view>
					<view class="incomeItem" @click="href('wallet/giftProceeds?pgType=gift')">
						<view class="title">
							礼物收益
						</view>
						<view class="val">
							<text>{{wallet.gift_total}}</text>
						</view>
					</view>
					<!-- <view class="incomeItem" @click="href('wallet/giftProceeds?pgType=appoint')">
						<view class="title">
							预约收益
						</view>
						<view class="val">
							<text>{{wallet.make_total}}</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="moreServiceWrap">
				<view class="title">
					更多服务
				</view>
				<view class="serviceList">
					<!-- <view class="serviceItem" @click="href('recharge')">
						<view class="img">
							<image src="../../static/image/my/Group_584@2x.png" mode=""></image>
						</view>
						<view class="serviceTitle">
							充值问野币
						</view>
					</view> -->
					<!-- 钱包：首次进入应“设置支付密码”，现在是“修改支付密码”（设置完之后再进入才是“修改支付密码”） -->
					<view class="serviceItem" @click="href(userInfo.pay_password == '' ? 'changePayPassword' : 'checkPayPassword')">
						<view class="img">
							<image src="../../static/image/my/Group_583@2x.png" mode=""></image>
						</view>
						<view class="serviceTitle">
							{{userInfo.pay_password == '' ? '设置' : '修改'}}支付密码
						</view>
					</view>
					<!-- <view class="serviceItem" @click="bindWechat">
						<view class="img">
							<image src="../../static/image/my/zhanghu-3_1@2x.png" mode=""></image>
						</view>
						<view class="serviceTitle">
							{{userInfo.bind_wechat == '' ? '绑定' : '已绑定'}}提现账户
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// var apiUrl = 'http://landlord.t.brotop.cn/api'
	var apiUrl = 'http://app.zhaodizhu.cn/api'
	export default{
		data(){
			return{
				statusBarHeight:0,
				userInfo:{},
				wallet:{}
			}
		},
		created() {
			//获取状态栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight*2
				}
			})
		},
		onShow() {
			this.getData()
		},
		filters:{
			formatPrice(data){
				return parseFloat(data).toFixed(0);
			}
		},
		methods:{
			getData(){
				this.$request('/wallet/index').then((res)=>{
					console.log('钱包页面',res)
					this.wallet = res.data
				})
				//获取用户信息
				this.$request('/user/info').then((res)=>{
					this.userInfo = res.data
				})
			},
			back(){
				this.$href('my',2)
			},
			//绑定微信
			bindWechat(){
				if(this.userInfo.bind_wechat != ''){
					return
				}
				let that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes.authResult);
				    // 获取用户信息
				    uni.getUserInfo({
				      provider: 'weixin',
				      success: function (infoRes) {
						uni.request({
							url:apiUrl+'/api/user/bindWechat',
							method:'POST',
							data:{
								extend:infoRes.userInfo
							},
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								console.log('绑定微信',res)
								if(res.data.code == 1){
									that.getData()
									uni.showToast({
										title:'绑定成功'
									})
								}else{
									uni.showToast({
										title:res.data.msg,
										icon:'none'
									})
								}
							}
						})
				      }
				    });
				  }
				});
			},
			href(url){
				this.$href(url)
			},
			//提现
			turnOut(){
				/* if(this.userInfo.id_no == ''){
					uni.showToast({
						title:'请先进行实名认证',
						icon:'none'
					})
					return
				} */
				if(this.userInfo.pay_password == ''){
					uni.showToast({
						title:'请先设置支付密码',
						icon:'none'
					})
					return
				}
				this.$href('wallet/turnOut')
			},
			//绑定提现账户
			bindAcount(){
				/* uni.showActionSheet({
					itemList: ['绑定微信', '绑定支付宝'],
					success: (res) => {
						if (res.tapIndex == 1) {
							this.$href('bindAccount?type=zfb')
						} else if (res.tapIndex == 0) {
							this.$href('bindAccount?type=wx')
						}
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				}); */
				this.$href('bindAccount?type=wx')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{background: #f8f8f9;}
	/* 导航栏区域 */
	.navBarWrap{height: 88rpx;padding: var(--status-bar-height) 32rpx 0 32rpx;display: flex;align-items: center;justify-content: space-between;background: #588989;color: #fff;}
	.navBarWrap image{width: 44rpx;height: 44rpx;}
	/* 导航栏区域 */
	.navBarWrap{height: 88rpx;padding: 0 32rpx;display: flex;align-items: center;justify-content: space-between;}
	.navBarWrap image{width: 44rpx;height: 44rpx;}
	/* 钱包余额区域 */
	.walletBalWrap{
		background: url(../../static/image/my/Frame_150@2x.png) no-repeat;
		background-size: 100% 334rpx;
		height: 334rpx;
		position: relative;
		.balVal{
			padding-top: 16rpx;
			font-size: 88rpx;
			color: #fff;
			text-align: center;
		}
		.walletBal{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			justify-content: center;
			image{width: 28rpx;height: 28rpx;}
		}
		.bottomBtn{
			padding-top: 14rpx;
			display: flex;
			justify-content: center;
			.btn{
				width: 168rpx;
				height: 54rpx;
				border: 2rpx solid #ffffff;
				border-radius: 104rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 54rpx;
			}
		}
		.detailBtn{
			position: absolute;
			right: 0;
			top: 54rpx;
			width: 176rpx;
			height: 52rpx;
			background: rgba(255,255,255,0.30);
			border-radius: 50rpx 0 0 50rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #fff;
			justify-content: center;
			image{width: 27rpx;height: 27rpx;}
		}
		.incomeWrap{
			display: flex;
			justify-content: center;
			padding: 16rpx 24rpx 0 24rpx;
			.income{
				width: 100%;
				height: 172rpx;
				background: #fff;
				border-radius: 16rpx;
				box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(12,98,98,0.07); 
				padding: 32rpx 0 30rpx 0;
				display: flex;
				.incomeItem{
					flex: 1;
					border-right: 2rpx solid #f0f0f0;
					.title{
						color: #9897a3;
						font-size: 24rpx;
						text-align: center;
					}
					.val{
						padding-top: 32rpx;
						color: #4a8b94;
						text-align: center;
						text{font-size: 48rpx;}
					}
				}
			}
			.income .incomeItem:nth-of-type(3){border-right: none;}
		}
		.checkNameTxt{
			padding-top: 10rpx;
			font-size: 22rpx;
			text-align: center;
			color: #fff;
		}
		.moreServiceWrap{
			padding: 0 32rpx;
			.title{
				height: 100rpx;
				font-size: 32rpx;
				color: #646566;
				line-height: 100rpx;
				font-weight: 600;
			}
			.serviceList{
				display: flex;
				height: 206rpx;
				background: #fff;
				border-radius: 16rpx;
				box-shadow: 0rpx 28rpx 34rpx 0rpx rgba(15,36,152,0.05); 
				align-items: center;
				.serviceItem{
					flex: 1;
					.img{
						display: flex;
						justify-content: center;
						image{width: 68rpx;height: 68rpx;}
					}
					.serviceTitle{
						color: #646566;
						font-size: 24rpx;
						text-align: center;
						padding-top: 24rpx;
					}
				}
			}
		}
	}
	/* 收益区域 */
	/* 更多服务区域 */
</style>