<template>
	<ion-header :translucent="true">
		<ion-toolbar>
			<ion-buttons slot="start" :class="{ 'detail-page': pageDetail }">
				<ion-menu-button color="primary" :autoHide="true"></ion-menu-button>
				<ion-back-button v-if="pageDetail" color="primary"></ion-back-button>
			</ion-buttons>
			<ion-title v-if="title">{{ $t(title) }}</ion-title>
			<ion-title v-if="!title" class="logo-only"
				><img src="../../assets/SGC.svg" /> <span>{{ appConf.appName }}</span></ion-title
			>
			<ion-buttons slot="end" v-if="title">
				<ion-button color="primary" routerLink="/">
					<ion-icon slot="icon-only" :icon="Icon.homeOutline"></ion-icon>
				</ion-button>
			</ion-buttons>
		</ion-toolbar>
	</ion-header>
	<ion-content :fullscreen="true" :scroll-events="true" @ionScrollEnd="scrollEnd()" class="ion-padding" :class="{ 'content-scrolled': isScrolled }" ref="mainContent">
		<ion-breadcrumbs slot="fixed" :maxItems="4" v-if="pageBreadcrumbs && pageBreadcrumbs.length > 0">
			<ion-breadcrumb v-for="(breadcrumb, i) in pageBreadcrumbs" :key="i" :routerLink="breadcrumb.href">
				<ion-icon v-if="breadcrumb.icon" slot="start" :icon="breadcrumb.icon"></ion-icon>
				<span>{{ $t(breadcrumb.name) }}</span>
			</ion-breadcrumb>
		</ion-breadcrumbs>
		<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" v-if="pageToolbars && pageToolbars.length > 0">
		<ion-toolbar>
			<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-row>
			</ion-grid>
		</ion-toolbar>
	</ion-footer>
</template>

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

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

/**
 * 공통 - 페이지 스킨
 *
 * 페이지 스킨을 관리
 */
export default defineComponent({
	name: 'SgcPage',
	props: ['title', 'toolbars', 'pageDetail', 'useRefresh'],
	emits: ['sgcRefresh'],
	components: {
		IonIcon,
		IonBackButton,
		IonMenuButton,
		IonButtons,
		IonButton,
		IonContent,
		IonToolbar,
		IonTitle,
		IonHeader,
		IonFooter,
		IonGrid,
		IonRow,
		IonCol,
		IonBreadcrumbs,
		IonBreadcrumb,
		IonRefresher,
		IonRefresherContent,
	},
	mounted() {
		this.onLoad();
	},
	watch: {
		title() {
			this.onLoad();
		},
		pageDetail() {
			this.onLoad();
		},
	},
	setup() {
		return {
			Icon,
		};
	},
	data(): {
		isScrolled: boolean;
		appConf: AppConfVo;
		pageBreadcrumbs: {
			name: string;
			href?: string;
			icon?: string;
		}[];
		pageToolbars: ToolbarButtonVo[];
	} {
		return {
			isScrolled: false,
			appConf: shared.getAppConf(),
			pageBreadcrumbs: [],
			pageToolbars: [],
		};
	},
	methods: {
		/** 화면 새로 고침 */
		doRefresh(event: any) {
			this.$emit('sgcRefresh', event);
			event.target.complete();
		},
		/** 스크롤 END 이벤트 */
		scrollEnd() {
			((this.$refs?.mainContent 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 = [];
			}
			this.pageBreadcrumbs = [];
			if (this.title !== undefined && this.title !== null && this.title !== '') {
				this.pageBreadcrumbs.push({
					name: 'TIT_HOME',
					href: '/home',
					icon: Icon.home,
				});
				switch (this.title) {
					case 'TIT_DEPTING':
					case 'TIT_DEPTINGVIEW':
					case 'TIT_DEPTDONE':
					case 'TIT_DEPTDONEVIEW':
						this.pageBreadcrumbs.push({
							name: 'TIT_AS_PAGE',
							href: '/as',
						});
						break;
					case 'TIT_DEPTMANG':
					case 'TIT_DEPTMANGVIEW':
					case 'TIT_DEPTQUE':
					case 'TIT_DEPTQUEVIEW':
					case 'TIT_ROOMREV':
					case 'TIT_ROOMAPP':
					case 'TIT_ADDRESS':
						this.pageBreadcrumbs.push({
							name: 'TIT_PO_PAGE',
							href: '/po',
						});
						break;
					case 'TIT_LOGIN':
						this.pageBreadcrumbs.push({
							name: 'TIT_PO_PAGE',
							href: '/login',
						});
						break;
				}
				switch (this.title) {
					case 'TIT_DEPTING':
					case 'TIT_DEPTDONE':
					case 'TIT_DEPTMANG':
					case 'TIT_DEPTQUE':
					case 'TIT_ROOMREV':
					case 'TIT_ROOMAPP':
					case 'TIT_ADDRESS':
						this.pageBreadcrumbs.push({
							name: this.title,
						});
						break;
					case 'TIT_DEPTINGVIEW':
						this.pageBreadcrumbs.push({
							name: 'TIT_DEPTING',
							href: '/as/defting',
						});
						break;
					case 'TIT_DEPTDONEVIEW':
						this.pageBreadcrumbs.push({
							name: 'TIT_DEPTDONE',
							href: '/as/deftdone',
						});
						break;
					case 'TIT_DEPTMANGVIEW':
						this.pageBreadcrumbs.push({
							name: 'TIT_DEPTMANG',
							href: '/po/deftmang',
						});
						break;
					case 'TIT_DEPTQUEVIEW':
						this.pageBreadcrumbs.push({
							name: 'TIT_DEPTQUE',
							href: '/po/deftque',
						});
						break;
				}
				switch (this.title) {
					case 'TIT_DEPTINGVIEW':
					case 'TIT_DEPTDONEVIEW':
					case 'TIT_DEPTMANGVIEW':
					case 'TIT_DEPTQUEVIEW':
						this.pageBreadcrumbs.push({
							name: this.title,
						});
						break;
				}
			}
		},
	},
});
</script>
<style scoped lang="scss">
ion-content {
	--background: var(--ion-background-color);

	ion-breadcrumbs {
		width: 100%;
		top: -4em;
		transition: top 1s;
		background-color: var(--background);
		border-bottom: var(--border);
		flex-wrap: nowrap;
		span {
			font-size: 0.8em !important;
		}
		span,
		ion-breadcrumb {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding-inline: unset;
		}
	}

	&.content-scrolled {
		ion-breadcrumbs {
			top: 0;
		}
	}
}

ion-header {
	ion-title.logo-only {
		padding-right: 68px;
		img {
			max-height: 1.8rem;
			vertical-align: middle;
		}
		span {
			vertical-align: middle;
			display: inline-block;
			margin-top: 0.2em;
		}
	}
	ion-toolbar {
		--opacity: 1;
	}
}

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