<template>
	<div class="login-wrap" v-loading="loading">
		<template>
			<p class="ms_notes">
				Thank you for using ORCID ID to login our website, please continue to login or register TMR Publshing Group account
				to connect with your ORCID ID.
			</p>
			<!--  <p class="ms_noter">
			  如果你拥有账户但没有绑定相应的ORCID，请点击绑定操作，<br/>
			  如果你没有账户，请点击注册进行相应操作
			</p> -->
			<el-tabs v-model="activeName" class="ms_tab_n">
				<el-tab-pane label="Login" name="first">
					<div class="ms_link">
						<div class="ms-title">User Login</div>
						<el-form class="ms-content" :rules="registerRules" ref="loginForm" :model="loginForm" label-width="0">
							<!-- 用户名 -->
							<el-form-item prop="username">
								<el-input size="small" v-model="loginForm.username" auto-complete="off" placeholder="username">
									<i slot="prefix" class="el-icon-user"></i>
								</el-input>
							</el-form-item>
							<!-- 密码 -->
							<el-form-item prop="password">
								<el-input size="small" v-model="loginForm.password" auto-complete="off" placeholder="password" show-password>
									<i slot="prefix" class="el-icon-lock"></i>
								</el-input>
							</el-form-item>
							<!-- 按钮 -->
							<el-row justify="center">
								<el-form-item>
									<el-button type="primary" @click.native.prevent="orcidBind" class="register-submit" style="width: 100%">bind</el-button>
								</el-form-item>
							</el-row>
						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="Register" name="second">
					<div class="ms_login">
						<div class="ms-title">User Register</div>
						<el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
							<!-- 用户名 -->
							<el-form-item prop="username">
								<el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
									<i slot="prefix" class="el-icon-user"></i>
								</el-input>
							</el-form-item>
							<!-- 密码 -->
							<el-form-item prop="password">
								<el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
									<i slot="prefix" class="el-icon-lock"></i>
								</el-input>
							</el-form-item>
							<!-- 确认密码 -->
							<el-form-item prop="passwordd">
								<el-input size="small" v-model="registerForm.passwordd" auto-complete="off" placeholder="password"
								 show-password>
									<i slot="prefix" class="el-icon-lock"></i>
								</el-input>
							</el-form-item>
							<!-- 姓名 -->
							<el-form-item prop="name">
								<el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname">
									<i slot="prefix" class="el-icon-edit-outline"></i>
								</el-input>
							</el-form-item>
							<!-- 手机 -->
							<el-form-item prop="phone">
								<el-input size="small" v-model="registerForm.phone" auto-complete="off" placeholder="phone">
									<i slot="prefix" class="el-icon-mobile-phone" />
								</el-input>
							</el-form-item>
							<!-- 邮件 -->
							<el-form-item prop="email">
								<el-input size="small" v-model="registerForm.email" auto-complete="off" placeholder="email">
									<i slot="prefix" class="el-icon-message"></i>
								</el-input>
							</el-form-item>
							<!-- 按钮 -->
							<el-row justify="center">
								<el-form-item>
									<el-button type="primary" @click.native.prevent="orcidRegister" class="register-submit" style="width: 100%">bind</el-button>
								</el-form-item>
							</el-row>
						</el-form>
					</div>
				</el-tab-pane>
			</el-tabs>
		</template>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				account: localStorage.getItem('U_name'),
				code: this.$route.query.code,
				// loading: true,
				has_user: true,
				loginForm: {},
				registerForm: {},
				activeName: 'first',
				registerRules: {
					username: [{
						required: true,
						message: 'Please enter your username.',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: 'Please enter your password.',
						trigger: 'blur'
					}],
					passwordd: [{
						required: true,
						message: 'Please enter your password.',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: 'Please enter your real name.',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: 'Please enter the correct mobile phone number.',
						trigger: 'blur'
					}],
					email: [{
							required: true,
							message: 'Please enter your email address.',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: 'Email address format error（example@gmail.com）.',
							trigger: 'blur'
						}
					]
				}
			};
		},
		created: function() {
			this.initLinkOrcid();
		},
		methods: {
			initLinkOrcid() {
				this.$api
					.post('api/User/OrcidLogin', {
						code: this.code
					})
					.then((res) => {
						if (res.data.user == null) {
							this.loginForm.orcid = res.data.orcid;
							this.registerForm.orcid = res.data.orcid;
							this.loading = false;
						} else {
							this.$message.success('Login success');
							
							if (res.data.user.account == 'superadmin' || res.data.user.account == 'wuxiongzhi2') {
								localStorage.setItem('U_status', '0'); //超级管理员
								localStorage.setItem('U_role', 'superadmin');
								localStorage.setItem('U_name', res.userinfo.account);
								localStorage.setItem('U_id', res.userinfo.user_id);
								this.$router.push('/');
							} else if (res.data.roles.includes('editor')) {
								localStorage.setItem('U_status', '1'); //编辑
								localStorage.setItem('U_role', res.data.roles);
								localStorage.setItem('U_name', res.data.userinfo.account);
								localStorage.setItem('U_id', res.data.userinfo.user_id);
								this.$router.push('/');
							} else {
								localStorage.setItem('U_status', '2'); //其余的身份
								localStorage.setItem('U_role', res.data.roles);
								localStorage.setItem('U_name', res.data.userinfo.account);
								localStorage.setItem('U_id', res.data.userinfo.user_id);
								localStorage.setItem('U_relname', res.data.userinfo.realname);
								this.$router.push('/');
								// this.roleVisible = true;
								// this.user_cap = res.data.roles;
							}
							
							
							
							this.$router.push('/');
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//绑定操作提交
			orcidBind() {
				this.$api
					.post('api/User/orcidBind', this.loginForm)
					.then((res) => {
						if (res.data.code == 1) {
							this.$message.error(res.data.msg);
						} else {
							this.$message.success('Binding success');
							localStorage.setItem('U_name', res.data.user.account);
							if (res.data.user.type == 1 && res.data.user.is_reviewer) {
								localStorage.setItem('ms_userrole', 'reviewer');
							} else {
								localStorage.setItem('ms_userrole', res.data.user.type);
							}
							this.$router.push('/');
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//注册提交
			orcidRegister() {
				this.$api
					.post('api/User/orcidRegister', this.registerForm)
					.then((res) => {
						this.$message.success('Register success');
						localStorage.setItem('U_name', res.data.user.account);
						if (res.data.user.type == 1 && res.data.user.is_reviewer) {
							localStorage.setItem('ms_userrole', 'reviewer');
						} else {
							localStorage.setItem('ms_userrole', res.data.user.type);
						}
						this.$router.push('/');
					})
					.catch((err) => {
						console.log(err);
					});
			}
		}
	};
</script>

<style>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/login-bg.jpg);
		background-size: 100%;
		padding-top: 80px;
	}

	.ms_login,
	.ms_link {
		width: 400px;
		margin: 0 auto;
	}

	.ms_login .ms-title,
	.ms_link .ms-title {
		text-align: center;
		font-size: 18px;
		margin: 20px 0;
		color: #fff;
	}

	.ms_notes {
		width: 400px;
		margin: 0 auto 60px auto;
		padding: 20px 50px;
		line-height: 24px;
		background: rgba(255, 255, 255, 0.5);
		color: #fe7300;
		border-radius: 5px;
	}

	/* .ms_link {}

	.ms_link .ms-title {} */

	.ms_tab_n {
		width: 500px;
		margin: 0 auto;
		border-radius: 5px;
		padding-bottom: 30px;
		background: rgba(255, 255, 255, 0.3);
	}

	.ms_tab_n .el-tabs__nav {
		margin-left: 142px;
		height: 60px;
		padding-top: 25px;
	}

	.ms_tab_n .el-tabs__item {
		font-size: 22px;
		padding: 0 40px;
		color: #fff;
	}

	.ms_tab_n .el-tabs__active-bar {
		left: -28px;
		width: 120px !important;
	}
</style>
