<template>
	<ion-page>
		<sgc-page :title="title" :toolbars="toolbars" :pageDetail="true">
			<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_CONS_COVEND_ID" :text="dataView.consCovendNm"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_VENDR_LBPR_NM" :text="dataView.vendrLbprNm"></sgc-item-view>
					<sgc-item-view label="DEFT.LBL_PRCG_CN" type="textarea" :text="dataView.prcgCn"></sgc-item-view>
				</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 } from '../../services/common.interface';

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

/**
 * 임직원 - 하자완료관리 상세
 *
 * 진행 중인 하자의 상세 페이지
 */
export default defineComponent({
	name: 'PoDeftQueViewPage',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	watch: {
		$route() {
			this.onLoad();
		},
	},
	setup() {
		return {
			Icon,
			utils,
		};
	},
	mounted() {
		this.onLoad();
	},
	data(): ViewListDataVo<TcsDeftVo, TcsDeftElpsVo> {
		return {
			title: 'TIT_DEPTQUEVIEW',
			loadStatus: 'loading',
			dataView: null,
			dataList: null,
			toolbars: [
				{
					color: 'primary',
					label: 'DEFT.BTN_VIEW_PHOTO',
					click: () => {
						this.openDeftPhotoModal();
					},
				},
				{
					color: 'primary',
					label: 'DEFT.BTN_VIEW_SIGN',
					click: () => {
						this.openDeftSignModal();
					},
				},
				{
					color: 'primary',
					label: 'DEFT.BTN_END',
					disabled: true,
					click: () => {
						this.openElpsRegModal('END');
					},
				},
			],
		};
	},
	methods: {
		/**
		 *  로드시 1회 실행
		 */
		onLoad(): void {
			if (commonService.isNotNull(this.$route.params.id)) {
				commonService.checkLoadStatusView(
					this,
					commonService.getView('api/selectTcsDeftView/' + this.$route.params.id).then((view) => {
						this.dataView = view;
						switch (this.dataView?.deftPrcgStusCd) {
							case 'Z':
							case 'X':
								this.toolbars[2].disabled = true;
								break;
							default:
								this.toolbars[2].disabled = false;
								break;
						}
						switch (this.dataView?.deftPrcgStusCd) {
							case 'D':
								this.toolbars[0].label = 'DEFT.BTN_ATTACH_PHOTO';
								this.toolbars[1].label = 'DEFT.BTN_REG_SIGN';
								break;
							default:
								this.toolbars[0].label = 'DEFT.BTN_VIEW_PHOTO';
								this.toolbars[1].label = 'DEFT.BTN_VIEW_SIGN';
								break;
						}
						this.onLoadElps();
					})
				);
			}
		},
		/**
		 *  작업지시 목록 불러오기
		 */
		onLoadElps() {
			if (commonService.isNotNull(this.dataView) && commonService.isNotNull(this.dataView?.deftNo)) {
				commonService.getList('api/selectTcsDeftElpsList/' + this.dataView.deftNo).then((list) => {
					this.dataList = list;
				});
			}
		},
		/**
		 *  모달로 작업지시 상세보기
		 */
		openElpsViewModal(elps: TcsDeftElpsVo) {
			commonService
				.openModal(DeftElpsViewModal, {
					elps: { deftNo: elps.deftNo, prcgElpsSeq: elps.prcgElpsSeq },
				})
				.then(() => {
					this.onLoad();
				});
		},
		/**
		 *  작업지시 등록
		 */
		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>
