<template>
	<div class="login-container">

		<el-form class="login-form">
			<b class="login-form-title">{{app.appName}}{{app.subName}}</b>
			<div class="login-form-item">
				<el-form-item>
					<el-input v-model="username" type="text" @blur="handleInputConfirm" placeholder="请输入用户名"
						style="width: 300px">
						<el-button slot="prepend" icon="el-icon-user"></el-button>
					</el-input>
				</el-form-item>
			</div>
			<div class="login-form-item">
				<el-form-item>
					<el-input v-model="password" type="password" placeholder="请输入密码" style="width: 300px"
						@keyup.enter.native="login">
						<el-button slot="prepend" icon="el-icon-lock"></el-button>
					</el-input>
				</el-form-item>
			</div>
			<div class="login-form-item">
				<el-form-item>
					<el-button type="primary" style="width: 300px" @click="login()"
						:disabled="disabledLogin">登录</el-button>
				</el-form-item>
			</div>
			<!-- <div class="login-form-item">{{userDesc}}</div> -->
			<div class="login-form-item">
				<el-form-item>
					<el-checkbox v-model="rememberChecked">记住用户名密码</el-checkbox>
				</el-form-item>
			</div>
		</el-form>

		<PopupPassword ref="PopupPasswordRef"></PopupPassword>
	</div>

</template>

<!-- beforeRouteEnter使用方法   vm只能调用对外暴露的内容 -->
<script>
	import {
		defineComponent
	} from 'vue';

	export default defineComponent({
		beforeRouteEnter(to, from, next) {
			console.log('beforeRouteEnter', to, from)
			if (to.query.name == null || to.query.name == '') {
				next((vm) => {
					vm.getPublicKey()
				})
			} else {
				next((vm) => {
					vm.username = to.query.name
					vm.getPublicKeyAuto()
				})
			}

		}
	})
</script>


<script setup>
	import PopupPassword from './password.vue'

	import {
		ref,
		reactive,
		onBeforeMount,
		getCurrentInstance,
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()



	import {
		onBeforeRouteUpdate
	} from 'vue-router'

	// const router = createRouter({

	// })

	// import axios from '@/axios'
	// import {
	// 	useRouter
	// } from 'vue-router'
	// const router = useRouter()


	import {
		useAppStore
	} from "@/stores/app"
	const app = useAppStore()

	import {
		useMenuStore
	} from "@/stores/menu"
	const menu = useMenuStore()

	const PopupPasswordRef = ref(null)

	const username = ref('')
	const password = ref('')
	const userDesc = ref('')
	const rememberChecked = ref(false)
	const disabledLogin = ref(true)


	const login = () => {
		if (username.value == undefined || username.value == null || username.value == '') {
			ElMessage.error('请输入用户名密码')
			return
		}

		if (password.value == undefined || password.value == null || password.value == '') {
			ElMessage.error('请输入用户名密码')
			return
		}



		const loading = ElLoading.service({
			lock: true,
			text: 'Loading',
			background: 'rgba(0, 0, 0, 0.7)',
		})
		// console.log('rememberChecked.value'+rememberChecked.value)
		if (rememberChecked.value) {
			localStorage.setItem('loginRemember', true)
			localStorage.setItem('loginRememberUsername', username.value)
			localStorage.setItem('loginRememberPassword', password.value)
		} else {
			localStorage.setItem('loginRemember', false)
			localStorage.setItem('loginRememberUsername', '')
			localStorage.setItem('loginRememberPassword', '')
		}
		var url = 'framework/SysLogin/login'
		var param = {
			username: username.value,
			password: password.value
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				if (response.data.data.type == 'success') {
					menu.setMenuLoaded(false)
					menu.setRouteLoaded(false)
					localStorage.setItem('userId', response.data.data.id)
					localStorage.setItem('userCode', response.data.data.userCode)
					localStorage.setItem('userName', response.data.data.userName)
					localStorage.setItem('userDesc', response.data.data.userDesc)
					localStorage.setItem('userType', response.data.data.userType)
					localStorage.setItem('token', response.data.data.token)
					localStorage.setItem('belongId', response.data.data.belongId)
					localStorage.setItem('applications', JSON.stringify(response.data.data.applications))
					if (response.data.data.applications.length == 1) {
						localStorage.setItem('application', JSON.stringify(response.data.data.applications[0]))
						proxy.$router.push({
							path: '/main'
						})
					} else {
						proxy.$router.push({
							path: '/application',
							query: {
								applications: JSON.stringify(response.data.data.applications)
							}
						})
					}
				} else {
					console.log('response.data.data--------' + JSON.stringify(response.data.data))
					localStorage.setItem('userId', response.data.data.userId)
					localStorage.setItem('token', response.data.data.token)
					localStorage.setItem('userName', username.value)
					PopupPasswordRef.value.open()
				}
			} else {
				ElMessage.error('登录失败！' + response.data.msg)
			}
			loading.close();
			disabledLogin.value = false
		});
	}


	const handleInputConfirm = () => {
		// this.username = this.username.toUpperCase()

		// var url = 'framework/SysLogin/getUserDesc'
		// var param = {
		// 	username: username.value
		// }
		// proxy.$axios.get(url, param).then(response => {
		// 	if (response.data.code == '0') {
		// 		if (response.data.data == '') {
		// 			userDesc.value = "无此用户"
		// 		} else {
		// 			userDesc.value = response.data.data
		// 		}
		// 	} else {
		// 		userDesc.value = "获取用户异常"
		// 	}

		// });
	}


	const getPublicKey = () => {
		console.log('getPublicKey')
		var url = 'framework/SysLogin/queryPublicKey'
		var param = {}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				localStorage.setItem('publicKey', response.data.data)
				// console.log('publicKey:' + response.data.data)
				disabledLogin.value = false
			} else {
				disabledLogin.value = true
			}
		});
	}


	const getPublicKeyAuto = () => {
		console.log('getPublicKey')
		var url = 'framework/SysLogin/queryPublicKey'
		var param = {}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				localStorage.setItem('publicKey', response.data.data)
				// console.log('publicKey:' + response.data.data)
				disabledLogin.value = false
				login()
			} else {
				disabledLogin.value = true
			}
		});
	}



	onBeforeMount(() => {
		console.log('onBeforeMount')
		// getPublicKey()
		var loginRemember = localStorage.getItem('loginRemember')
		var loginRememberUsername = localStorage.getItem('loginRememberUsername')
		var loginRememberPassword = localStorage.getItem('loginRememberPassword')
		if (loginRemember == 'true') {
			rememberChecked.value = true
			// this.username = loginRememberUsername
			// this.password = loginRememberPassword
		} else {
			rememberChecked.value = false
			// this.username = loginRememberUsername
			// this.password = loginRememberPassword
		}
	})

	//暴露给其他script
	defineExpose({
		getPublicKey,
		getPublicKeyAuto,
		username,
		password
	})
</script>

<style>
	.login-container {
		/* 		height: 100%;
		width: 100%;
		margin: 0px 0px 0px 0px;
		background-image: url('@/public/images/login.jpg') ;
		background-size: cover; */
		/* background-image: url('../../assets/login.jpg') no-repeat; */
		/* background: url(../../../assets/img/background2.png) no-repeat; */
		/* background-size: 100% 100%; */
		background-image: url('@/public/images/login.jpg');
		/* 背景图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个容器 */
		background-position: center;
		/* 背景图片居中 */
		height: 100vh;
		/* 容器高度设置为视口高度 */
		width: 100vw;
		/* 容器宽度设置为视口宽度 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-form {
		padding-top: 20px;
		text-align: center;
		background: #FFFFFF;
		/* margin: auto; */
		width: 450px;
		/* 30%; */
		height: 300px;
		/* 48%; */
		overflow: hidden;
		position: absolute;
		top: 32%;
		right: 15%;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		/* 		position: absolute;
 	padding-top: 22%;
 	padding-left: 40%; */
	}


	.modifypassword-form {
		padding-top: 20px;
		text-align: center;
		background: #FFFFFF;
		/* margin: auto; */
		width: 500px;
		/* 30%; */
		height: 300px;
		/* 48%; */
		overflow: hidden;
		position: absolute;
		top: 32%;
		right: 15%;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		/* 		position: absolute;
 	padding-top: 22%;
 	padding-left: 40%; */
	}

	.login-form-title {
		font-size: 20px;
		margin: 0 0 20px 0;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: center;
	}

	.login-form-item {
		/* margin-top: 15px; */
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: center;
	}

	.login-img {
		width: 70px;
		padding-left: 0;
		vertical-align: middle;
		display: inline-block;
		float: none;
	}
</style>