<template>
	<image src="../../static/loginTopBar.png" mode="scaleToFill" class="topBar"></image>
	
	<view class="login">
		<view class="logo-text">
			<image src="../../static/systemLogo.svg" ></image>
			<text class="zh">天津市住房和城乡建设委员会</text>
			<text class="en">Tianjin Municipa lHousing and Urban Rural Construction Commission</text>
		</view>
		<view class="operation">
			<uni-easyinput prefixIcon="person-filled" v-model="username" placeholder="请输入登录账号" ></uni-easyinput>
			<uni-easyinput prefixIcon="locked-filled" v-model="password" placeholder="请输入登录密码" type="password"></uni-easyinput>
			<button type="primary" :loading="loading" :disabled="loading" @click="handleLogin">登录</button>
		</view>
	</view>
	
	<u-top-tips ref="uTips" navbar-height="0"></u-top-tips>
</template>

<script setup>
	import {ref} from "vue";
	import {ApiRequest} from "@/utils/request.js"

	const uTips = ref()
	const username = ref('')
	const password = ref('')
	const loading = ref(false)


	function handleLogin(){
		if(!username.value){
			uTips.value.show({
				title: '请输入登录账号',
				type: 'error',
				duration: '2300'
			})
		}else if(!password.value){
			uTips.value.show({
				title: '请输入登录密码',
				type: 'error',
				duration: '2300'
			})
		}else{
			// ApiRequest({
			// 	url: "/connect/token",
			// 	method: "POST",
			// 	data: {
			// 		client_id: "androidclient",
			// 		grant_type: "password",
			// 		scope: "openid profile email RefineAPI",
			// 		username: username.value,
			// 		password: password.value
			// 	}
			// }).then(res=>{
			// 	uni.setStorageSync('GlWorkPlatform-AccessToken','')
			// })
			
			uni.setStorageSync('token','666')
			loading.value = true
			uni.showToast({
				title: "登录中...",
				icon: "loading",
				mask: true
			})
			uni.switchTab({url: "/pages/handleFile/handleFile"})
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #efefef;
	}
	.topBar{
		width: 100vw;
		height: 400rpx;
	}
	.login{
		color: #005492;
		background-color: #fff;
		width: 60vw;
		height: 60vh;
		border-radius: 50rpx;
		position: absolute;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		inset: 0;
		top: 10rem;
		.logo-text{
			width: 80vw;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 2vh;
			image{
				width: 250rpx;
				height: 250rpx;
				margin-bottom: 2vh;
			}
			.zh{
				font-size: 80rpx;
				font-weight: 600;
			}
		}
		.operation{
			width: 40vw;
			uni-view{
				margin-bottom: 2vh;
			}
		}
	}
</style>