<template>
	<ion-page>
		<sgc-page :title="title" :pageDetail="true" :useRefresh="true" :toolbars="toolbars" @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_DEFT_CN" type="textarea" :text="dataView.deftCn"></sgc-item-view>
					<sgc-item-view 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>

				<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 { TcsDeftVo, TcsDeftElpsVo, ViewListDataVo } from '../../services/common.interface';

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

/**
 * 협력업체 - 하자정보 상세
 *
 *
 * 진행중인 하자 정보 상세 정보
 */
export default defineComponent({
	name: 'AsDeftingViewPage',
	components: {
		...IonPageModules,
		...IonFormModules,
	},
	watch: {
		$route() {
			this.onLoad();
		},
	},
	setup() {
		return {
			Icon,
			utils,
		};
	},
	mounted() {
		this.onLoad();
	},
	data(): ViewListDataVo<TcsDeftVo, TcsDeftElpsVo> {
		return {
			title: 'TIT_DEPTINGVIEW',
			loadStatus: 'loading',
			dataView: null,
			dataList: null,
			toolbars: [
				{
					color: 'primary',
					label: 'DEFT.BTN_REG_ING',
					click: () => {
						this.openElpsRegModal('ING');
					},
				},
				{
					color: 'danger',
					label: 'DEFT.BTN_REG_DONE',
					click: () => {
						this.openElpsRegModal('DONE');
					},
				},
				{
					color: 'primary',
					label: 'DEFT.BTN_ATTACH_PHOTO',
					click: () => {
						this.openDeftPhotoModal();
					},
				},
				{
					color: 'primary',
					label: 'DEFT.BTN_REG_SIGN',
					click: () => {
						this.openDeftSignModal();
					},
				},
			],
		};
	},
	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;
						switch (this.dataView?.deftPrcgStusCd) {
							case 'A':
							case 'B':
							case 'C':
								this.toolbars[0].disabled = false;
								this.toolbars[1].disabled = false;
								this.toolbars[2].disabled = false;
								this.toolbars[3].disabled = false;
								break;
							case 'D':
								this.toolbars[0].disabled = true;
								this.toolbars[1].disabled = false;
								this.toolbars[2].disabled = false;
								this.toolbars[3].disabled = false;
								break;
							case 'Z':
							case 'X':
							default:
								this.toolbars[0].disabled = true;
								this.toolbars[1].disabled = true;
								this.toolbars[2].disabled = true;
								this.toolbars[3].disabled = false;
								break;
						}
						this.onLoadElps();
					}, e)
				);
			}
		},
		/** 작업 경과 정보 로드 */
		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,
						deftPrcgStusCd: this.dataView.deftPrcgStusCd,
					},
				})
				.then(() => {
					this.onLoad();
				});
		},
		/** 고객 서명 모달 호출 */
		openDeftSignModal() {
			commonService
				.openModal(DeftCustsignModal, {
					deft: { deftNo: this.dataView.deftNo, deftPrcgStusCd: this.dataView.deftPrcgStusCd },
				})
				.then(() => {
					this.onLoad();
				});
		},
	},
});
</script>
<style scoped lang="scss"></style>
