<template>
	<view style="padding: 0 40rpx;font-size: 28upx;">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view style="height: 50rpx;"></view>
		<view class="per_mes">
			<image :src="userMes.avatar" v-if="userMes.avatar!=null" class="per_mes_img"></image>
			<image src="../../static/icon/home_icon_1.png" v-if="userMes.avatar==null" class="per_mes_img"></image>
			<view>
				<text class="name" v-if="userMes.nickname!=null">{{userMes.nickname}}</text>
				<text class="name" v-if="userMes.nickname==null">未设置</text>
				<!-- <image v-if="userMes.vip==1" src="../../static/icon/mine_v.png" alt="" class="per_user_img"></image> -->
				<text style="margin-left: 20rpx;font-size: 22rpx;color: #888;">({{userMes.tel}})</text>

				<!-- <text class="tong">累计读书5本
					<span style="margin: 0 20upx;">|</span> 今日读50分钟
				</text> -->
			</view>
			<br clear="both">
		</view>
		<!-- <view class="now_vip" v-if="userMes.vip==0">
			<text>
				<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
				开通会员畅享海量内容
			</text>
			<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
		</view> -->

		<!-- <view class="now_vip" v-if="userMes.vip==1">
			<text>
				<image src="../../static/icon/mine_v.png"></image>
				尊贵的VIP会员
				<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
			</text>
			<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
		</view> -->

		<view class="chong_zhi">
			<view class="zhanghu" @click="onPageJump('../user/persCount')">
				我的账户
				<text style="float: right;line-height: 85rpx;"> > </text>
			</view>
			<view class="chong_list">
				<view>
					<b>{{userMes.peanutCoin}}</b>
					天医币
				</view>
				<view>
					<b>{{userMes.conponsCount}}</b>
					优惠券
				</view>
				<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')">充 值</b> -->
				<b class="chong_btn" v-if="platform != 'ios'" @click="onPageJump('./reCharge')">充 值</b>
			</view>
		</view>

		<view class="xiugai">
			<view class="nav_list" @click="switchTab('../bookShop/orderList')">
				<text>我的订单</text>
			</view>
			<view class="nav_list" @click="appJump()" v-if="this.osName !== null">
				<text>打开一路健康</text>
			</view>

			<!-- <view class="nav_list" @click="onPageJump('../clock/clockList')">
				<text>我的打卡</text>
			</view> -->
			<view class="nav_list" @click="onPageJump('../listen/home')">
				<text>我的听书</text>
			</view>
			<view class="nav_list" @click="onPageJump('../listen/setListen')">
				<text>听书设置</text>
			</view>
			<view class="nav_list" @click="onPageJump('../peanut/myComments')">
				<text>我的评价</text>
			</view>
			<view class="nav_list" @click="onPageJump('../peanut/shopping')">
				<text>购物车</text>
			</view>
			<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
				<text>电子书购买记录</text>
			</view> -->
			<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookRecord')">
				<text>阅读记录</text>
			</view> -->
			<view class="nav_list" @click="onPageJump('../user/persData')">
				<text>修改个人资料</text>
			</view>
			<view class="nav_list" @click="onPageJump('../user/address')">
				<text>地址管理</text>
			</view>

			<!-- <view class="nav_list" @click="onGoing()">
				<text>帮助与反馈11111</text>
			</view> -->
			<!-- <view class="nav_list" @click="newOnShare" v-if="isAndorid"> -->
			<view class="nav_list" @click="newOnShare">
				<text>分享App</text>
			</view>
			<view class="nav_list" @click="onPageJump('../peanut/aboutUs')">
				<text>关于我们</text>
			</view>
			<view class="nav_list" @click="signShow=true">
				<text>退出登录</text>
			</view>
			<view class="nav_list" @click="logout">
				<text>注销帐号</text>
			</view>

		</view>

		<u-modal :show="signShow" :content="signContent" :showCancelButton="true" @cancel="signShow=false"
			@confirm="signOut">
		</u-modal>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share @select="haveSelected"></uni-popup-share>
		</uni-popup>

		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	// import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				showEbook: false, // 显示电子书相关
				userMes: {},
				signShow: false,
				signContent: '是否要退出登录？',
				playData: {},
				isAndorid: true,
				platform: null, // 设备系统
				osName: null, // 系统名称
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// #ifdef APP-PLUS
			this.getOS()
			this.platform = uni.getSystemInfoSync().platform
			this.osName = plus.os.name
			// console.log('操纵系统',this.platform)
			// #endif
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();

		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			...mapMutations(['setUserInfo']),

			// app 跳转
			appJump() {
				// console.log(plus.os.name,'系统名称')
				if (this.osName == "Android") { //安卓
					if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app
							pname: 'cn.com.everhealth', //B款app云打包的包名
						})) { //安装了app
						plus.runtime.launchApplication({ //打开app
							pname: "cn.com.everhealth", //B款app云打包的包名
							extra: {
								url: "everhealth://cn.com.everhealth" //B款app配置的schemes+云打包的包名
							},
							function(e) {
								console.log("Open system default browser failed: " + e.message);
							}
						})
					} else { //未安装app
						plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=cn.com.everhealth', function(res) {
							//进入后台小哥哥给我的应用宝下载链接，让你们后台给你
							//这链接会判断你手机是ios还是Android，Android进入应用宝下载app
							//跟下面的是一个链接
							console.log(res);
						});
					}
				} else if (this.osName == "iOS") { //苹果
					//因为ios查不到B款app在ios系统手机里面，其实下载了，也是检测不到，所以就不检测了
					//直接打开B款app，B款app没有的话，会进入回调报错，我们在回调去打开下载链接
					plus.runtime.launchApplication({
						action: "everhealth://"
					}, function(e) {
						plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=cn.com.everhealth',
							function(res) {
								//进入后台小哥哥给我的appStore下载app链接，，让你们后台给你
								//这链接会判断你手机是ios还是Android，ios进入应用宝下载app
								//跟上面的是一个链接
								console.log(res);
							});
					});
				}

			},
			// 获得操作系统
			getOS() {
				let oprateOs = ''
				oprateOs = uni.getSystemInfoSync().platform
				// console.log(oprateOs)
				if (oprateOs == 'android') {
					this.isAndorid = true
				} else {
					this.isAndorid = false
				}
			},
			haveSelected(data) {
				console.log(data, ' 选择的是')
				if (data.index == 0) {
					// 分享到好友
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: this.$apkUrl,
						title: "疯子读书",
						summary: "我正在使用疯子读书提升自己，赶紧跟我一起来体验吧！",
						imageUrl: "static/fengziIcon.jpg",
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (data.index == 1) {
					// 分享到朋友圈
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 0,
						href: this.$apkUrl,
						title: "疯子读书",
						summary: "我正在使用疯子读书提升自己，赶紧跟我一起来体验吧！",
						imageUrl: "static/fengziIcon.jpg",
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				}
			},
			switchTab(url) {
				uni.switchTab({
					url: url
				});
			},
			getData() {
				// 获取个人信息
				if (this.userInfo.id != undefined) {
					this.$http
						.post('book/user/info/' + this.userInfo.id)
						.then(res => {
							this.userMes = res.user
							if (this.userMes.vip == 1) {
								this.userMes.vipValidtime = this.userMes.vipValidtime.substring(0, this.userMes
									.vipValidtime
									.indexOf(' '))
							}
						});
				}

			},

			// 新写分享
			newOnShare() {
				this.$refs.share.open()
			},

			// 注销账户
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要注销当前账户吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showModal({
								title: '提示',
								showCancel: false,
								content: `注销申请已提交成功,请联系客服进行后续操作：022-24142321`,
								success: function(res1) {
									if (res1.confirm) {
										that.signOut()
									}
								}
							});
						} else if (res.cancel) {
							// 取消操作
						}
					}
				});
			},
			// 跳转
			onGoing() {
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期待...'
				})
			},
			onPageJump(url) {
				console.log(url, 'url')
				uni.navigateTo({
					url: url
				});
			},


			// 退出登录
			signOut() {
				this.signShow = false
				this.setUserInfo({
					'token': null
				})
				uni.reLaunch({
					url: '../user/login'
				});
			},
		},

	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.per_mes {
		margin: 50rpx 0 50rpx 0;
		align-items: center;

		.per_mes_img {
			width: 120upx;
			height: 120upx;
			background-color: #fff;
			border-radius: 120upx;
			margin: 0 30upx 0 0;
			float: left;
		}

		view {
			float: left;
			margin-top: 20rpx;

			.name {
				display: inline-block;
				font-weight: bold;
				font-size: 38upx;
				margin-bottom: 10rpx;
			}

			.tong {
				color: #999;
				font-size: 25upx;
			}

			.per_user_img {
				display: inline-block;
				width: 40upx;
				height: 40upx;
				margin-left: 10rpx;
				vertical-align: super;
			}
		}


	}

	.now_vip {
		background-color: #fff;
		// border-radius: 20upx;
		margin: 0 0 30upx 0;
		padding: 0 30upx;
		height: 120upx;
		background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);

		image {
			width: 46rpx;
			height: 50rpx;
			display: inline-block;
			vertical-align: text-bottom;
			margin: 0 10rpx 0 0;
		}

		text {
			font-size: 30upx;
			line-height: 120upx;
			color: #977749;
			font-weight: bold;
		}

		.kt_btn {
			font-size: 26upx;
			display: block;
			float: right;
			border-radius: 50rpx;
			color: #fffbf6;
			padding: 12rpx 26rpx;
			margin: 33rpx 0 0 0;
			background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
		}
	}

	.chong_zhi {
		background-color: #fff;
		margin: 0 0 30upx 0;
		padding: 0 30upx;
		height: 240upx;

		.zhanghu {
			font-size: 32upx;
			line-height: 100upx;
			font-weight: bold;
		}

		.chong_list {
			view {
				width: 25%;
				text-align: center;
				display: inline-block;
				color: #a3a1a1;

				b {
					font-size: 45rpx;
					display: block;
					margin: 0 0 10rpx 0;
					color: #76757b;
				}
			}

			.chong_btn {
				font-size: 26upx;
				display: block;
				float: right;
				border-radius: 50rpx;
				color: #fffbf6;
				padding: 12rpx 42rpx;
				margin: 20rpx 0 0 0;
				background: #815219;
			}
		}
	}

	.xiugai {

		.nav_list {
			background-color: #fff;
			padding: 30upx 0 30upx 20upx;
			display: flex;
			align-items: center;
			position: relative;
			font-weight: bold;
			border-bottom: 1px solid #e5e5e5;

			&:active {
				background-color: #f5f5f5;
			}

			text {
				color: #333;
				margin-left: 10rpx;
			}

			&::after {
				content: '';
				position: absolute;
				right: 20upx;
				top: 50%;
				transform: translateY(-50%);
				width: 40upx;
				height: 40upx;
				background-image: url('../../static/icon/icon_right.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.nav_list:nth-last-child(1) {
			border-bottom: 0;
		}
	}
</style>