<template>
<view class="header bg-gradual-blue">
	<sent-navbar>我的</sent-navbar>
	<view class="user-head flex">
		<view class="user-head-img">
			<image :src="userinfo.social?.avatar" class="avatar" mode="aspectFill"></image>
		</view>
		<view class="user-info flex flex-direction">
			<text class="t text-xl text-white">{{ userinfo.nickname }}</text>
			<text class="t text-df text-white">ID：{{ userinfo.uid }}</text>
		</view>
	</view>
</view>
<view class="user-count-box bg-white">
	<view class="grid col-3">
		<view class="item flex flex-direction justify-center" v-for="(item,index) in countItem" :key="index">
			<text></text>
			<text class="t">{{ item.label }}</text>
		</view>
	</view>
</view>
<sent-card title="实用功能" :titleBorder="false" style="margin: 20rpx;">
	dd
</sent-card>
<sent-card title="我的服务" radius arrow style="margin: 20rpx;">
	dd
</sent-card>

<view style="margin: 30rpx; text-align: center;">
	<view class="cu-btn round lg bg-red" style="width: 80%;" @click="userlogin">退出登录</view>
</view>

<sent-tabbar :current="tabbar.current" :tabBar="tabbar.list" @tabSelect="tabSelect"></sent-tabbar>
</template>

<script>
export default {
	data() {
		return {
			tabbar: {
				current: 1,
				list: this.$config.tabbarList
			},
			countItem: [
				{label: '钱包', icon: "stIconWallet"},
				{label: '优惠券', icon: "stIconCoupon"},
				{label: '积分', icon: "stIconPoint"}
			],
			userinfo: this.$store.state.user.userInfo
		}
	},
	onLoad(e) {
		// if(!this.$store.state.user.isLogin){
		// 	this.$u.route('/pages/ucenter/login/index')
		// }else{
		// 	this.getUserInfo()
		// }
	},
	methods: {
		userlogin(){
			uni.login({
				provider: 'weixin',
				success: (res) => {
					let code = res.code
					uni.getUserInfo({
						provider: 'weixin',
						success: (res) => {
							this.wxLogin({code: code, encryptedData: res.encryptedData, iv: res.iv})
						},
						fail: (res) => {
							console.log(res)
						}
					})
				},
				fail: (res) => {
					console.log(res)
				}
			})
		},
		wxLogin(res){
			let data = {
				code: res.code,
				encryptedData: res.encryptedData,
				iv: res.iv,
				type: 'miniapp'
			}
			this.$api.member.wechat.login.post(data).then(res => {
				if(res.code == 1){
					this.userinfo = res.data
					this.$store.commit('setUserLogin', res.data)
					let beforeLogin = this.$tool.data.get('beforLoginUrl')
					let url = '/pages/ucenter/index/index'
				}
			})
		},
		tabSelect(e){
			this.$u.route(this.tabbar.list[e].link)
		},
		async getUserInfo(){
			let res = await this.$api.member.lists.user.get({type: 'wechat'})
			if(res.code == 1){
				this.userinfo = res.data
				this.$store.commit('setUserInfo', res.data)
			}
		},
		async logout(){
			uni.getProvider({
				service: 'oauth',
				success: (res) => {
					console.log(res)
				},
				fail: (res) => {
					console.log(res)
				}
			});
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log(res)
					// this.wxLogin(res.code)
				},
				fail: (res) => {
					console.log(res)
				}
			})
			// let res = await this.$api.member.logout.post()
			// if(res.code == 1){
			// 	this.$store.commit('setUserLogout')
			// 	this.$u.route('/pages/ucenter/login/index')
			// }else{
			// 	this.$u.toast('退出失败!')
			// }
		}
	}
}
</script>

<style lang="scss" scoped>
.header{
	border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx; padding-bottom: 80rpx;
	.user-head{
		padding: 20px;
		.user-head-img{
			padding: 10rpx;
			.avatar{width: 120rpx; height: 120rpx; border-radius: 10rpx; background: #efefee;}
		}
		.user-info{
			padding: 10rpx 20rpx; flex: 1;
			.t{padding: 0 0 2rpx 0;}
		}
	}
}
.user-count-box{
	padding: 20rpx; margin: auto 20rpx; margin-top: -80rpx; border-radius: 10rpx;
	.item{
		text-align: center; padding: 10rpx;
		.icon{height: 60rpx;}
		.t{font-size: 26rpx;}
	}
}
</style>
