<template>
	<view class="login-page" v-if="show">
		<view class="title">
			<text class="title-tip">wflow-pro 登录</text>
			<text class="title-desc">体验wflow-pro移动端完整功能</text>
		</view>
		<view>
			<input class="login-input" type="text" placeholder="账号" clearable />
			<input class="login-input" password type="text" placeholder="密码" clearable />
		</view>
		<view class="opration">
			<label>
				<checkbox style="transform: scale(0.8);" activeBackgroundColor="#4478F7" iconColor="#ffffff" value="cb"
					checked="true" />记住我
			</label>
			<text>忘记密码了</text>
		</view>
		<button type="primary" style="border-radius: 13rpx;" @click="chooseUser">选择体验用户</button>
		<view class="other-login">
			<text>其他方式登录</text>
		</view>
		<view class="login-type">
			<image class="img" src="/static/qqlogin.png" mode="aspectFit"></image>
			<image class="img" src="/static/wxlogin.png" mode="aspectFit"></image>
		</view>
		<org-picker ref="orgPicker" showNav :multiple="false" type="user" :selected="loginUser ? [loginUser]:null"
			@ok="selectOk"></org-picker>
	</view>
</template>

<script setup>
	import {
		login
	} from '@/api/org.js'
	import OrgPicker from '@/components/OrgPicker.vue'
	import {
		onMounted,
		ref
	} from 'vue';

	const orgPicker = ref()
	const show = ref(false)
	const loginUser = ref(null)
	const loginParams = ref({
		username: '',
		password: ''
	})

	onMounted(() => {
		
		// loginUser.value = uni.getStorageSync('loginUser')
		// if (loginUser.value) {
		// 	uni.reLaunch({
		// 		url: '/pages/submit/submit'
		// 	})
		// }
	})

	function doLogin(userId) {
		login(userId).then(rsp => {
			//登录信息设置到本地
			uni.setStorageSync('loginUser', rsp.data)
			uni.setStorageSync('wflow-token', rsp.data.token)
			uni.showToast({
				title: '欢迎' + rsp.data.userName,
				icon: 'success'
			})
			uni.reLaunch({
				url: '/pages/submit/submit'
			})
		}).catch(err => {
			uni.showToast({
				title: '登录失败',
				icon: 'error'
			})
		})
	}

	function selectOk(users) {
		loginUser.value = users[0]
		orgPicker.value.close()
		doLogin(loginUser.value.id)
	}

	//演示系统选择登录的用户
	function chooseUser() {
		orgPicker.value.show()
		uni.showToast({
			title: '请选择要体验的用户',
			icon: 'none'
		})
	}
</script>

<style lang="less">
	page {
		background-color: white !important;
	}

	.login-page {
		padding: 0 32rpx;

		.title {
			padding: 256rpx 0 96rpx 0;

			.title-tip {
				display: block;
				color: #373E60;
				font-size: 50rpx;
				font-weight: 600;
				margin-bottom: 13rpx;
			}

			.title-desc {
				font-weight: 500;
				color: #959595;
				font-size: 30rpx;
			}
		}

		.login-input {
			font-size: 32rpx;
			padding: 25.6rpx 48rpx;
			background-color: #F7F8F9;
			border-radius: 13rpx;
			margin: 32rpx 0;
			width: calc(100% - 96rpx);
		}

		.opration {
			display: flex;
			margin-bottom: 32rpx;
			justify-content: space-between;
			align-items: center;
			color: #4478F7;
		}

		.other-login {
			margin: 128rpx 0;
			width: 100%;
			height: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #878787;
			color: #878787;

			text {
				background-color: white;
				padding: 0 5px;
			}
		}

		.login-type {
			display: flex;
			justify-content: center;
			align-items: center;

			.img:first-child {
				width: 90rpx;
				height: 90rpx;
			}

			.img {
				margin: 0 32rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>