<template>
 <div style="position: absolute;top: 38px;left: 36px;">
    <div style="display:flex;justify-content:center;align-items: center;">
      <img src="@/assets/loginleft.svg"/>
      <div style="height:28px;border:1px #C3C3C3 solid;margin-left:16px;margin-right:16px;"></div>
      <img src="@/assets/logincharacter.svg"/>
    </div>
 </div>
  <div class="gradient-text">科技领航 创新未来</div>
  <div style=" position: absolute;top: 256px;left: 300px;font-size: 18px">以科技为驱动力，以创新为引擎，打造数智化平台，助力政企高质量发展</div>
	<div class="login"> 
    <div class="login_box">
      <div style="font-size:30px;line-height: 30px">欢迎来到政企数智化运营平台</div>
      <div class="login_account_text">账号登录</div>
			<el-form :model="loginForm">
				<el-form-item>
					<el-input v-model="loginForm.loginName" placeholder="请输入用户名" />
				</el-form-item>
				<el-form-item>
					<el-input v-model="loginForm.loginPwd" type="password" placeholder="请输入密码" />
				</el-form-item>
        <el-form-item>
					<el-input v-model="loginForm.code" placeholder="请输入验证码"  style="width:305px;"/>
          <img style="height: 78px;" src="@/assets/code.png"/>
				</el-form-item>
        <div style="margin-bottom: 40px">
          <el-checkbox checked>记住密码</el-checkbox>
        </div>
				<div>
					<el-button type="primary" @click="goHome" class="login_btn">登录</el-button>
				</div>

			</el-form>
		</div>
	</div>
</template>
<script setup>
	import { useRouter } from 'vue-router'
	import { reactive, ref } from 'vue'
	// import { login, getInfo } from "@/api/login";
	import { ElMessage } from 'element-plus'

	const loginForm = reactive({
		loginName: 'admin',
		loginPwd: 'adminadmin',
    code: '',
	})
	const router = useRouter();
	const goHome = () => {
		router.push('/home')
		// login(loginForm).then(res => {
		// 	if(res.code == '0000') {
		// 		ElMessage({
		// 			message: '登录成功!',
		// 			type: 'success',
		// 		})
		// 		getInfo().then(res2 => {
		// 			localStorage.setItem('permissions', JSON.stringify(res2.result.permissions))
		// 			localStorage.setItem('usersData', JSON.stringify(res2.result.user))
		// 		})
		// 		localStorage.setItem('userInfo', JSON.stringify(loginForm))
		// 		router.push('/home')
		// 	}
		// })
	}
	//解析路由参数
	// 示例用法
	// const url = 'https://example.com/page?name=John&age=25&interests=programming&interests=music';
	// const parameters = getUrlParameters(url);
	// console.log(parameters);
	const getUrlParameters = url => {
		const params = {};
		const queryString = url.split('?')[1];
		if (queryString) {
			const paramPairs = queryString.split('&');
			for (let i = 0; i < paramPairs.length; i++) {
				const pair = paramPairs[i].split('=');
				const key = decodeURIComponent(pair[0]);
				const value = decodeURIComponent(pair[1] || '');
				if (params[key]) {
					if (Array.isArray(params[key])) {
						params[key].push(value);
					} else {
						params[key] = [params[key], value];
					}
				} else {
					params[key] = value;
				}
			}
		}
		return params;
	}
</script>
<style scoped>
	.login{
		display: flex;
		justify-content: right;
		align-items: center;
		height: 100vh;
		background-image: url(@/assets/login_bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
  
	.login_box{
    height: 630px;
    background-color: white;
    padding: 78px 45px 0px 45px;
    margin-right: 182px;
    margin-top: 167px;
    margin-bottom: 182px;
    border-radius: 10px	
	}
  .login_account_text{
    width: 88px;
    height: 31px;
    margin-top: 63px;
    margin-bottom: 30px;
    color: rgb(10, 119, 255);
    font-size: 22px;
    line-height: 30px
  }
  .login_box .el-input{
    width: 439px;
    height: 58px;
  }

  .login_box .el-form-item { 
    margin-bottom: 40px
    }
	.login_btn{
    width: 439px;
    height: 58px;
    font-size: 22px;
    border-radius: 10px
	}
  .gradient-text {
  background: linear-gradient(to right,#4788DC, #A164FA);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  font-size: 48px;
  position: absolute;
  top: 180px;
  left: 380px;
  

}
</style>
