<template>
	<view class="user">
		<u-navbar fixed title="我的" :placeholder="true" :titleStyle="{'color':'#fff'}" title-color="#fff" leftIcon=" "
			:border="false" :bgColor="scrollTop?'#2080f9':'transparent'"></u-navbar>
		<view class="user-hd">
			<view class="a" @click="openPage(isLogin?8:14)">
				<image :src="userInfo.avatar?userInfo.avatar:'/static/avater.png'"></image>
				<view class="n" v-if="isLogin">{{userInfo.nickname||''}}</view>
				<view class="n" v-else>登录</view>
				<view class="vip" v-if="isLogin && userInfo.agent_name">{{userInfo.agent_name}}</view>
				<view class="mobile" v-else>{{userInfo.mobile}}</view>
			</view>
			<view class="b" v-if="isLogin" @click="openPage(isLogin?8:14)">
				<image :src="staticUrl('/static/icon-edit.png')"></image>编辑资料
			</view>
		</view>
		<view class="user-money" @click="openPage(isLogin?9:14)">
			<view class="a">
				<image :src="staticUrl('/static/icon-money.png')"></image>
				我的账户（元）
			</view>
			<view class="b">
				{{userInfo.balance|| 0}}
			</view>
		</view>
		<view class="user-menu">
			<view class="a" @click="openPage(isLogin?10:14)">
				<image :src="staticUrl('/static/icon-user-01.png')"></image>
				我的团队
			</view>
			<view class="a" @click="openPage(isLogin?11:14)">
				<image :src="staticUrl('/static/icon-user-02.png')"></image>
				我的佣金
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="a" @click="openPage(isLogin?12:14)">
				<image :src="staticUrl('/static/icon-user-03.png')"></image>
				专属推广码
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="a" @click="openPage(isLogin?16:14)">
				<image :src="staticUrl('/static/icon-user-03.png')"></image>
				专属推广码
			</view>
			<!-- #endif -->
		</view>
		<view class="user-bd">
			<view class="item" @click="openPage(1)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-04.png')"></image>
					试题购买
				</view>
				<view class="b">
					<image :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
			<view class="item" @click="openPage(2)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-05.png')"></image>
					视频
				</view>
				<view class="b">
					<image :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
		</view>
		<view class="user-bd">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" @click="openPage(3)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-06.png')"></image>
					关注我们
				</view>
				<view class="b">
					<image :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="item" @click="openPage(15)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-06.png')"></image>
					关注我们
				</view>
				<view class="b">
					<image :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
			<!-- #endif -->
			<view class="item" @click="openPage(4)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-07.png')"></image>
					联系我们
				</view>
				<view class="b">
					{{configInfo.mobile}}
				</view>
			</view>
			<view class="item" @click="openPage(6)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-09.png')"></image>
					隐私协议
				</view>
				<view class="b">
					<image :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
			<view class="item" @click="openPage(7)">
				<view class="a">
					<image :src="staticUrl('/static/icon-user-10.png')"></image>
					关于我们
				</view>
				<view class="b">
					<image :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
		</view>
		<view class="user-fd" @click="openPage(13)" v-if="isLogin">
			退出登录
		</view>
		<u-action-sheet :show="isShow" @close="isShow = false" cancelText="取消" :round="10">
			<view class="user-action">
				<view class="li">
					<image :src="staticUrl('/static/user-share.png')"></image>
					微信
					<button open-type="share"></button>
				</view>
				<view class="li" @click="toTu()">
					<image :src="staticUrl('/static/user-image.png')"></image>
					生成图片
				</view>
			</view>
		</u-action-sheet>
		<u-popup :show="isPopup" round="10" @close="isPopup=false" mode="center" :closeable="true">
			<view class="popup-qr">
				<image :src="qr_code"></image>
				<!-- #ifdef MP-WEIXIN -->
				<u-button color="#2080F9" @click="download(qr_code)">保存相册</u-button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<u-button color="#2080F9" @click="download1(qr_code)">立即下载</u-button>
				<!-- #endif -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow1: false,
				isLogin: false,
				isShow: false,
				statusBarHeight: 0,
				scrollTop: 0,
				isPopup: false,
				userInfo: {},
				configInfo: {},
				qr_code: ""
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.isShow = uni.getStorageSync("isShare")?true:false;
			uni.removeStorageSync("isShare")
			// #endif
		},
		onShow() {
			if(uni.getStorageSync("userToken")){
				this.getUserInfo();
				this.isLogin = true;
			}else{
				this.userInfo = {}
				this.isLogin = false;
			}
			this.getConfig();
			this.getConfig1();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '自定义分享标题',
				path: '/pages/login/login?id='+this.userInfo.id||'',
				imageUrl: this.userInfo.qr_code
			}
		},
		destroyed() {
			uni.removeStorageSync("isShare")
		},
		methods: {
			//开关
			async getConfig1() {
				const { code, data, msg } = await this.$api.getConfigIndex({})
				if (code == 200) {
					this.isShow1 = data.is_open;
				}
			},
			toTu() {
				this.isPopup = true;
				this.isShow = false;
				this.qr_code = this.userInfo.qr_code;
				uni.removeStorageSync("isShow")
			},
			download1(qr_code){
				let a = document.createElement("a");
				a.href = qr_code;
				a.setAttribute("download", "mytag");
				a.click();
			},
			openPage(index) {
				const that = this;
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/question/buyOne"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/user/videoList"
					})
				} else if (index == 3) {
					this.qr_code = this.configInfo.qr_code_img;
					this.isPopup = true;
				} else if (index == 15) {
					this.qr_code = 'https://boat-server.njrenzhou.cn/static/qr-public-code.png';
					this.isPopup = true;
				}  else if (index == 4) {
					uni.makePhoneCall({
						phoneNumber: that.configInfo.mobile,
						success: function() {
							uni.showToast({
								title: '请稍等，拨通中',
								duration: 2000
							});
						},
						fail: function() {
							
						},
					})
				} else if (index == 6) {
					uni.navigateTo({
						url: "/pages/user/privacyPolicy"
					})
				} else if (index == 7) {
					uni.navigateTo({
						url: "/pages/user/aboutUs"
					})
				} else if (index == 8) {
					uni.navigateTo({
						url: "/pages/user/reset"
					})
				} else if (index == 9) {
					uni.navigateTo({
						url: "/pages/user/withdrawal"
					})
				} else if (index == 10) {
					uni.navigateTo({
						url: "/pages/user/team"
					})
				} else if (index == 11) {
					uni.navigateTo({
						url: "/pages/user/rebate"
					})
				} else if (index == 12) {
					this.isShow = true
				} else if (index == 16) {
					this.qr_code = this.userInfo.public_qr_code;
					this.isPopup = true;
				}   else if (index == 13) {
					uni.showModal({
						title: "温馨提示",
						content: "确定要退出吗？",
						confirmColor: "#2080F9",
						success(res) {
							if(res.confirm){
								that.toLogout()
							}
						}
					})
				} else if (index == 14) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			//退出登录
			async toLogout() {
				const { code, data, msg } = await this.$api.logOut({});
				if (code == 200) {
					uni.showToast({
						title: "退出成功"
					})
					uni.clearStorageSync();
					this.userInfo = {}
					this.isLogin = false
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			download(url) {
				const that = this;
				uni.downloadFile({
					url: url, //this.userInfo.qr_code
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								});
								that.isPopup = false
							},
							fail: function() {
								that.isPopup = false
								uni.showToast({
									title: "保存失败",
									icon: "none"
								});
							}
						})
					}
				})
			},
			//获取系统设置信息
			async getConfig() {
				const { code, data, msg } = await this.$api.getConfig({})
				if (code == 200) {
					this.configInfo = data;
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//获取用户信息
			async getUserInfo() {
				const { code, data, msg } = await this.$api.loginInfo({})
				if (code == 200) {
					this.userInfo = data;
					uni.setStorageSync("userInfo", data)
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop <= 15) {
				this.isScrollTop = false;
			} else {
				this.isScrollTop = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.user {
		width: 100%;
		min-height: calc(100vh - 44px);
		background: #f6f6f6 url(/static/user-bg.png) center top no-repeat;
		background-size: 100% auto;
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		box-sizing: border-box;

		&-action {
			padding: 30rpx;
			overflow: hidden;
			display: flex;
			align-items: center;

			.li {
				flex: 1;
				text-align: center;
				position: relative;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;

				image {
					width: 110rpx;
					height: 110rpx;
					display: block;
					margin: 0 auto;
					margin-bottom: 20rpx;
				}

				button {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
					opacity: 0;
				}
			}
		}

		&-login {
			overflow: hidden;
			padding: 45rpx 0;

			.btn {
				width: 200rpx;
				margin: 0 auto;
				padding: 10rpx 0;
				background-color: #FFFFFF;
				font-size: 36rpx;
				text-align: center;
				border-radius: 40rpx;
			}
		}

		&-hd {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			overflow: hidden;
			padding: 45rpx 0;

			.a {
				flex: 1;
				overflow: hidden;

				image {
					width: 130rpx;
					height: 130rpx;
					float: left;
					margin-right: 25rpx;
					border-radius: 50%;
				}

				.n {
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 10rpx;
				}

				.vip {
					width: 130rpx;
					height: 40rpx;
					float: left;
					margin-top: 15rpx;
					background: url(/static/icon-vip-bg.png) center top no-repeat;
					background-size: contain;
					text-align: center;
					line-height: 40rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #2080F9;
				}
				.mobile{
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #fff;
					float: left;
					margin-top: 15rpx;
				}
			}

			.b {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 10rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}

		&-money {
			width: 640rpx;
			height: 110rpx;
			background: #212F46;
			border-radius: 40rpx 40rpx 0px 0px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			.a {
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
			}

			.b {
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		&-menu {
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.a {
				width: 25%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;

				image {
					width: 70rpx;
					height: 70rpx;
					display: block;
					margin: 12rpx auto;
				}
			}
		}

		&-bd {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx;
			overflow: hidden;
			margin-top: 20rpx;

			.item {
				padding: 30rpx 0;
				border-top: 1px solid #EAEAEA;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:first-child {
					border-top-color: #FFFFFF;
				}

				.a {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 13rpx;
					}
				}

				.b {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 28rpx;
					font-weight: 400;
					color: #666;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 13rpx;
						position: relative;
						right: -20rpx;
					}
				}
			}
		}

		&-fd {
			width: 100%;
			border-radius: 100rpx;
			line-height: 100rpx;
			border: 1px solid #ddd;
			text-align: center;
			color: #333;
			font-size: 34rpx;
			margin-top: 20rpx;
		}

		.popup-qr {
			width: 600rpx;
			height: 750rpx;
			padding: 80rpx 30rpx 30rpx;
			box-sizing: border-box;
			text-align: center;

			image {
				width: 520rpx;
				height: 520rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>