<template xmlns="">
	<div class="container">
		<div class="logo"></div>
		<!-- 登录区域 -->
		<div class="content">
			<!-- 配图 -->
			<div class="pic">
				<div
					class="welcome"
					style="
						position: absolute;
						top: 15%;
						left: 20%;
						user-select: none;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
					">
					<strong
						style="
							letter-spacing: 1px;
							font-family: Arial, Helvetica, sans-serif;
							font-weight: 500;
							font-size: 88px;
						">
						<span style="color: #26b9de">Wel</span>
						<span style="color: #fff">come</span>
					</strong>
					<p
						style="
							margin: 0;
							font-size: 26px;
							letter-spacing: 1px;
							color: #26b9de;
							opacity: 75%;
						">
						<span
							style="
								display: inline-block;
								height: 20px;
								width: 20px;
								margin-left: 8px;
								margin-right: 12px;
								border-radius: 100%;
								background: #26b9de;
							"></span>
						向世界先进水平挑战，为人类社会文明做贡献
					</p>
				</div>
				<video
					src="/static/videos/login.webm"
					muted
					autoplay
					loop
					style="
						user-select: none;
						position: absolute;
						top: 28%;
						width: 100%;
						height: 70%;
					"></video>
			</div>
			<!-- 表单 -->
			<div class="field">
				<!-- [移动端]标题 -->
				<h2 class="mobile-title">
					<h3 class="title">许昌安彩新能科技有限公司</h3>
				</h2>
				<h2 class="pc-title" style="">
					<h3 class="title" style="display: flex; flex-direction: column; align-items: center;">
						<img
							src="../assets/logo/xcac.png"
							alt="cnbm_logo"
							style=""
							class="cnbm_logo" />
						<span>许昌安彩新能科技有限公司</span>
					</h3>
					<!-- <h3 class="sub-title" style="">向世界先进水平挑战，为人类社会文明做贡献</h3> -->
				</h2>

				<!-- 表单 -->
				<div class="form-cont">
					<div style="">
						<el-form
							ref="loginForm"
							:model="loginForm"
							:rules="LoginRules"
							class="login-form">
							<el-form-item prop="tenantName" v-if="tenantEnable">
								<el-input
									v-model="loginForm.tenantName"
									type="text"
									auto-complete="off"
									placeholder="租户">
									<!-- <svg-icon
										slot="prefix"
										icon-class="tree"
										class="el-input__icon input-icon" /> -->
								</el-input>
							</el-form-item>
							<!-- 账号密码登录 -->
							<div>
								<el-form-item prop="username">
									<el-input
										v-model="loginForm.username"
										type="text"
										auto-complete="off"
										placeholder="账号">
										<!-- <svg-icon
											slot="prefix"
											icon-class="user"
											class="el-input__icon input-icon" /> -->
									</el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input
										v-model="loginForm.password"
										type="password"
										auto-complete="off"
										placeholder="密码"
										@keyup.enter.native="getCode">
										<!-- <svg-icon
											slot="prefix"
											icon-class="password"
											class="el-input__icon input-icon" /> -->
									</el-input>
								</el-form-item>
								<el-checkbox
									v-model="loginForm.rememberMe"
									style="margin: 0 0 25px 0">
									记住密码
								</el-checkbox>
							</div>

							<!-- 下方的登录按钮 -->
							<el-form-item
								id="button-form-item"
								style="width: 100%; margin-top: 32px">
								<el-button
									:loading="loading"
									size="medium"
									type="primary"
									style="
										width: 100%;
										height: calc(52 * 0.12vh);
										font-size: calc(14 * 0.12vh);
									"
									@click.native.prevent="getCode">
									<span v-if="!loading">登 录</span>
									<span v-else>登 录 中...</span>
								</el-button>
							</el-form-item>

							<!--  社交登录 -->
							<!-- <el-form-item style="width:100%;">
                  <div class="oauth-login" style="display:flex">
                    <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
                      <img :src="item.img" height="25px" width="25px" alt="登录" >
                      <span>{{item.title}}</span>
                    </div>
                </div>
              </el-form-item> -->
						</el-form>
					</div>
				</div>

				<!-- footer -->
				<div class="footer">
					Copyright © 2023 许昌安彩新能科技有限公司 All Rights Reserved.
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { sendSmsCode, socialAuthRedirect } from '@/api/login';
import { getTenantIdByName } from '@/api/system/tenant';
import { SystemUserSocialTypeEnum } from '@/utils/constants';
import { getTenantEnable } from '@/utils/ruoyi';
import {
	getPassword,
	getRememberMe,
	getTenantName,
	getUsername,
	removePassword,
	removeRememberMe,
	removeTenantName,
	removeUsername,
	setPassword,
	setRememberMe,
	setTenantId,
	setTenantName,
	setUsername,
} from '@/utils/auth';

import Verify from '@/components/Verifition/Verify';
import { resetUserPwd } from '@/api/system/user';

export default {
	name: 'Login',
	components: {
		Verify,
	},
	data() {
		return {
			codeUrl: '',
			captchaEnable: false,
			tenantEnable: true,
			mobileCodeTimer: 0,
			loginForm: {
				loginType: 'uname',
				username: 'admin',
				password: 'admin123',
				captchaVerification: '',
				mobile: '',
				mobileCode: '',
				rememberMe: false,
				tenantName: '技术中心',
			},
			scene: 21,

			LoginRules: {
				username: [
					{ required: true, trigger: 'blur', message: '用户名不能为空' },
				],
				password: [
					{ required: true, trigger: 'blur', message: '密码不能为空' },
				],
				mobile: [
					{ required: true, trigger: 'blur', message: '手机号不能为空' },
					{
						validator: function (rule, value, callback) {
							if (
								/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
									value
								) === false
							) {
								callback(new Error('手机号格式错误'));
							} else {
								callback();
							}
						},
						trigger: 'blur',
					},
				],
				tenantName: [
					{ required: true, trigger: 'blur', message: '租户不能为空' },
					{
						validator: (rule, value, callback) => {
							// debugger
							getTenantIdByName(value).then((res) => {
								const tenantId = res.data;
								if (tenantId && tenantId >= 0) {
									// 设置租户
									setTenantId(tenantId);
									callback();
								} else {
									callback('租户不存在');
								}
							});
						},
						trigger: 'blur',
					},
				],
			},
			loading: false,
			redirect: undefined,
			// 枚举
			SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
		};
	},
	created() {
		// document.body.style['min-height'] = '1024px';
		// 租户开关
		this.tenantEnable = getTenantEnable();
		if (this.tenantEnable) {
			getTenantIdByName(this.loginForm.tenantName).then((res) => {
				// 设置租户
				const tenantId = res.data;
				if (tenantId && tenantId >= 0) {
					setTenantId(tenantId);
				}
			});
		}
		// 重定向地址
		this.redirect = this.$route.query.redirect
			? decodeURIComponent(this.$route.query.redirect)
			: undefined;
		this.getCookie();
	},
	destroyed() {
		document.body.style['min-height'] = 'unset';
	},
	methods: {
		getCode() {
			this.handleLogin({});
		},
		getCookie() {
			const username = getUsername();
			const password = getPassword();
			const rememberMe = getRememberMe();
			const tenantName = getTenantName();
			this.loginForm = {
				...this.loginForm,
				username: username ? username : this.loginForm.username,
				password: password ? password : this.loginForm.password,
				rememberMe: rememberMe ? getRememberMe() : false,
				tenantName: tenantName ? tenantName : this.loginForm.tenantName,
			};
		},
		handleLogin(captchaParams) {
			this.$refs.loginForm.validate((valid) => {
				if (valid) {
					this.loading = true;
					// 设置 Cookie
					if (this.loginForm.rememberMe) {
						setUsername(this.loginForm.username);
						setPassword(this.loginForm.password);
						setRememberMe(this.loginForm.rememberMe);
						setTenantName(this.loginForm.tenantName);
					} else {
						removeUsername();
						removePassword();
						removeRememberMe();
						removeTenantName();
					}
					this.loginForm.captchaVerification =
						captchaParams.captchaVerification;
					// 发起登陆
					// console.log("发起登录", this.loginForm);
					this.$store
						.dispatch(
							this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login',
							this.loginForm
						)
						.then(() => {
							this.$router.push({ path: this.redirect || '/' }).catch(() => {});
						})
						.catch(() => {
							this.loading = false;
						});
				}
			});
		},
		async doSocialLogin(socialTypeEnum) {
			// 设置登录中
			this.loading = true;
			let tenant = false;
			if (this.tenantEnable) {
				await this.$prompt('请输入租户名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				})
					.then(async ({ value }) => {
						await getTenantIdByName(value).then((res) => {
							const tenantId = res.data;
							tenant = true;
							if (tenantId && tenantId >= 0) {
								setTenantId(tenantId);
							}
						});
					})
					.catch(() => {
						// 取消登录按钮 loading状态
						this.loading = false;

						return false;
					});
			} else {
				tenant = true;
			}
			if (tenant) {
				// 计算 redirectUri
				const redirectUri =
					location.origin +
					'/social-login?' +
					encodeURIComponent(
						'type=' +
							socialTypeEnum.type +
							'&redirect=' +
							(this.redirect || '/')
					); // 重定向不能丢
				// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
				// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
				// 进行跳转
				socialAuthRedirect(
					socialTypeEnum.type,
					encodeURIComponent(redirectUri)
				).then((res) => {
					// console.log(res.url);
					window.location.href = res.data;
				});
			}
		},
		/** ========== 以下为升级短信登录 ========== */
		getSmsCode() {
			if (this.mobileCodeTimer > 0) return;
			this.$refs.loginForm.validate((valid) => {
				if (!valid) return;
				sendSmsCode(
					this.loginForm.mobile,
					this.scene,
					this.loginForm.uuid,
					this.loginForm.code
				).then((res) => {
					this.$modal.msgSuccess('获取验证码成功');
					this.mobileCodeTimer = 60;
					let msgTimer = setInterval(() => {
						this.mobileCodeTimer = this.mobileCodeTimer - 1;
						if (this.mobileCodeTimer <= 0) {
							clearInterval(msgTimer);
						}
					}, 1000);
				});
			});
		},
	},
};
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/login.scss';

.oauth-login {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.oauth-login-item {
	display: flex;
	align-items: center;
	margin-right: 10px;
}

.oauth-login-item img {
	height: 25px;
	width: 25px;
}

.oauth-login-item span:hover {
	text-decoration: underline red;
	color: red;
}

.sms-login-mobile-code-prefix {
	:deep(.el-input__prefix) {
		top: 22%;
	}
}
.form-cont {
	padding-top: 40px;
}
</style>