<template>
	<view class="mine-home">

		<view class="mobile-frame" v-show="frameIshow">
			<view class="frame">
				<image src="../../static/image/tips.png" mode=""></image>
				<view class="title">
					当前操作需要授权手机号
				</view>
				<view class="submit">
					<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即授权</button>
				</view>
			</view>
			<view class="close" @click="frameIshow=false">
				<image src="../../static/image/close-white.png" mode=""></image>
			</view>
		</view>
	<!-- 	<view class="change-model" @click="changeModel">
			<image src="../../static/image/change.png" mode=""></image>
			<text>切换共享模式</text>
		</view> -->
		<view class="top">
			<view class="message">
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class="detail">
					<view class="login">
						<text>{{userInfo.nickname}}</text>
						<button v-if="!userInfo.nickname" class="tongbu" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
							同步用户信息
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="mine-card">
			<view class="card-item">
				<view class="card-num">
					{{userInfo.use_time ? userInfo.use_time : 0}}
				</view>
				<view class="card-title">
					吸氢总时长
				</view>
			</view>
			<view class="card-item">
				<view class="card-num">
					{{userInfo.wallet_money ? userInfo.wallet_money : 0}}
				</view>
				<view class="card-title">
					钱包
				</view>
			</view>
		</view>
	<!-- 	<view class="buy-card">
			<view class="buy-card-left">
				<view class="buy-card-title">购买吸氢卡套餐</view>
				<view class="buy-card-text">买卡吸氢更划算</view>
			</view>
			<view class="buy-card-right" @click="buyCard">购买</view>
		</view> -->
<!-- 		<view class="buy-card">
			<view class="buy-card-left">
				<view class="buy-card-title">套餐剩余时长300分钟</view>
				<view class="buy-card-text">套餐总时长1500分钟</view>
			</view>
			<view class="buy-card-right" @click="cardDetail">查看</view>
		</view> -->
		<view class="list">
			<view class="child" @click="nextPage(0)">
				<text>吸氢记录</text><text class="iconfont icon-iconfontjiantou2"></text>
			</view>
			<view class="child" @click="nextPage(1)">
				<text>关于我们</text><text class="iconfont icon-iconfontjiantou2"></text>
			</view>
		</view>
		<footerBar :page="pages" @getFrame="getFrame"></footerBar>
	</view>
</template>

<script>
	import footerBar from '../../components/footer-bar/footer-bar.vue'
	var app = getApp()
	export default {
		components: {
			footerBar
		},
		data() {
			return {
				bgColor: '#FF7404',
				pages: 1,
				isShow: true,
				userInfo: "",
				frameIshow: false
			}
		},
		onLoad() {
			let that = this
			// uni.getSetting({
			// 	success(res) {
			// 		console.log(res.authSetting)
			// 		if (res.authSetting['scope.userInfo']) {
			// 			// that.isShow = false
			// 		}
			// 	}
			// })
			console.log(app.globalData.is_auth, 'pppppppppppp')
			if (app.globalData.is_auth == true) {
				that.frameIshow = false
			} else {
				that.frameIshow = true
			}
			this.getCurrentUser()
		},
		methods: {
			//获取手机号
			getPhoneNumber: function(e) {
				console.log(e.detail)
				let data = {
					session_key: uni.getStorageSync('session_key'),
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}
				app.request('/user/sync-mobile', data, 'post').then(res => {
					this.frameIshow = false
					app.globalData.is_auth = true
				})
			},
			// 扫码获取子组件传值
			getFrame: function(e) {
				console.log(e)
				this.frameIshow = e
			},
			// 获取当前用户信息
			getCurrentUser: function() {
				uni.showLoading()
				app.request('/auth/user', '', 'get').then(res => {
					this.userInfo = res.data.data
					uni.hideLoading()
				})
			},
			bindGetUserInfo: function(e) {
				console.log('898989')
				uni.getUserProfile({
					desc: 'weixin', //必填
					success: (res) => {
						console.log(res.userInfo);
						this.synUserInfo(res.userInfo)
					},
					fail: () => {
						console.log("未授权");
					}
				})
			},

			//同步用户信息
			synUserInfo: function(data) {
				uni.showLoading()
				app.request('/user/sync-info', data, 'post').then(res => {
					uni.hideLoading()
					this.getCurrentUser()
				})
			},
			nextPage: function(e) {
				let url = ''
				switch (e) {
					case 0:
						url = "/pages/mine/record";
						break;
					case 1:
						url = "/pages/mine/about"
				}
				uni.navigateTo({
					url
				})
			},
			//切换模式
			changeModel: function() {
				uni.reLaunch({
					url: '../share/index'
				})
			},
			//查看吸氢卡详情
			cardDetail: function() {
				uni.navigateTo({
					url: "./card_detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-home {
		background-color: #f6f6f6;
		height: 100vh;

		.change-model {
			position: fixed;
			right: 0;
			top: 200upx;
			// height: 70upx;
			// line-height: 70upx;
			font-size: 26upx;
			padding: 20upx;
			border-radius: 50upx 0 0 50upx;
			background-color: #FFFFFF;

			image {
				height: 40upx;
				width: 40upx;
				display: inline-block;
				vertical-align: top;
				margin-right: 5upx;
			}

		}

		.tongbu {
			height: 50upx;
			width: 180upx;
			background-color: #DD524D;
			font-size: 24upx;
			font-weight: 400;
			line-height: 50upx;
			color: #FFFFFF;
			border-radius: 12upx;
			margin-left: 10upx;
			display: inline-block;
			vertical-align: middle;
			// margin:0 auto;
		}

		.mobile-frame {
			position: fixed;
			height: 100vh;
			width: 100%;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 99999;
			top: 0;

			.frame {
				width: 50%;
				margin: 0 auto;
				padding: 50upx 30upx;
				margin-top: 40%;
				border-radius: 12upx;
				background-color: #FFFFFF;
				text-align: center;

				image {
					height: 90upx;
					width: 90upx;
				}

				.title {
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
				}

				.submit {
					margin: 0 auto;
					width: 50%;
					margin-top: 30upx;

					button {
						background-color: $mine-background-color;
						height: 70upx;
						line-height: 70upx;
						text-align: center;
						font-size: 26upx;
						color: #FFFFFF;
						background-color: $mine-background-color;
					}
				}

			}

			.close {
				margin: 0 auto;
				height: 100upx;
				width: 100upx;
				text-align: center;

				margin-top: 10%;

				image {
					height: 50upx;
					width: 50upx;
				}
			}
		}

		.top {
			height: 450upx;
			background-image: linear-gradient(to right, #027675, #3bba91);

			.status_bar {
				height: var(--status-bar-height);
				padding-top: 30upx;
				width: 100%;
			}

			.title {
				text-align: center;
				line-height: 64upx;
				height: 64upx;
				font-size: 38upx;
				color: #FFFFFF;
			}

			.message {
				padding-top: 150upx;
				// margin-top: 79upx;
				text-align: center;

				.avatar {
					// margin-left: 55upx;
					margin: 0 auto;
					height: 117upx;
					width: 117upx;
					border-radius: 50%;
					background-color: #FFEEEDED;
					// margin-right: 15upx;
					overflow: hidden;

					image {

						height: 117upx;
						width: 117upx;
					}
				}

				.detail {
					color: #FFFFFF;
					margin-top: 30upx;
					font-size: 32upx;
					font-weight: 600;
				}
			}
		}

		.mine-card {
			display: flex;
			background-color: #fff;
			margin: 0 20upx;
			margin-top: -50upx;
			border-radius: 20upx;

			.card-item {
				flex: 1;
				padding: 30upx;

				text-align: center;

				.card-num {
					font-size: 46upx;
				}

				.card-title {
					font-size: 32upx;
					color: #747474;
					height: 70upx;
					line-height: 70upx;
				}
			}
		}

		// .buy-card {
		// 	margin: 0 30upx;
		// 	padding: 40upx;
		// 	margin-top: 30upx;
		// 	border-radius: 12upx;
		// 	background: linear-gradient(to right, #027675, #3bba91);
		// }

		// .buy-card-left {
		// 	display: inline-block;
		// 	vertical-align: middle;
		// 	color: #fff;
		// }

		// .buy-card-title {
		// 	font-size: 32upx;
		// 	font-weight: bold;
		// }

		// .buy-card-text {
		// 	font-size: 24upx;
		// 	margin-top: 10upx;
		// }

		// .buy-card-right {
		// 	display: inline-block;
		// 	vertical-align: middle;
		// 	background-color: #fff;
		// 	height: 60upx;
		// 	line-height: 60upx;
		// 	padding: 0 30upx;
		// 	float: right;
		// 	border-radius: 40upx;
		// 	margin: 10upx;
		// 	font-size: 26upx;
		// }

		.list {
			padding: 30upx;

			.child {
				height: 86upx;
				line-height: 86upx;
				background-color: #FFFFFF;
				margin-top: 15upx;
				padding: 0 26upx;
				font-size: 32;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba($color: #000000, $alpha: 0.8);

				.icon-iconfontjiantou2 {
					float: right;
				}
			}
		}
	}
</style>
