<template>
	<ion-header :translucent="true">
		<ion-toolbar>
			<ion-title>
				{{ $t(title) }}
				<span v-if="subTitle">[{{ subTitle }}]</span>
			</ion-title>
			<ion-buttons slot="end">
				<ion-button @click="doCloseModal">
					<ion-icon slot="icon-only" :icon="Icon.close"></ion-icon>
				</ion-button>
			</ion-buttons>
		</ion-toolbar>
	</ion-header>
	<ion-content
		:fullscreen="true"
		:scroll-events="true"
		@ionScrollEnd="scrollEnd()"
		:class="{ 'content-scrolled': isScrolled, 'ion-padding': !noPadding, 'ion-no-padding': noPadding }"
		:scroll-x="scrollX"
		:scroll-y="scrollY"
		ref="modalContent"
	>
		<ion-refresher v-if="useRefresh" slot="fixed" @ionRefresh="doRefresh($event)">
			<ion-refresher-content></ion-refresher-content>
		</ion-refresher>
		<slot></slot>
		<div class="dummpy-keyboard"></div>
	</ion-content>
	<ion-footer collapse="fade">
		<slot name="footer"></slot>
		<ion-toolbar scrollable>
			<ion-grid>
				<ion-row>
					<ion-col v-for="(toolbar, i) in pageToolbars" :key="i" class="ion-no-padding" :class="{ 'ion-hide': toolbar.hide }">
						<ion-button expand="block" fill="solid" size="small" color="secondary" @click="toolbar.click" :disabled="toolbar.disabled">
							<ion-icon v-if="toolbar.icon" slot="icon-only" :icon="toolbar.icon"></ion-icon>
							{{ $t(toolbar.label) }}
						</ion-button>
					</ion-col>
					<ion-col class="ion-no-padding">
						<ion-button expand="block" fill="solid" color="secondary" size="small" @click="doCloseModal">
							{{ $t('BTN_CLOSE') }}
						</ion-button>
					</ion-col>
				</ion-row>
			</ion-grid>
		</ion-toolbar>
	</ion-footer>
</template>

<script lang="ts">
import { ToolbarButtonVo } from '../../services/common.interface';
import utils from '../../services/utils.service';

import { IonButton, IonButtons, IonContent, IonFooter, IonHeader, IonIcon, IonGrid, IonRow, IonCol, IonTitle, IonToolbar, IonRefresher, IonRefresherContent } from '@ionic/vue';
import Icon from './../../services/icon';
import { defineComponent } from 'vue';

/**
 * 공통 - 모달 스킨
 *
 * 모달 외곽 스킨을 관리
 */
export default defineComponent({
	name: 'SgcModal',
	props: ['title', 'subTitle', 'toolbars', 'useRefresh', 'scrollMode', 'noPadding'],
	emits: ['sgcRefresh', 'sgcCloseModal'],
	components: {
		IonIcon,
		IonButtons,
		IonButton,
		IonContent,
		IonToolbar,
		IonTitle,
		IonHeader,
		IonFooter,
		IonGrid,
		IonRow,
		IonCol,
		IonRefresher,
		IonRefresherContent,
	},
	mounted() {
		this.onLoad();
	},
	watch: {
		title() {
			this.onLoad();
		},
		scrollMode() {
			this.onLoad();
		},
		pageDetail() {
			this.onLoad();
		},
	},
	setup() {
		return {
			Icon,
			utils,
		};
	},
	data(): {
		isScrolled: boolean;
		scrollX: boolean;
		scrollY: boolean;
		pageToolbars: ToolbarButtonVo[];
	} {
		return {
			isScrolled: false,
			scrollX: false,
			scrollY: true,
			pageToolbars: [],
		};
	},
	methods: {
		/** 화면 새로 고침 */
		doRefresh(event: any) {
			this.$emit('sgcRefresh', event);
			event.target.complete();
		},
		/** 모달 닫기 */
		doCloseModal() {
			this.$emit('sgcCloseModal');
		},
		/** 스크롤 END 이벤트 */
		scrollEnd() {
			((this.$refs?.modalContent as any)?.$el as any)?.getScrollElement().then((scrollElement: HTMLElement) => {
				if (scrollElement.scrollTop > 47) {
					this.isScrolled = true;
				} else {
					this.isScrolled = false;
				}
			});
		},
		/** 로드시 실행 */
		onLoad() {
			if (this.toolbars !== undefined && this.toolbars !== null) {
				this.pageToolbars = this.toolbars;
			} else {
				this.pageToolbars = [];
			}
			if (this.scrollMode) {
				switch (this.scrollMode) {
					case 'y':
						this.scrollY = true;
						this.scrollX = false;
						break;
					case 'x':
						this.scrollY = false;
						this.scrollX = true;
						break;
					case 'xy':
						this.scrollX = true;
						this.scrollY = true;
						break;
					case 'fix':
					case 'none':
						this.scrollX = false;
						this.scrollY = false;
						break;
				}
			}
		},
	},
});
</script>
<style scoped lang="scss">
ion-content {
	--background: var(--ion-background-color);
}
ion-header {
	ion-title {
		text-align: center;
		&.md {
			margin-left: 3em;
		}
		span {
			font-size: 0.7em;
		}
	}
	ion-toolbar {
		--opacity: 1;
	}
}

ion-footer {
	ion-button {
		height: 2.7em;
	}
}
</style>
