<template>
	<view class="login-container">
		
		<view class="login-box">
			<up-form :model="loginForm" ref="logFormRef">
				<up-form-item prop="username">
					<up-input v-model="loginForm.username" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入用户名">
						<template #prefix>
							<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image>
						</template>
					</up-input>
				</up-form-item>
				<up-form-item prop="password">
					<up-input v-model="loginForm.password" type="password" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入密码">
						<template #prefix>
							<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image>
						</template>
					</up-input>
				</up-form-item>
				<up-form-item prop="code">
					<view style="display: flex;">
						<up-input v-model="loginForm.code" placeholder="验证码" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="codeCustomStyle">
							<template #prefix>
								<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/code.png" mode="widthFix"></image>
							</template>
						</up-input>
						<view class="login-code">
							<image :src="codeUrl" class="login-code-img" mode="widthFix" @click="getCode"></image>
						</view>
					</view>
				</up-form-item>
			</up-form>
		</view>
		
		<view class="tip">
			未注册或绑定该车型平台的身份证号，将帮你注册新账号，点击登录即代表你同意<text style="color: #3680FE;" @click="goPrivacy">《隐私政策》</text>
		</view>
		<view class="log-btn" @click="submit">登录</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onReady } from '@dcloudio/uni-app'
import { getCodeImg } from '@/api/user.js'
import { encrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
// 登录参数
const loginForm = ref({
  username: "",
  password: "",
  code: "",
  uuid: ""
});
const codeUrl = ref('')
// 表单引用  
const logFormRef = ref(null)
// 校验规则
const rules = { 
	username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }],
	password: [{ required: true, message: '请输入身份证号', trigger: ['blur', 'change']}],
	code: [{ required: true, message: '请输入验证码', trigger: ['blur', 'change']}]
}
const customStyle = {
	height: '80rpx',
	backgroundColor: '#F9F9F9',
	paddingLeft: '40rpx'
}

const codeCustomStyle = {
	width: '63%',
	height: '80rpx',
	backgroundColor: '#F9F9F9',
	paddingLeft: '40rpx'
}
const placeholderStyle = {
	color: '#bbb',
	fontSize: '28rpx'
}
// 获取验证码
function getCode() {
  getCodeImg().then(res => {
   codeUrl.value = "data:image/gif;base64," + res.img;
   loginForm.value.uuid = res.uuid;
  });
}

// 微信小程序需要在此注册校验规则
onReady(() => {
	logFormRef.value.setRules(rules)
})

const goPrivacy = () => {
	uni.navigateTo({
		url: '/pages/privacy/privacy'
	})
}
// 提交登录
const submit = () => {
	logFormRef.value.validate().then(async valid => {
		if (valid) {
			// 调用action的登录方法
			userStore.userlogin(loginForm.value).then(async () => {
				const { data, roleGroup } = await userStore.getUser()
				if(data.identificationNumber !== null) {
					if(roleGroup === '公司员工'){
						uni.redirectTo({
							url: '/pages/companyHome/companyHome'
						})
					}else {
						uni.redirectTo({
							url: '/pages/societyHome/societyHome'
						})
					}
				}else {
					uni.redirectTo({
						url: '/pages/employeeRealName/employeeRealName'
					})
				}
			}).catch(() => {
				// 重新获取验证码
				getCode();
			});
		} else {
			uni.$u.toast('校验失败')
		}  
	}).catch(() => {
		// 处理验证错误  
		uni.$u.toast('校验失败')
	});  
}
getCode();
</script>

<style lang="scss" scoped>
.login-container{
	width: 100%;
	height: 100vh;
	background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-login_20240925112841A003.png') no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	.login-box{
		width: 690rpx;
		padding: 40rpx 44rpx;
		background-color: #fff;
		z-index: 10;
		margin: 442rpx auto 40rpx;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 40rpx;
		.employeeStatus{
			display: flex;
			align-items: center;
			gap: 40rpx;
			margin-top: 30rpx;
			.btn{
				flex: 1;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				border: 2rpx solid #BBBBBB;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				color: #999;
				&.active{
					background: #75A8FF;
					color: #fff;
				}
			}
		}
	}
	.tip{
		color: #666;
		font-size: 24rpx;
		line-height: 28rpx;
		padding: 0 40rpx;
		margin-bottom: 20rpx;
	}
	.log-btn{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #3680FE;
		font-size: 28rpx;
		margin: 0 auto;
		color: #fff;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 200rpx;
	}
}

.login-code {
  width: 33%;
  height: 80rpx;
  float: right;
  .login-code-img {
		width: 100%;
    cursor: pointer;
    vertical-align: middle;
		height: 80rpx;
		padding-left: 24rpx;
  }
}
</style>