<template>
	<ion-page>
		<sgc-page :title="title" :pageDetail="true" :toolbars="toolbars" :useRefresh="true" @sgcRefresh="onLoad">
			<sgc-loading :loadStatus="loadStatus" loadType="view">
				<ion-title v-if="dataView" class="page-title with-title-deco">
					<p class="ion-text-wrap">{{ dataView.siteNm }}</p>
					<ion-note class="title-deco">
						<ion-badge class="emg-gb" :class="dataView.emgGbCd">
							{{ dataView.emgGbNm }}
						</ion-badge>
						<ion-badge class="deft-prcg-stus" :class="dataView.deftPrcgStusCd">
							{{ dataView.deftPrcgStusNm }}
						</ion-badge>
					</ion-note>
				</ion-title>
				<ion-list v-if="dataView" class="item-view">
					<sgc-item-view label="DEFT.LBL_DONG_HSNO" :text="dataView.dongHsno"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_RCPT_DT" type="datetime" :text="dataView.rcptDt"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_APLNT_NM" :text="dataView.aplntNm"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_CRRY_TEL_NO" :text="dataView.crryTelNo"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_LOC_NM" :text="dataView.locNm"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_DEFT_JOBTYP_NM" :text="utils.showTextJoin(' - ', dataView.deftLjobtypNm, dataView.deftJobtypNm)"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_DEFT_TYPE_NM" :text="utils.showTextJoin(' - ', dataView.deftTypeNm, dataView.deftCausNm)"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_ASMNG_CHRGR_EMPNO" :text="utils.showTextJoin(' - ', dataView.asmngChrgrEmpno, dataView.asmngChrgrEmpnm)"></sgc-item-view>
					<sgc-item-view
						label="DEFT.LBL_WORKWKI_SENDYN"
						:text="$t(utils.getWorkWkiSend(dataView.workWkiPushYn, dataView.workWkiSmsYn) ? 'DEFT.LBL_SEND' : 'DEFT.LBL_UNSEND')"
					>
					</sgc-item-view>
					<sgc-item-view label="DEFT.LBL_DEFT_CN" type="textarea" :text="dataView.deftCn"></sgc-item-view>
					<sgc-item-view
						v-if="!['A', 'B', 'C', 'D'].includes(dataView.deftPrcgStusCd)"
						label="DEFT.LBL_WORK_WKI_CN"
						type="textarea"
						:text="dataView.reqCn"
					></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_PRCG_CN" type="textarea" :text="dataView.prcgCn"></sgc-item-view>
				</ion-list>
				<br />
				<ion-list class="item-form form-line" v-if="['A', 'B', 'C', 'D'].includes(dataView.deftPrcgStusCd)">
					<sgc-item-input
						label="DEFT.LBL_CONS_COVEND_ID"
						type="search-id"
						:required="true"
						v-model="dataView.consCovendId"
						v-model:to="dataView.consCovendNm"
						searchType="COVEND"
						:params="{ siteCd: dataView.siteCd, siteNm: dataView.siteNm }"
						@sgcChange="changeForm('consCovendId')"
						ref="consCovendId"
					></sgc-item-input>
					<sgc-item-input
						label="DEFT.LBL_VENDR_LBPR_NM"
						type="select"
						:required="true"
						v-model="dataView.vendrLbprSeq"
						:codeKey="codeKey.vendrLbprSeq"
						@sgcChange="changeForm('vendrLbprSeq')"
						ref="vendrLbprSeq"
					>
						<ion-badge class="work-wki-push yes" slot="end" v-if="dataView.vendrLbprPushYn == 'Y'">
							{{ $t('DEFT.LBL_VENDR_LBPR_PUSH_YES') }}
						</ion-badge>
						<ion-badge class="work-wki-push no" slot="end" v-if="dataView.vendrLbprPushYn != 'Y'">
							{{ $t('DEFT.LBL_VENDR_LBPR_PUSH_NO') }}
						</ion-badge>
					</sgc-item-input>
					<sgc-item-input label="DEFT.LBL_WORK_WKI_CN" type="textarea" :required="true" v-model="dataView.reqCn" ref="reqCn"></sgc-item-input>
				</ion-list>
				<ion-list v-if="dataList" class="item-list">
					<ion-list-header>
						<ion-label>{{ $t('ELPS.LBL_TITLE') }} </ion-label>
					</ion-list-header>
					<ion-item-group v-if="dataList.length > 0">
						<ion-item v-for="(item, i) in dataList" :key="i" @click="openElpsViewModal(item)">
							<ion-note slot="start">{{ i + 1 }}</ion-note>
							<ion-label>
								<h3>{{ item.prcgPrStrtDt }} {{ item.prcgPrStrtEndTm }}</h3>
								<p>[{{ item.prcgTypeNm }} - {{ item.deftPrcgGbNm }}]</p>
								<p>{{ item.rmkCn }}</p>
							</ion-label>
							<ion-note slot="end">{{ item.pgprNm }}</ion-note>
						</ion-item>
					</ion-item-group>
					<ion-item-group v-else>
						<ion-item>
							<ion-label>
								<h3>
									{{ $t('MSG_NODATA') }}
								</h3>
							</ion-label>
						</ion-item>
					</ion-item-group>
				</ion-list>
			</sgc-loading>
		</sgc-page>
	</ion-page>
</template>

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

import { TcsDeftElpsVo, TcsDeftVo, ViewListDataVo, CodeVo, SmComCovendChrgrVo } from '../../services/common.interface';

import { DeftCustsignModal, DeftElpsRegModal, DeftElpsViewModal, DeftPhotoModal, DeftElpsSmsModal } from './../common/modals/index';

/**
 * 임직원 - 하자관리
 *
 * 진행 중인 하자의 목록 페이지
 */
export default defineComponent({
	name: 'PoDeftMangViewPage',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	watch: {
		$route() {
			this.onLoad();
		},
	},
	setup() {
		return {
			Icon,
			utils,
		};
	},
	mounted() {
		this.onLoad();
	},
	data(): ViewListDataVo<TcsDeftVo, TcsDeftElpsVo, TcsDeftVo> {
		return {
			title: 'TIT_DEPTMANGVIEW',
			loadStatus: 'loading',
			dataView: null,
			dataList: null,
			params: null,
			codeKey: {
				vendrLbprSeq: '',
			},
			toolbars: [
				{
					color: 'primary',
					label: 'BTN_SAVE',
					disabled: true,
					role: 'submit',
					click: () => {
						this.submitData();
					},
				},
				{
					color: 'danger',
					label: 'DEFT.BTN_SMS_SEND',
					disabled: true,
					click: () => {
						this.openSmsModal();
					},
				},
			],
		};
	},
	methods: {
		/**  로드시 실행 */
		onLoad(e?: any) {
			if (commonService.isNotNull(this.$route.params.id)) {
				commonService.checkLoadStatusView(
					this,
					commonService.getView('api/selectTcsDeftView/' + this.$route.params.id).then((view) => {
						this.dataView = view;
						this.params = Object.assign({}, view);
						this.onLoadElps();
					}, e)
				);
			}
		},
		/**
		 * 폼 변경
		 * @param colunm
		 */
		changeForm(colunm: string) {
			switch (colunm) {
				case 'consCovendId':
					if (this.dataView.consCovendId != '' && this.dataView.consCovendId != this.params.consCovendId) {
						this.dataView.vendrLbprNm = '';
						this.dataView.vendrLbprCrryTel = '';
						this.dataView.vendrLbprMail = '';
						this.dataView.vendrLbprSeq = '';
						this.dataView.vendrLbprPushYn = 'N';
					}
					if (commonService.isNotNull(this.dataView.consCovendId)) {
						this.codeKey.vendrLbprSeq = 'VENDRLBPR_' + this.dataView.consCovendId;
					} else {
						this.codeKey.vendrLbprSeq = '';
					}
					this.changeForm('vendrLbprSeq');
					break;
				case 'vendrLbprSeq':
					setTimeout(() => {
						if (commonService.isNotNull(this.dataView.vendrLbprSeq)) {
							const vendrLbprSeq = commonService.getRef(this.$refs, 'vendrLbprSeq', 'getCodeVo');
							const codeVo: CodeVo<SmComCovendChrgrVo> = vendrLbprSeq?.getCodeVo();
							if (codeVo !== null && commonService.isNotNull(codeVo?.options)) {
								const options = codeVo.options;
								this.dataView.vendrLbprNm = options?.userName;
								this.dataView.vendrLbprCrryTel = options?.hpNo;
								this.dataView.vendrLbprMail = options?.email;
								this.dataView.vendrLbprSeq = options?.chargeSeq;
								this.dataView.vendrLbprPushYn = options?.pushUseYn;
							}
						}
						if (commonService.isNotNull(this.dataView.vendrLbprSeq) && this.dataView.vendrLbprSeq != this.params.vendrLbprSeq) {
							this.toolbars[1].disabled = true;
						} else {
							if (commonService.isNotNull(this.dataView.vendrLbprCrryTel)) {
								this.toolbars[1].disabled = false;
							} else {
								this.toolbars[1].disabled = true;
							}
						}
						switch (this.dataView?.deftPrcgStusCd) {
							case 'A':
							case 'B':
							case 'C':
							case 'D':
								break;
							case 'Z':
							case 'X':
							default:
								this.toolbars[0].disabled = true;
								this.toolbars[1].disabled = true;
								break;
						}
					}, 1000);
					break;
			}
		},
		/** 하자 처리 정보 로드 */
		onLoadElps() {
			if (commonService.isNotNull(this.dataView) && commonService.isNotNull(this.dataView?.deftNo)) {
				commonService.getList('api/selectTcsDeftElpsList/' + this.dataView.deftNo).then((list) => {
					this.dataList = list;
					this.toolbars[0].disabled = false;
					this.changeForm('consCovendId');
				});
			}
		},
		/** 데이타 전송 */
		submitData() {
			if (commonService.isNull(this.dataView.consCovendId)) {
				return commonService.openFormInvalid('처리업체', this.$refs, 'consCovendId');
			}
			if (commonService.isNull(this.dataView.vendrLbprSeq)) {
				return commonService.openFormInvalid('업체담당자', this.$refs, 'vendrLbprSeq');
			}
			if (commonService.isNull(this.dataView.reqCn)) {
				return commonService.openFormInvalid('작업지시', this.$refs, 'reqCn');
			}
			commonService.checkLoadStatusSubmit(
				this,
				commonService.getUpdate('api/updateTcsDeft', commonService.getSubmitData(this.dataView)).then(() => {
					this.onLoad();
				})
			);
		},
		/** 하자 지시 모달 열기 */
		openSmsModal() {
			commonService
				.openModal(DeftElpsSmsModal, {
					deft: { deftNo: this.dataView.deftNo },
				})
				.then(() => {
					this.onLoad();
				});
		},
		/**
		 * 하자 처리 상세 모달 열기
		 *
		 * @param elps
		 */
		openElpsViewModal(elps: TcsDeftElpsVo) {
			commonService
				.openModal(DeftElpsViewModal, {
					elps: { deftNo: elps.deftNo, prcgElpsSeq: elps.prcgElpsSeq },
				})
				.then(() => {
					this.onLoad();
				});
		},
		/**
		 * 하자 처리 등록 모달 열기
		 *
		 * @param deftPrcgGbCd
		 */
		openElpsRegModal(deftPrcgGbCd: string) {
			commonService
				.openModal(DeftElpsRegModal, {
					elps: { deftNo: this.dataView.deftNo, deftPrcgGbCd: deftPrcgGbCd },
				})
				.then(() => {
					this.onLoad();
				});
		},
		/**
		 * 사진 보기 모달 열기
		 */
		openDeftPhotoModal() {
			commonService
				.openModal(DeftPhotoModal, {
					deft: {
						deftNo: this.dataView.deftNo,
						deftImgAflId: this.dataView.deftImgAflId,
						prcgAflId: this.dataView.prcgAflId,
					},
				})
				.then(() => {
					this.onLoad();
				});
		},
		/**
		 * 고객 서명 모달 열기
		 */
		openDeftSignModal() {
			commonService
				.openModal(DeftCustsignModal, {
					deft: { deftNo: this.dataView.deftNo },
				})
				.then(() => {
					this.onLoad();
				});
		},
	},
});
</script>
<style scoped lang="scss"></style>
