<template>
	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars">
		<sgc-loading :loadStatus="loadStatus" loadType="write">
			<form novalidate @submit.prevent="submitData">
				<ion-list v-if="writeModel" class="item-form">
					<sgc-item-input label="DEFT.LBL_SMS_TITLE" type="text" :required="true" v-model="writeModel.smsTitle" ref="smsTitle"></sgc-item-input>
					<sgc-item-input
						label="DEFT.LBL_SMS_CONTENTS"
						type="textarea"
						:required="true"
						:in-valid="!params.isValid"
						:error="$t('DEFT.MSG_SMSCONTENTS_ERROR', { cnt: params.txtSize })"
						:helper="$t('DEFT.MSG_SMSCONTENTS_HELPER')"
						@sgcChange="checkSmsContents()"
						v-model="writeModel.smsContents"
						ref="smsContents"
					></sgc-item-input>
				</ion-list>
				<div class="footer-message">{{ $t('DEFT.MSG_SMS_SEND') }}</div>
			</form>
		</sgc-loading>
	</sgc-modal>
</template>

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

import { TcsDeftVo, WriteDataVo } from '../../../services/common.interface';

/**
 * 임직원 - 하자지시 정보 모달
 *
 * 하자 지시를 SMS 나 푸시로 전달함
 */
export default defineComponent({
	name: 'DeftElpsSmsModal',
	components: { ...IonPageModules, ...IonFormModules },
	props: ['deft'],
	setup() {
		return {
			Icon,
			utils,
		};
	},
	mounted() {
		this.loadData();
	},
	data(): WriteDataVo<TcsDeftVo, { txtSize: number; isValid: boolean }> {
		return {
			title: 'DEFT.TIT_SMS_SEND',
			loadStatus: 'loading',
			writeModel: {
				/** 회사 코드 */
				smsTitle: '',

				/** 하자번호 */
				smsContents: '',
			},
			params: { txtSize: 0, isValid: true },
			toolbars: [
				{
					color: 'danger',
					label: 'BTN_SUBMIT',
					role: 'submit',
					click: () => {
						this.submitData();
					},
				},
			],
		};
	},
	watch: {
		elps() {
			this.loadData();
		},
	},
	methods: {
		/** 모달 닫기 */
		closeModal() {
			return modalController.dismiss();
		},
		/** SMS 문자 전송하기 위한 내용 글자수 확인 */
		checkSmsContents() {
			const str = this.writeModel.smsContents;
			const strLen = str.length;
			let cnt = 0;
			let oneChar = '';
			for (var ii = 0; ii < strLen; ii++) {
				oneChar = str.charAt(ii);
				if (escape(oneChar).length > 4) {
					cnt += 2;
				} else {
					cnt++;
				}
			}
			this.params.txtSize = cnt;
			this.params.isValid = cnt > 80 ? false : true;
		},
		/** 하자 지시 내용 전송 */
		submitData() {
			if (commonService.isNull(this.writeModel.smsTitle)) {
				return commonService.openFormInvalid('제목', this.$refs, 'smsTitle');
			}
			if (commonService.isNull(this.writeModel.smsContents)) {
				return commonService.openFormInvalid('내용', this.$refs, 'smsContents');
			}
			if (!this.params.isValid) {
				commonService.openToast('DEFT.MSG_ERR_SMSCONTENTS', { cnt: this.params.txtSize }, null, this.title, 'warning');
				return;
			}
			commonService.openConfirm('DEFT.MSG_CONFIRM_SMSSEND').then((bl) => {
				if (bl) {
					commonService.checkLoadStatusSubmit(
						this,
						commonService.getCreate('api/sendTcsDeftSms', commonService.getSubmitData(this.writeModel)).then((view) => {
							if (view) {
								commonService.openToast('DEFT.MSG_SAVE_SMSSEND', null, null, this.title, 'success');
								modalController.dismiss(view, 'changed');
							}
						})
					);
				}
			});
		},
		/** 하자 정보 불러오기 */
		loadData() {
			if (commonService.isNotNull(this.deft)) {
				if (commonService.isNotNull(this.deft.deftNo)) {
					commonService.checkLoadStatusView(
						this,
						commonService.getView('api/selectTcsDeftView/' + this.deft.deftNo).then((view) => {
							this.writeModel = Object.assign({ smsTitle: '', smsContents: '' }, view);
						})
					);
				}
			}
		},
	},
});
</script>

<style scoped lang="scss">
div.footer-message {
	margin: 1em;
	color: var(--ion-color-danger);
	font-size: 0.8em;
}
</style>
