<template>
	<div class="login">
		<div class="login-header">
			<img class="logo" src="../assets/logo.png" />

			<h2>{{ $t('login.title') }}</h2>
		</div>
		<div class="login-form">
			<van-field
				v-model="loginForm.tenantId"
				name=""
				label=""
				placeholder="请输入租户ID"
				:rules="[{ required: true, message: '请填写租户id' }]"
			/>
			<van-field
				v-model="loginForm.username"
				name=""
				label=""
				placeholder="请输入账号"
				:rules="[{ required: true, message: '请填写用户名' }]"
			/>
			<van-field
				v-model="loginForm.password"
				type="password"
				name=""
				label=""
				placeholder="请输入密码"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					
				</van-cell-group>
				<div style="margin: 16px">
					<van-button round block type="primary" native-type="submit">
						提交
					</van-button>
				</div>
			</van-form>
		</div>
		<div class="login-btn">
			<div class="check-warp">
				<div class="check-icon-warp">
					<van-checkbox icon-size="16px" v-model="loginForm.rememberMe"></van-checkbox>
				</div>
				{{ $t('login.agreement.text') }}
				<span>{{ $t('login.agreement.clause') }}</span>
				{{ $t('login.agreement.and') }}
				<span>{{ $t('login.agreement.agreement') }}</span>
			</div>
			<!-- <button type="default" @click="lodingFn">
				{{ $t('login.loginText') }}
			</button>
			<p @click="toDemo" class="demo">{{ $t('login.demo') }}</p> -->
			<!-- <p @click="change11">切换 {{system_info}}</p> -->
		</div>
	</div>
</template>
<style lang="scss" scoped>
.login {
	height: 100vh;
	width: 100vw;
	background-size: 100% 100%;
	background: #fff;
	.check-warp{
		display: flex;
		align-items: center;
		justify-content: center;
		.check-icon-warp{
			margin-right: 5px;
		}
		span{
			color: #3370FF;
			margin: 0 4px;
		}
	}
	.login-form{
		padding:5px 20px;
	}
	.login-btn{
		font-size: 12px;
	}
	.van-cell{
		border: 5px;
		background: #f1f1f1;
		margin-bottom:12px;
		height: 50px;
		box-sizing: border-box;
		line-height: 44px;
		padding: 3px 12px;
		font-size: 16px;
	}
	.login-header{
		background: url(../assets/images/login-header.png) no-repeat;
		height:200px;
		background-size: cover;
		padding: 44px 20px 17px;
		box-sizing: border-box;
		.logo{
			height: 45px;
		}
		h2{
			margin-top: 40px;
		}
	}
}
</style>
<script setup>
import 'vant/lib/index.css';
import { ref,getCurrentInstance } from 'vue';
import { setUserInfo,setToken, getUserInfo } from '@/utils/auth';

import axios from 'axios'
const proxy = getCurrentInstance().proxy;

console.log(proxy.post)
const loginForm = ref({
	username: 'admin',
	password: 'admin123',
	rememberMe: false,
	tenantId:'000000',
	code: '',
	uuid: '',
})

const radioChange = () => {
	console.log(loginForm.rememberMe)
	// loginForm.value.rememberMe = loginForm.value.rememberMe ? false : false;
};

const onSubmit = () => {
	
	proxy.post('login', loginForm.value,'post',{tenantId:loginForm.value.tenantId}).then((res) => {
		console.log(res)
		if(res.code == 200) {
			setToken(res.token)
			getInfo()
		}
	})
};

const getInfo = () => {
	proxy.post('getInfo', {},'get').then((res) => {
		console.log(res)
		if(res.code == 200) {
			setUserInfo(res.user)
			proxy.$router.push('/main')
		}
	})
};

</script>
