<template>
	<view class="wrap">
		<view class="stabar"></view>
		<view class="mainwrap">
			<view class="perinfo"> <span class="type-name"><img :src="avatar"></img></span>
				<view class="dycd"> <span class="myname" @click="checkMyInfo()">{{name}}</span>
					<view class="myitem"> <span @click="showMedal()">勋章：{{medalNum}}<i
								:style="{'background-color':active == 0 ?'red':'none'}"></i></span>
						<span>挑战历史：{{challengeNum}}</span>
					</view>
				</view>
			</view>
			<view class="banbox_sec">
				<swiper style="height: 100%;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
					:circular="true">
					<swiper-item v-for="(item, i) in swiperList" :key="i">
						<navigator style="height: 100%;" class="swiper-item">
							<img :src="item.uploadPath"></img>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="mset">
				<ul>
					<li v-for="(item,i) in functionList" :key="i">
						<span @click="navClickHandler(item)"
							:style="'background-image:url('+item.uploadPath+');'">{{item.name}}</span>
					</li>
					<li>
						<span @click="getUserInfoByWX()">测试</span>
					</li>
				</ul>
			</view>
		</view>
		<view class="footbox">
			<tabbar :page="page"></tabbar>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
						class="text">popup 内容</text></view>
			</uni-popup>
		</view>
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				active: 1,
				medalNum: 0,
				challengeNum: 0,
				page: "",
				name: "",
				avatar: uni.$http.baseUrl + "/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
				//轮播图数据列表
				swiperList: [],
				//主页功能列表
				functionList: []
			};
		},
		onLoad() {
			this.name = this.userName;
			this.avatar = this.avatarUrl;
			this.getSwiperList()
			this.getFunctionList()
			this.getMyMedalList()
			this.getChallengeTotal()
			this.getStatus()
			this.page = "my"
		},
		onShow() {
			this.name = this.userName;
			this.avatar = this.avatarUrl;
			this.getSwiperList()
			this.getFunctionList()
			this.getMyMedalList()
			this.getChallengeTotal()
			this.getStatus()
			this.checkLogin();
		},
		onPullDownRefresh() {
			this.name = this.userName;
			this.avatar = this.avatarUrl;
			this.getSwiperList()
			this.getFunctionList()
			this.getMyMedalList()
			this.getChallengeTotal()
			this.getStatus()
		},
		computed: {
			...mapState('m_user', ['token', 'userinfo', 'userId', 'userName', 'avatarUrl'])
		},
		methods: {
			...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken', , 'updateUserName',
				'updateUserId', 'updateAvatarUrl', 'updateRedirectInfo'
			]),
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)

				if (succ && succ.confirm) {
					this.updateAddress({})
					this.updateUserInfo({})
					this.updateToken('')
				}
			},
			async getMyMedalList() {

				const {
					data: res
				} = await uni.$http.post('/small/wechat/showMyMedal', {
					guid: this.userId
				})
				if (!res.success) return uni.$showMsg()
				this.medalNum = res.data.length;

				// uni.$showMsg('数据请求成功！')
			},
			async getStatus() {

				const {
					data: res
				} = await uni.$http.post('/small/wechat/getActiveStatus', {
					guid: this.userId
				})
				if (!res.success) return uni.$showMsg()
				if (res.data != null) {
					this.active = res.data.active;
				}
				// uni.$showMsg('数据请求成功！')
			},
			async getChallengeTotal() {

				const {
					data: res
				} = await uni.$http.post('/small/questionFre/listAll', {
					userId: this.userId
				})
				if (!res.success) return uni.$showMsg()
				this.challengeNum = res.data.length;

				// uni.$showMsg('数据请求成功！')
			},
			async getSwiperList() {

				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll', {
					page: "my"
				})
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				this.swiperList = res.data
				// uni.$showMsg('数据请求成功！')
			},
			async getFunctionList() {

				const {
					data: res
				} = await uni.$http.post('/small/project/home/listAll')
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				this.functionList = res.data;
				// uni.$showMsg('数据请求成功！')
			},
			async showMedal() {
				if (this.active == 0) {
					const {
						data: res
					} = await uni.$http.post('/small/wechat/editActiveStatus', {
						guid: this.userId,
						active: 1
					})
					if (!res.success) return uni.$showMsg()
					this.active = 1;
				}
				uni.navigateTo({
					url: '/subpkg/medal/medal?medalNum=' + this.medalNum + '&avatarUrl=' + this.avatar +
						'&name=' + this.name
				})
			},
			navClickHandler(item) {
				if (item !== "") {
					uni.navigateTo({
						url: item.pagePath
					})
				}
			},
			checkMyInfo() {
				uni.navigateTo({
					url: '/subpkg/userInfo/userInfo?avatarUrl=' + this.avatar + '&name=' + this.name
				})
			},
			checkLogin() {
				// if(this.token === "") {
				   this.getUserInfoByWX();
				// }
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			getUserInfoByWX() {
				console.log("================== getUserInfoByWX ==================")
				let that = this;
				this.toggle('bottom');
				// uni.openSetting({
				// 	success(res) {
				// 		console.log(res.authSetting);
				// 	},
				// 	fail(err) {
				// 		console.log(err);
				// 	}
				// });
				// 直接拉起授权窗口
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('用户昵称为：' + infoRes.userInfo.nickName);
						that.getToken(infoRes);
					},
					fail(error) {
						console.log('失败', error);
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				});
			},
			getUserInfoByWX2ShowModal() {
				let that = this;
				uni.getSetting({
					success(res) {
						// 判断个球. 登录页直接拉起授权窗口
						uni.showModal({
							title: '授权提示',
							content: '因您首次进入!我们需要获取您的基础信息，请确认授权',
							success: function(res) {
								if (res.confirm) {
									// 用户点击确定，继续授权
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log('用户昵称为：' + infoRes.userInfo
												.nickName);
											that.getToken(infoRes);
										},
										fail(error) {
											console.log('失败', error);
											uni.switchTab({
												url: '/pages/index/index'
											})
										}
									});
								} else if (res.cancel) {
									// 用户点击取消
									console.log('用户拒绝授权');
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							}
						});
					}
				});
			},
			async getToken(info) {
				// 获取 code 对应的值
				const [err, res] = await uni.login().catch(err => err)
				if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！')

				// 准备参数
				const query = {
					code: res.code,
					encryptedData: info.encryptedData,
					iv: info.iv,
					rawData: info.rawData,
					signature: info.signature
				}


				const {
					data: loginResult
				} = await uni.$http.post('/small/wechat/login', query)
				if (loginResult.token === "") return uni.$showMsg('登录失败！')

				// 直接把 token 保存到 vuex 中
				this.updateToken(loginResult.token)
				this.updateUserName(loginResult.userName)
				this.updateUserId(loginResult.userId)
				if (loginResult.avatarUrl != null && loginResult.avatarUrl.indexOf('http') == -1) {
					loginResult.avatarUrl = uni.$http.baseUrl + loginResult.avatarUrl
				}
				this.name = loginResult.userName;
				this.avatar = loginResult.avatarUrl;
				this.updateAvatarUrl(loginResult.avatarUrl)
				uni.switchTab({
					url: '/pages/my/my'
				})
				//this.navigateBack()
			},
		},
		components: {
			tabbar
		}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");

	// .my-userinfo-container {
	// 	height: 100%;
	// 	background-color: #F4F4F4;

	// 	.top-box {
	// 		height: 400rpx;
	// 		background-color: #aba9d0;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		flex-direction: column;

	// 		.avatar {
	// 			width: 90px;
	// 			height: 90px;
	// 			border-radius: 45px;
	// 			border: 2px solid #FFF;
	// 			box-shadow: 0 1px 5px black;
	// 		}

	// 		.nickname {
	// 			font-size: 16px;
	// 			color: black;
	// 			font-family: Georgia, 'Times New Roman', Times, serif;
	// 			margin-top: 10px;
	// 		}
	// 	}
	// }

	// .panel-list {
	// 	padding: 0 10px;
	// 	position: relative;
	// 	top: -10px;

	// 	.panel {
	// 		background-color: white;
	// 		border-radius: 3px;
	// 		margin-bottom: 8px;

	// 		.panel-title {
	// 			line-height: 45px;
	// 			padding-left: 10px;
	// 			font-size: 15px;
	// 			border-bottom: 1px solid #F4F4F4;
	// 		}

	// 		.panel-body {
	// 			display: flex;
	// 			justify-content: space-around;

	// 			.panel-item {
	// 				display: flex;
	// 				flex-direction: column;
	// 				align-items: center;
	// 				justify-content: space-around;
	// 				padding: 10px 0;
	// 				font-size: 13px;

	// 				.icon {
	// 					width: 35px;
	// 					height: 35px;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	// .function-img {
	// 	width: 30px;
	// 	height: 30px;
	// }

	// .panel-list-item {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	font-size: 15px;
	// 	padding: 0 10px;
	// 	line-height: 45px;
	// }

	// swiper {
	// 	height: 230rpx;

	// 	.swiper-item,
	// 	image {
	// 		width: 100%;
	// 		height: 100%;
	// 		border-radius: 4px;
	// 	}
	// }
</style>