<template>
	<view class="login_card">
		<uv-navbar title="" :placeholder="true" :titleStyle="{color:'#ffffff'}" bgColor="#1d345e"
			leftIcon=""></uv-navbar>
		<image class="logo_first" :src="'/static/IBMS.png'" mode="widthFix" />
		<view class="logo_title">IBMS楼宇集成系统</view>
		<view class="login_building">
			<view class="box_input">
				<uv-input class="uni-input" v-model="accountNumber" placeholder="输入账号" border="none"
					placeholder-class="input_placeholder" prefixIcon="account" color="#ffffff"
					prefixIconStyle="font-size: 46rpx;color: #01ffff"></uv-input>
			</view>
			<view class="box_input">
				<uv-input class="uni-input" v-model="password" placeholder="输入密码" border="none"
					placeholder-class="input_placeholder" prefixIcon="lock" color="#ffffff" password
					prefixIconStyle="font-size: 46rpx;color: #01ffff"></uv-input>
			</view>
		</view>
		<view class="loginBtn_box" @click="login">登录</view>
		<view class="bottom_check_box">
			<view class="login_check">
				<view style="display: flex;align-items: center;">
					<uv-checkbox-group v-model="readFlag">
						<uv-checkbox name="readFlag" shape="circle" activeColor="#00fff0"></uv-checkbox>
					</uv-checkbox-group>
				</view>
				我已阅读并同意<span class="login_check_text">《服务协议》</span>以及<span class="login_check_text">《隐私政策》</span>
			</view>
		</view>
		<uv-modal ref="modal" align="center" content='尊敬的用户，您需要详细阅读并勾选下方的《服务协议》和《隐私政策》才可以进入哦。'></uv-modal>
	</view>
</template>

<script setup lang="ts">
	import { setLocalStorage } from "@/utils/cache";
	import { GetLogin } from "@/api/login";
	import { onLaunch, onShow, onHide, onReady } from "@dcloudio/uni-app";
	import { ref } from 'vue'
	const title = ref('Hello')
	const accountNumber = ref('')
	const password = ref('')
	const readFlag = ref([])
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
		const token = uni.getStorageSync('ibms-token')
		if (token) {
			uni.reLaunch({
				url: '/pages/firstPage/index'
			});
		}
	})
	const modal : any = ref(null)
	function login() {
		if (readFlag.value.length > 0) {
			uni.showLoading({
				title: '',
				mask: true,
			});
			GetLogin({
				username: accountNumber.value,
				password: password.value,
			}).then((res : any) => {
				if (res.code == 200) {
					setLocalStorage("token", res.token);
					uni.reLaunch({
						url: '/pages/firstPage/index'
					});
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
				}
				uni.hideLoading();
			})
		} else {
			modal.value.open();
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .login_check .uv-checkbox-group--row {
		flex-wrap: unset;
	}

	.login_card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo_first {
		margin-top: 10%;
		width: 160rpx;
		height: 160rpx;
	}

	.logo_title {
		font-weight: bold;
		margin-top: 20rpx;
		font-size: 32rpx;
		color: rgb(1, 255, 255);
	}

	.login_building {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin: 60rpx 0rpx;
	}

	.box_input {
		width: calc(80% - 40rpx);
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0rpx;
		padding: 0rpx 20rpx;
		background-image: url('/static/inputbox.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	::v-deep .input_placeholder {
		color: #077a87 !important;
	}

	.uni-input {
		width: 100%;
		height: 100%;
	}

	.loginBtn_box {
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 100rpx;
		line-height: 120rpx;
		font-size: 36rpx;
		text-indent: 40rpx;
		letter-spacing: 40rpx;
		font-weight: bold;
		color: #00fff0;
		background-image: url('/static/loginBtn.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.bottom_check_box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login_check {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: baseline;
		position: absolute;
		bottom: 10%;
		font-size: 26rpx;
		line-height: 50rpx;
		color: #ffffff;
	}

	.login_check_text {
		color: #00fff0;
	}
</style>