<template>
	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars">
		<form novalidate @submit.prevent="onSubmit">
			<ion-list v-if="writeModel" class="item-form">
				<sgc-item-input label="LOGIN.LBL_CMPNCD" v-model="writeModel.cmpnCd" type="select" :required="true" :codeKey="codeKey.companies" ref="cmpnCd"></sgc-item-input>
				<sgc-item-input label="LOGIN.LBL_USERID" type="text" :required="true" v-model="writeModel.userId" ref="userId"></sgc-item-input>
				<sgc-item-input label="LOGIN.LBL_USERNM" type="text" :required="true" v-model="writeModel.userName" ref="userName"></sgc-item-input>
				<sgc-item-input label="LOGIN.LBL_HPNO" type="text" :required="true" v-model="writeModel.hpNo" ref="hpNo"></sgc-item-input>
			</ion-list>
		</form>
		<ion-text v-if="params.resultData">
			<p v-if="params.resultData.scrtNo" v-html="$t('LOGIN.MSG_FINDPW', params.resultData)"></p>
			<p v-else>
				{{ $t('LOGIN.MSG_NOMATCHES') }}
			</p>
		</ion-text>
	</sgc-modal>
</template>

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

export default defineComponent({
	name: 'FindIdModal',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	data(): WriteDataVo<
		{
			cmpnCd: string;
			userId: string;
			userName: string;
			hpNo: string;
		},
		{ resultData: any }
	> {
		const appConf = commonService.getAppConf();
		const writeModel = {
			cmpnCd: '',
			userId: '',
			userName: '',
			hpNo: '',
		};
		switch (appConf.processEnv.NODE_ENV) {
			case 'development':
				writeModel.userId = 'dooin3223';
				writeModel.userName = '장민영';
				writeModel.hpNo = '010-9206-9867';
				break;
		}

		return {
			title: 'TIT_FINDPW',
			writeModel: writeModel,
			params: {
				resultData: null,
			},
			codeKey: {
				companies: 'COMPANIES',
			},
			toolbars: [
				{
					color: 'primary',
					label: 'LOGIN.BTN_FINDPW',
					click: () => {
						this.onSubmit();
					},
				},
			],
		};
	},
	methods: {
		/** 모달 닫기 */
		closeModal() {
			return modalController.dismiss();
		},
		/** 암호 찾기 실행 */
		onSubmit() {
			if (commonService.isNull(this.writeModel.userId)) {
				return commonService.openFormInvalid('아이디', this.$refs, 'userId');
			}
			if (commonService.isNull(this.writeModel.userName)) {
				return commonService.openFormInvalid('성명', this.$refs, 'userName');
			}
			if (commonService.isNull(this.writeModel.hpNo)) {
				return commonService.openFormInvalid('핸드폰번호', this.$refs, 'hpNo');
			}
			commonService.getUpdate('api/execAsPasswordInit', this.writeModel).then((result) => {
				this.params.resultData = result;
				if (commonService.isNull(this.params.resultData.userId)) {
					commonService.openToast('LOGIN.MSG_NOMATCHES', null, null, this.title, 'warning');
				}
			});
		},
	},
});
</script>

<style scoped lang="scss">
ion-text {
	text-align: center;
	font-size: 1rem;
	:deep(strong) {
		color: var(--ion-color-danger);
	}
}
form {
	ion-item {
		ion-label.sc-ion-label-md-h {
			color: var(--sgc-color-primary-50);
			font-weight: 600;
		}
		&::part(native) {
			background: transparent;
		}
	}
}
</style>
