<template>
	<view class="li-login-page">
		<view class=" li-flex li-flex-col li-justify-center li-items-center  li-pt-270">
			<image class="li-w-130 li-h-130 li-rd-40" src="/static/logo.png" mode=""></image>
			<text class="li-text-38 li-text-#000000 li-mt-32 li-font-550">物业综合管理平台</text>
		</view>
		<view class="li-w-80% li-mx-auto li-mt-100">
			<!-- 账号 -->
			<wd-input :maxlength="11" placeholder="请输入账号" type='number' v-model="form.phone" prefix-icon="user"
				placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
				no-border />
			<!-- 密码 -->
			<view class="li-mt-28">
				<wd-input :maxlength="11" placeholder="请输入密码" v-model="form.password" prefix-icon="lock-off"
					placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
					no-border show-password />
			</view>
			<!-- 验证码 -->
			<view class="li-flex li-items-center li-justify-between li-mt-28">
				<view class="li-w-420">
					<wd-input :maxlength="11" placeholder="请输入验证码" type='number' v-model="form.code"
						prefix-icon="secured" placeholderStyle="font-size:30rpx" :focus-when-clear="false"
						clear-trigger="focus" clearable no-border />
				</view>
				<view class="li-bg-white li-w-150 li-h-68">
					<image class="li-w-150 li-h-68" src="/static/code.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<!-- button -->
		<view class="li-w-85% li-mx-auto li-mt-90">
			<wd-button @click="login" block custom-class="custom-shadow">登录</wd-button>
		</view>
		<!--  -->
		<view
			class="li-flex li-items-center li-justify-center li-w-90% li-mx-auto li-text-#a5a5a5 li-text-24 li-mt-300">
			<wd-checkbox checked-color="#2EA1EA" v-model="check" @change="handleChange" />
			阅读并同意
			<text class="li-text-#2EA1EA li-mx-10">
				《用户协议》
			</text>
			和
			<text class="li-text-#2EA1EA li-mx-10">
				《隐私政策》
			</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'

	interface formItem {
		phone : string
		password : string
		code : string
	}
	const form = ref<formItem>({
		phone: '',
		password: '',
		code: ""
	})
	const check = ref<boolean>(true)

	const handleChange = ({ value }) => {
		console.log(value)
	}
	
	const login = ()=>{
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
</script>

<style lang="scss">
	.li-login-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				rgba(197, 224, 253, 0.7) 0%,
				rgba(197, 224, 253, 0.5) 20%,
				rgba(197, 224, 253, 0.1) 40%,
				rgba(242, 243, 247, 1.0) 70%,
				rgba(197, 224, 253, 0.4) 90%,
				rgba(197, 224, 253, 0.5) 100%);
		background-attachment: fixed;
	}

	::v-deep .wd-input__body {
		height: 85rpx;

	}

	::v-deep .wd-input__value {
		height: 85rpx;
	}

	::v-deep .wd-input {
		border-radius: 20rpx !important;

	}

	::v-deep .wd-input__icon {
		font-size: 42rpx !important;
		font-weight: 500 !important;
		color: #232323 !important;
		margin-right: 30rpx !important;
		margin-left: 30rpx !important;
	}

	::v-deep .wd-input__clear {
		margin-right: 20rpx !important;
	}

	::v-deep .wd-icon-eye-close {
		font-size: 28rpx !important;
	}

	.custom-shadow {
		height: 85rpx !important;
		font-size: 32rpx !important;
		box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
		background-color: #2EA1EA !important;
	}
</style>