<template>
	<div class="login-box">
		<div class="login-content">
			<h2 class="title">菊城人才市场招聘后台管理系统</h2>
			<div class="sub-title">欢迎使用</div>
			<a-form>
				<a-row>
					<a-col :span="24"><a-form-item>
							<a-input placeholder="账号"  v-model:value="createForm.mobile">
								<template #prefix>
									<user-outlined type="user" />
								</template>
							</a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-form-item>
							<a-input type="password" placeholder="密码"  v-model:value="createForm.password">
								<template #prefix>
									<LockOutlined />
								</template>
								<template #suffix>
									<a-tooltip title="Extra information">
										<EyeInvisibleOutlined style="color: rgba(0, 0, 0, 0.25)" />
									</a-tooltip>
								</template>
							</a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="10">
					<a-col :span="16">
						<a-form-item>
							<a-input type="password" placeholder="验证码">
								<template #prefix>
									<LockOutlined />
								</template>
								<template #suffix>
									<a-tooltip title="Extra information">
										<EyeInvisibleOutlined style="color: rgba(0, 0, 0, 0.25)" />
									</a-tooltip>
								</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-button style="width: 100%;">验证码</a-button>
					</a-col>
				</a-row>
				<a-row type="flex" justify="end">
					<a-col :span="6">
						<a-form-item>
							<div>忘记密码？</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24">
						<a-button @click="toLogin" style="width: 100%;" type="primary">登录</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { Login } from '@/apis/models';
	import { useAsRouter } from '@/hooks/useAsRouter'
	import { UserOutlined, InfoCircleOutlined, LockOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { message } = useCommon();
	const { routerTo } = useAsRouter();
	
	const createForm = ref<Object>({
		mobile: '',
		password: ''
	})
	const toLogin = () => {
		if (!createForm.value.mobile) {
			message.warning('请输入登录账号');
			return false;
		}
		if (!createForm.value.password) {
			message.warning('请输入密码');
			return false;
		} 
		Login(createForm.value).then(res => {
			sessionStorage.setItem('token', res.data.jwttoken.accesstoken);
			routerTo('/home');
			createForm.value = {
				mobile: '',
				password: ''
			}
		})
		// sessionStorage.setItem('token', '1321');
		// routerTo('/home');
	}
</script>

<style lang="less">
	@import 'login.less';
</style>