<template>
	<ion-page class="background-dark">
		<ion-content :fullscreen="true">
			<div class="middle-wrapper">
				<div class="logo-wraper">
					<img src="../../assets/SGC.svg" />
					<span>{{ params.appConf.appName }}</span>
				</div>
				<form novalidate @submit.prevent="onLogin">
					<ion-list>
						<ion-item>
							<ion-label position="floating" color="primary">{{ $t('LOGIN.LBL_CMPNCD') }}</ion-label>
							<sgc-select v-model="writeModel.cmpnCd" placeholder="LOGIN.LBL_CMPNCD" :codeKey="codeKey.companies" ref="cmpnCd"> </sgc-select>
						</ion-item>
						<ion-item>
							<ion-label position="floating" color="primary">{{ $t('LOGIN.LBL_LGINID') }}</ion-label>
							<ion-input
								v-model="writeModel.lginId"
								type="text"
								:placeholder="$t('LOGIN.LBL_LGINID')"
								:spellcheck="false"
								autocapitalize="off"
								:clearInput="true"
								ref="lginId"
							>
							</ion-input>
						</ion-item>
						<ion-item>
							<ion-label position="floating" color="primary">{{ $t('LOGIN.LBL_PASSWD') }}</ion-label>
							<ion-input v-model="writeModel.scrtNo" :placeholder="$t('LOGIN.LBL_PASSWD')" type="password" :clearInput="true" ref="scrtNo"></ion-input>
						</ion-item>
						<ion-text>
							<div v-if="params.appConf.appType === 'as'">
								<ion-button type="button" color="light" size="small" @click="openModal('findid')">
									{{ $t('LOGIN.BTN_FINDID') }}
								</ion-button>
								<span>|</span>
								<ion-button type="button" color="light" size="small" @click="openModal('findpw')">
									{{ $t('LOGIN.BTN_FINDPW') }}
								</ion-button>
								<span>|</span>
							</div>
							<ion-button type="button" color="light" size="small" :disabled="params.deferredPrompt === null" @click="addHomeScreen()">
								{{ $t('BTN_ADDHOME') }}
							</ion-button>
						</ion-text>
					</ion-list>
				</form>
				<ion-button class="loginBtn" type="button" @click="onLogin()">
					{{ $t('LOGIN.BTN_LOGIN') }}
				</ion-button>

				<div>
					<img src="../../assets/SGC-CI.svg" />
					<div>Sustain Grow Change</div>
				</div>
				<div class="dummpy-keyboard"></div>
			</div>
		</ion-content>
	</ion-page>
</template>

<script lang="ts">
import { AppConfVo, WriteDataVo, UserDetailsVo } from '../../services/common.interface';
import { commonService, defineComponent, IonFormModules, IonPageModules, Icon } from '../../services/index';

import { FindIdModal, FindPwModal } from './modals/index';
/**
 * 회사선택 popover 오류시 라디오버튼으로 변경
  	<div v-if="params.appConf.appType === 'portal'">
		<ion-item>
			<ion-label position="floating" color="primary">{{ $t('LOGIN.LBL_CMPNCD') }}</ion-label>
			<sgc-item-input ref="radio" label="" type="radio" :required="true" :code-key="codeKey.companies" v-model="writeModel.cmpnCd"></sgc-item-input>
		</ion-item>
	</div>
 * <sgc-select v-model="writeModel.cmpnCd" placeholder="LOGIN.LBL_CMPNCD" :codeKey="codeKey.companies" ref="cmpnCd"> </sgc-select>
 */
/**
 * 공통 - 로그인 페이지
 *
 * 로그인 정보를 담당하는 페이지
 */
export default defineComponent({
	name: 'LoginPage',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	mounted() {
		this.params._installSubscribe = commonService
			.getSharedService()
			.subscribe('install')
			.subscribe((deferredPrompt: any) => {
				this.params.deferredPrompt = deferredPrompt;
			});
	},
	unmounted() {
		this.params._installSubscribe.unsubscribe();
	},
	data(): WriteDataVo<
		{
			/** 회사 정보 */
			cmpnCd: string;

			/** 로그인 아이디 */
			lginId: string;

			/** 로그인 암호 */
			scrtNo: string;
		},
		{ appConf: AppConfVo; deferredPrompt: any; _installSubscribe: any }
	> {
		const appConf = commonService.getAppConf();
		const writeModel = {
			cmpnCd: 'S0001',
			lginId: '',
			scrtNo: '',
		};
		switch (appConf.processEnv.NODE_ENV) {
			case 'development':
				switch (appConf.appType) {
					case 'as':
						writeModel.lginId = 'hansu147';
						writeModel.scrtNo = 'sgc123!@#';
						break;
					case 'portal':
						writeModel.lginId = 'TC10203';
						writeModel.scrtNo = '890208';
						// TC10203 / 890208
						// M : sdcit01
						// A : TA60508
						// C :  C06015
						break;
				}
				break;
		}
		return {
			title: 'TIT_LOGIN',
			writeModel: writeModel,
			params: {
				appConf: appConf,
				deferredPrompt: appConf.deferredPrompt,
				_installSubscribe: null,
			},
			codeKey: {
				companies: 'COMPANIES',
			},
			toolbars: [
				{
					color: 'primary',
					label: 'LOGIN.BTN_LOGIN',
					click: () => {
						this.onLogin();
					},
				},
			],
		};
	},
	methods: {
		/** 로그인 관련 모달 오픈 */
		openModal(type: string) {
			switch (type) {
				case 'findid':
					commonService.openModal(FindIdModal);
					break;
				case 'findpw':
					commonService.openModal(FindPwModal);
					break;
			}
		},
		/** 홈 스크린에 추가하기 */
		addHomeScreen() {
			if (this.params.appConf.addHomeScreen) {
				this.params.appConf.addHomeScreen();
			}
		},
		/** 로그인 */
		onLogin() {
			if (commonService.isNull(this.writeModel.cmpnCd)) {
				return commonService.openFormInvalid('회사', this.$refs, 'cmpnCd');
			}
			if (commonService.isNull(this.writeModel.lginId)) {
				return commonService.openFormInvalid('사용자 ID', this.$refs, 'lginId');
			}
			if (commonService.isNull(this.writeModel.scrtNo)) {
				return commonService.openFormInvalid('암호', this.$refs, 'scrtNo');
			}
			let loginUrl = '';
			switch (this.params.appConf.appType) {
				case 'as':
					loginUrl = 'api/aslogin';
					break;
				case 'portal':
				default:
					loginUrl = 'api/login';
					break;
			}
			commonService
				.getPost(loginUrl, {
					cmpnCd: this.writeModel.cmpnCd,
					lginId: this.writeModel.lginId,
					scrtNo: window.btoa(this.writeModel.scrtNo),
				})
				.then((result: UserDetailsVo) => {
					if (result && commonService.isNotNull(result.userNm)) {
						switch (result.userNm) {
							case 'IDPASSINVALID':
							case 'PASSFAIL':
							case 'PASSEXPI':
							case 'PASSDIFF':
								commonService.openToast('LOGIN.MSG_' + result.userNm, null, null, this.title, 'warning');
								break;
							default:
								if (['M', 'A', 'C', 'Z'].includes(result.authSiteYn)) {
									if (result.alreadyUsed) {
										commonService.openToast('LOGIN.MSG_ALREADYUSED', null, null, this.title, 'warning');
									} else {
										commonService.openToast('LOGIN.MSG_WELCOME', result, null, this.title, 'success', Icon.homeOutline);
									}
									commonService.checkLogin().then((isLogined) => {
										if (isLogined) {
											const next: string = this.$route.query.next ? (this.$route.query.next as string) : '/home';
											commonService.changePage(next);
										}
									});
								} else {
									commonService.openToast('LOGIN.MSG_NO_AUTH', null, null, this.title, 'warning');
								}
								break;
						}
					}
				});
		},
	},
});
</script>
<style scoped lang="scss">
div.ion-page.background-dark {
	ion-content {
		--background: var(--sgc-background-dark-bg);
		--ion-text-color: var(--sgc-background-dark-font);
		div.middle-wrapper {
			width: 100%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			max-width: 30rem;
			div.logo-wraper {
				text-align: center;
				padding: 1.5rem 0;
				img {
					vertical-align: middle;
				}
				span {
					display: inline-block;
					vertical-align: middle;
					font-size: 2.5rem;
				}
			}
			form {
				background: transparent;
				border: none;
				ion-list {
					background-color: var(--sgc-background-dark-bg);
					ion-item {
						background: transparent;
						margin: 0.5rem 3rem;
						border-radius: 0.3rem;
						--border-color: transparent;
						&::part(native) {
							border: none;
							background: rgba(255, 255, 255, 0.2);
							div.item-inner {
								border: none;
								padding-inline-end: none;
							}
						}
						ion-label {
							color: var(--sgc-color-primary-50);
						}
						ion-select {
							&::part(icon) {
								right: 0.45rem;
							}
						}
						ion-input {
							:deep(button.input-clear-icon) {
								background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><polygon%20fill='white'%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256'/></svg>");
							}
						}
					}
				}
			} /* form - end  */
			ion-text {
				font-size: 0.7rem;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				grid-template-columns: repeat(5, 1fr);
				color: #aaa;
				ion-button {
					display: inline-block;
					position: relative;
					letter-spacing: -0.05em;
					&::part(native) {
						color: var(--sgc-background-dark-font);
						background: transparent;
						display: inline-block;
						--padding-start: 0.5em;
						--padding-end: 0.5em;
					}
				}
			} /* ion-text - end  */
			ion-button.loginBtn {
				display: block;
				margin: 3rem;
				--background: var(--ion-color-danger);
			}
			div {
				font-size: 0.7rem;
				grid-column: span 5;
				text-align: center;
				color: #898989;
			}
		} /* middle-wrapper - end  */
	} /* ion-content - end  */
}
</style>
