<template>
	<div class="login">
		<div class="login-inner">
			<!--      <div class="login-logo">FEMS</div>-->
			<div class="login-logo">
				<img v-if="isDarkMode" src="@/assets/images/logo_dm.png" />
				<img v-else src="@/assets/images/logo_lm.png" />
			</div>
			<div class="login-img">
				<v-avatar size="100" :color="isDarkMode ? '#1d2132' : '#fff'">
					<v-icon size="60" :color="isDarkMode ? '#fff' : '#3f4d7d'"
						>mdi-account</v-icon
					>
				</v-avatar>
				<!-- <img v-if="isDarkMode" src="@/assets/images/login_dm.png" />
        <img v-else src="@/assets/images/login_lm.png" /> -->
			</div>
			<div>
				<AlertPopup ref="alertPop" v-show="false" :item="alertItem" />
				<div ref="form">
					<div class="login-form">
						<v-text-field
							v-model.trim="userId"
							ref="userId"
							type="text"
							@keypress.enter="focusPw()"
							class="v-input__custom"
							placeholder="아이디"
							:hide-details="true"
							height="44"
						></v-text-field>
					</div>
					<div class="login-form">
						<v-text-field
							v-model.trim="userPw"
							ref="userPw"
							type="password"
							@keypress.enter="mberCheck()"
							class="v-input__custom"
							placeholder="비밀번호"
							:hide-details="true"
							height="44"
						></v-text-field>
					</div>
					<template v-if="this.comIdHidden">
						<div class="login-form">
							<v-text-field
								v-model.trim="userComId"
								ref="userComId"
								type="text"
								@keypress.enter="mberCheck()"
								class="v-input__custom"
								placeholder="회사코드"
								:hide-details="true"
								height="44"
							></v-text-field>
						</div>
					</template>
					<v-btn type="button" :ripple="false" @click="mberCheck" large block>
						로그인
					</v-btn>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import $cookie from 'vue-cookie';
import AlertPopup from '~/components/common/modal/AlertPopup';
export default {
	layout: 'landing',
	components: {
		AlertPopup,
	},
	data: () => ({
		valid: true,
		userId: '',
		userPw: '',
		userComId: '',
		alertItem: {},
		comIdHidden: true,
	}),
	computed: {
		...mapState(['indexRoot', 'isDarkMode', 'myHome']),
	},

	mounted() {
		const routerComIdPath = this.$router.currentRoute.fullPath;
		const routerComIdQuery = this.$router.currentRoute.query;

		if (routerComIdPath != '/login') {
			let key = Object.keys(routerComIdQuery);
			this.userComId = decodeURI(key[0]);
			this.comIdHidden = false;
		}

		this.focusId();
	},

	methods: {
		...mapMutations({
			setUserInfo: 'setUserInfo',
		}),
		focusId() {
			this.$refs.userId.focus();
		},
		focusPw() {
			this.$refs.userPw.focus();
		},
		focusComId() {
			this.$refs.userComId.focus();
		},
		async mberCheck() {
			// if (this.userId == '') {
			// 	// alert("사용자 아이디는 필수항목입니다.");
			// 	this.alertItem = {
			// 		label: '경고',
			// 		message: '사용자 아이디를 입력해주세요',
			// 	};
			// 	this.$refs['alertPop'].dialog = true;
			// 	this.focusId();
			// 	return;
			// }

			// if (this.userPw == '') {
			// 	// alert("비밀번호는 필수항목입니다.");
			// 	this.alertItem = {
			// 		label: '경고',
			// 		message: '비밀번호를 입력해주세요',
			// 	};
			// 	this.$refs['alertPop'].dialog = true;
			// 	this.focusPw();
			// 	return;
			// }

			// if (this.userComId == '') {
			// 	// alert("회사코드는 필수항목입니다.");
			// 	this.alertItem = {
			// 		label: '경고',
			// 		message: '회사코드를 입력해주세요',
			// 	};
			// 	this.$refs['alertPop'].dialog = true;
			// 	this.focusComId();
			// 	return;
			// }
			await this.loginChk();
		},
		// async loginChk() {
		// 	const DOMAIN = '';
		// 	const apiUrl = 'loginChk';
		// 	const params = {
		// 		local: 'ko',
		// 		comId: this.userComId, // 요청 comId는 클라우드 서비스시는 입력 값으로 처리 되어야 할수 있음.
		// 		userId: this.userId,
		// 		userPswd: this.userPw,
		// 	};
		// 	const res = await this.$axios.post(DOMAIN + apiUrl, { params: params });
		// 		const femsSessionCookie = 3434;
		// 		const FEMS_SESSION = femsSessionCookie;
		// 		$cookie.set('FEMS_SESSION', FEMS_SESSION);
		// 		this.setUserInfo(res.data.dataset.userInfo);
		// 		// alert("임시로 로그인 처리 되었습니다. dashboard 페이지로 이동합니다.");
		// 		// console.log('res.data.dataset.userInfo: ', res.data.dataset.userInfo);
		// 		// return;
		// 		this.$router.push({ path: this.myHome.root });
			
		// },
		async loginChk() {
			const DOMAIN = '';
			const apiUrl = 'loginChk';
			const params = {
				local: 'ko',
				comId: this.userComId, // 요청 comId는 클라우드 서비스시는 입력 값으로 처리 되어야 할수 있음.
				userId: this.userId,
				userPswd: this.userPw,
			};
			console.log('asdasd' + JSON.stringify( DOMAIN) + params)
			const res = await this.$axios.post(DOMAIN + apiUrl, { params: params });
			if (res.data.retnCd === -9001) {
				alert(res.data.retnMsg);
				return {};
			} else {
				const femsSessionCookie = res.data.dataset.FEMS_SESSION;
				const FEMS_SESSION = femsSessionCookie;

				$cookie.set('FEMS_SESSION', FEMS_SESSION);
				this.setUserInfo(res.data.dataset.userInfo);

				console.log('FEMS_SESSION', FEMS_SESSION);
				console.log('$cookie.get', $cookie.get('FEMS_SESSION'));
				console.log('userInfo', JSON.stringify(res.data.dataset.userInfo));

				// alert("임시로 로그인 처리 되었습니다. dashboard 페이지로 이동합니다.");
				this.$router.push({ path: this.myHome.root });
			}
		},
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/var.scss';
@import '@/assets/scss/mixin.scss';

::v-deep {
	.v-avatar {
		border-radius: 50%;
	}

	.v-text-field input {
		padding: 12px !important;
		font-size: 1rem;
	}
	.v-btn {
		border-radius: 8px;
	}
}

.login {
	height: calc(100% - 64px);
	position: relative;
	&-inner {
		width: 480px;
		padding: 30px 40px 50px;
		border-radius: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	&-logo {
		margin-bottom: 28px;
		text-align: center;
	}
	&-img {
		// width: 100px;
		// height: 100px;
		// border-radius: 50%;
		margin-bottom: 30px;
		text-align: center;
		// img {
		//   width: 110px;
		//   height: 70px;
		// }
	}
	&-form {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}

		.v-input {
			width: 100%;
		}
	}
}
@each $theme in dark, light {
	@include theme($theme);
	.v-application.#{$theme}-mode {
		.login {
			@if $theme == dark {
				background-color: #1d2133;
			} @else {
				background-color: #fff;
			}
		}
		.login-inner {
			@if $theme == dark {
				background-color: rgba(113, 120, 152, 0.3);
			} @else {
				background-color: rgba(204, 204, 204, 0.35);
			}
		}
		.v-btn {
			// @if $theme == dark {
			// 	background-color: #18579e;
			// } @else {
			// 	background-color: #3f4d7d;
			// }
		}
	}
}
</style>
