<template>
	<sgc-modal :title="title" @sgcCloseModal="closeModal" :toolbars="toolbars">
		<sgc-loading :loadStatus="loadStatus" loadType="view">
			<ion-list v-if="dataView" class="item-view">
				<sgc-item-view label="ELPS.LBL_DEFT_PRCG_GB_NM" :text="dataView.deftPrcgGbNm"></sgc-item-view>
				<sgc-item-view label="ELPS.LBL_PRCG_PR_STRT_DT" type="datetime" :text="dataView.prcgPrStrtDt"></sgc-item-view>
				<sgc-item-view label="ELPS.LBL_PRCG_PR_TM" :text="utils.showTime(dataView.prcgPrStrtTm, dataView.prcgPrEndTm)"></sgc-item-view>
				<sgc-item-view label="ELPS.LBL_PGPR_NM" :text="dataView.pgprNm"></sgc-item-view>
				<sgc-item-view label="ELPS.LBL_RMK_CN" type="textarea" :text="dataView.rmkCn"></sgc-item-view>
			</ion-list>
		</sgc-loading>
	</sgc-modal>
</template>

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

import { TcsDeftElpsVo, ViewDataVo } from '../../../services/common.interface';

import DeftElpsRegModal from './DeftElpsRegModal.vue';

export default defineComponent({
	name: 'DeftElpsViewModal',
	components: { ...IonPageModules },
	props: ['elps'],
	setup() {
		return {
			Icon,
			utils,
		};
	},
	mounted() {
		this.loadData();
	},
	data(): ViewDataVo<TcsDeftElpsVo> {
		return {
			title: 'ELPS.TIT_ELPS',
			loadStatus: 'loading',
			dataView: null,
			toolbars: [
				{
					color: 'danger',
					label: 'BTN_MODIFY',
					hide: true,
					click: () => {
						this.modifyElps();
					},
				},
			],
		};
	},
	watch: {
		elps() {
			this.loadData();
		},
	},
	methods: {
		/** 모달 닫기 */
		closeModal() {
			return modalController.dismiss();
		},
		/** 경과 정보 수정 */
		modifyElps() {
			commonService
				.openModal(DeftElpsRegModal, {
					elps: this.dataView,
				})
				.then((result) => {
					const { data, role } = result;
					if (role === 'changed') {
						this.dataView = data;
					}
				});
		},
		/** 경과 정보 불러오기 */
		loadData() {
			if (commonService.isNotNull(this.elps)) {
				if (commonService.isNotNull(this.elps.rmkCn)) {
					this.dataView = this.elps;
					this.loadStatus = 'loaded';
				} else if (commonService.isNotNull(this.elps.deftNo) && commonService.isNotNull(this.elps.prcgElpsSeq)) {
					commonService
						.getView('api/selectTcsDeftElpsView/' + this.elps.deftNo + '/' + this.elps.prcgElpsSeq)
						.then((view) => {
							this.dataView = view;
						})
						.finally(() => {
							this.loadStatus = commonService.isNotNull(this.dataView) ? 'loaded' : 'nodata';
						});
				}
			}
		},
	},
});
</script>
<style scoped lang="scss"></style>
