<template>
	<ion-list v-if="loadStatus === 'loading'" class="item-list">
		<ion-item v-for="(item, index) in pageItems" :key="index">
			<ion-thumbnail slot="start">
				<ion-skeleton-text :animated="true"></ion-skeleton-text>
			</ion-thumbnail>
			<ion-label>
				<h3>
					<ion-skeleton-text :animated="true" style="width: 80%"> {{ item }} . ~~~~~</ion-skeleton-text>
				</h3>
				<p>
					<ion-skeleton-text :animated="true" style="width: 60%"></ion-skeleton-text>
				</p>
				<p>
					<ion-skeleton-text :animated="true" style="width: 30%"></ion-skeleton-text>
				</p>
			</ion-label>
		</ion-item>
	</ion-list>
	<ion-list v-else-if="loadStatus === 'nodata'" class="item-list">
		<ion-item>
			<ion-label class="ion-text-center">
				<h3>
					<ion-icon :icon="Icon.warningOutline"></ion-icon>
					{{ $t('MSG_NODATA') }}
				</h3>
			</ion-label>
		</ion-item>
	</ion-list>
	<ion-list v-else-if="loadStatus === 'ready'" class="item-list">
		<ion-item>
			<ion-label class="ion-text-center">
				<h3>
					<ion-icon :icon="Icon.search"></ion-icon>
					{{ $t('MSG_SEARCH_READY') }}
				</h3>
			</ion-label>
		</ion-item>
	</ion-list>
	<ion-list v-else-if="loadStatus === 'error'" class="item-list">
		<ion-item>
			<ion-label>
				<h3>
					{{ $t('TIT_ERROR') }}
				</h3>
				<p class="ion-text-wrap">
					{{ $t('MSG_ERROR') }}
				</p>
			</ion-label>
		</ion-item>
	</ion-list>
	<slot v-else></slot>
	<div slot="fixed" v-if="loadStatus === 'submit'" class="submit-layer">
		<ion-spinner name="crescent"></ion-spinner>
	</div>
</template>

<script lang="ts">
import { IonItem, IonLabel, IonList, IonSkeletonText, IonSpinner, IonThumbnail, IonIcon } from '@ionic/vue';
import { defineComponent } from 'vue';

import Icon from './../../services/icon';

/**
 * 공통 - 데이타 로딩 관리
 *
 * 데이타 로드 상테를 관리
 */
export default defineComponent({
	name: 'SgcLoading',
	components: {
		IonThumbnail,
		IonItem,
		IonLabel,
		IonList,
		IonIcon,
		IonSkeletonText,
		IonSpinner,
	},
	props: ['loadStatus', 'loadType'],
	setup() {
		return {
			Icon,
		};
	},
	data() {
		const pageItems = [];
		switch (this.loadType) {
			case 'list':
				for (var i = 0; i < 5; i++) {
					pageItems.push(i);
				}
				break;
			case 'view':
			case 'write':
				pageItems.push(0, 1);
				break;
		}
		return {
			pageItems: pageItems,
		};
	},
});
</script>
<style scoped lang="scss">
div.submit-layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(var(--ion-color-medium-rgb), 0.3);

	ion-spinner {
		width: 5rem;
		height: 5rem;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

ion-label.ion-text-center {
	h3 {
		margin-top: 1em;
		margin-bottom: 1em;
		ion-icon {
			vertical-align: middle;
			font-size: 2em;
		}
	}
}
</style>
