<template>
	<view class="w-body">
		<w-navbar fixed left-home left-back title="登录与登出" class="navbar"></w-navbar>
		<view style="padding:1rem;">
			<view>计算变量(是否登录):isLogin={{authStore.isLogin}}</view>
			<view v-if="authStore.isLogin">
				<u-divider text="登录成功后"></u-divider>
				<view class="w-flex" style="margin-bottom: 1rem;">
					<view style="position: relative;">
						<u-avatar size="3rem" mode="aspectFill" :src="authStore.user.avatar"></u-avatar>
					</view>
					<view style="color:var(--w-main); font-size: 1rem; margin-left: .5em;">
						<view>{{authStore.user.nickName}}</view>
						<view class="role">{{authStore.user?.roles[0]?.roleName}}</view>
					</view>
				</view>
				<u-row gutter="5">
					<u-col span="6"><u-button plain type="primary" @click="$u.throttle(authStore.loadInfo())" text="重新获取用户信息"></u-button></u-col>
					<u-col span="6"><u-button type="error" @click="$u.throttle(authStore.logout())" text="安全退出"></u-button></u-col>
				</u-row>
				  <u-collapse>
					  <u-collapse-item title="用户信息:authStore.user" name="user">
						  <view class="border">
						  	<text>{{authStore.user}}</text>
						  </view>
					  </u-collapse-item>
					  <u-collapse-item title="用户令牌:authStore.token" name="token">
						  <view class="border">
						  	<text>{{authStore.token}}</text>
						  </view>
					  </u-collapse-item>
					  <u-collapse-item title="用户角色:authStore.roles" name="roles">
						  <view class="border">
						  	<text>{{authStore.roles}}</text>
						  </view>
					  </u-collapse-item>
					  <u-collapse-item title="用户权限:authStore.permissions" name="permissions">
						  <view class="border">
						  	<text>{{authStore.permissions}}</text>
						  </view>
					  </u-collapse-item>
					  <u-collapse-item title="登录判断: isLogin"  name="login">
						  <view class="border">
						  	<view v-if="authStore.isLogin" >登录的</view>
								<view v-if="!authStore.isLogin" >未登录的</view>
						  </view>
					  </u-collapse-item>
					  <u-collapse-item title="角色判断: hasRole hasRoleAnd"  name="roles">
						  <view class="border">
								<view>common:{{ authStore.hasRole('common') }}</view>
								<view>abc:{{ authStore.hasRole('abc') }}</view>
						  	
						  </view>
					  </u-collapse-item>
					  <u-collapse-item title="权限判断: hasPermission hasPermissionAnd"  name="permissions">
						  <view class="border">
								<view>system:post:list : {{ authStore.hasPermission('system:post:list') }}</view>
								<view>a:b:c :{{ authStore.hasPermission('a:b:c') }}</view>
						  </view>
					  </u-collapse-item>
				  </u-collapse>
				
			</view>
			
			<view v-else>
				<u-divider text="未登录"></u-divider>
				<u-row gutter="5">
					<u-col span="6"><u-button plain type="primary" @click="$u.throttle(login())" text="小程序静默登录"></u-button></u-col>
					<u-col span="6"><u-button type="success" @click="authStore.loginShow = true;" text="授权注册登录"></u-button></u-col>
				</u-row>
			</view>
		</view>
		<w-wx-login v-model="authStore.loginShow" @submit="doRegLogin"></w-wx-login>
	</view>
</template>

<script setup>
import { useAuthStore } from '@/store'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { regLogin } from '@/api/wx.js'


const authStore = useAuthStore();
onLoad(()=>{
	uni.$on("login",()=>{
		uni.$u.toast("登录成功事件");
	});
	uni.$on("loadInfo",()=>{
		uni.$u.toast("重新加载用户信息事件");
	});
	uni.$on("logout",()=>{
		uni.$u.toast("安全退出事件");
	});
});
onUnload(()=>{
	uni.$off("login");//解绑所有登录成功事件
	uni.$off("loadInfo");//解绑所有重新加载用户信息事件
	uni.$off("logout");//解绑所有安全退出事件
});


const login = async()=>{
	try{
		await authStore.login();
	}catch(e){
		// console.debug(e,e.message,e.cause);
		uni.$u.toast(e.cause.msg);
	}
}

const doRegLogin = async(event)=>{
	console.debug(event);
	let ret = await regLogin(event);
	console.debug("注册登录的结果",ret);
	authStore.token = ret.token;
	authStore.loadInfo();
}

</script>

<style lang="scss" scoped>
	.w-body {
		.title {
			font-size:1rem;
			color:var(--w-main-dark-1);
			font-weight: bold;
		}
		.border {
			font-size:0.8rem; border:solid 1px var(--w-main); padding: 1rem; margin: 1rem 0;
			& > .b:first-child{
				padding-top: 0;
			}
			view {
				padding: .5rem;
				line-height: 1.6;
			}
			.b {
				font-weight: bold;
				padding: 1rem 0 .1rem;
			}
		}
		.role {
			display: inline-block;
			font-size: .7rem;
			line-height: 1;
			padding: .3rem .5rem;
			border-radius: .2rem;
			color: var(--w-bg);
			background-color: var(--w-warn-dark-2);
		}
		
	}
</style>