<template>
	<ion-list class="item-list ion-padding">
		<ion-button :disabled="dataList.length === 0" color="primary" expand="block" @click="clearLog()">
			<ion-icon slot="start" :icon="Icon.trashBin"></ion-icon>
			{{ $t('BTN_CLEAR') }}
		</ion-button>
		<ion-item v-for="(log, i) in dataList" :key="i" @click="toggleLog(log)">
			<ion-label>
				<h3>
					<ion-badge :color="log.type === 'error' ? 'danger' : 'primary'"> {{ log.type }} </ion-badge>
					{{ log.title }}
				</h3>
				<p :class="{ 'ion-text-wrap': log.showDetail }">{{ log.text }}</p>
			</ion-label>
		</ion-item>
	</ion-list>
</template>

<script lang="ts">
import { IonBadge, IonButton, IonIcon, IonItem, IonLabel, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';
import { ConsoleLogType, ConsoleLogVo, ILogerService, ListDataVo } from '../../services/common.interface';
import commonService from './../../services/common.service';
import Icon from './../../services/icon';

export default defineComponent({
	name: 'SgcConsole',
	components: {
		IonIcon,
		IonList,
		IonItem,
		IonLabel,
		IonButton,
		IonBadge,
	},
	mounted() {
		commonService.setLogger(this);
	},
	unmounted() {
		commonService.setLogger(null);
	},
	setup() {
		return {
			Icon,
		};
	},
	data(): ListDataVo<ConsoleLogVo> {
		return {
			dataList: [],
		};
	},
	methods: {
		/** 로그 설정 - 미사용 */
		setLogger(logger: ILogerService) {
			if (logger !== null) {
				commonService.openToast('MSG_SERVER_ERROR', null, null, null, 'warning');
			}
		},
		/** 로그 보이기 */
		consoleLog(type: ConsoleLogType, title: string, ...objs: any[]) {
			this.dataList.unshift({ type: type, title: title, datas: objs, text: objs?.join(', '), showDetail: false });
			if (this.dataList.length > 60) {
				this.dataList.pop();
			}
		},
		/** 로그 상세 보기 */
		toggleLog(log: ConsoleLogVo) {
			log.showDetail = !log.showDetail;
			if (log.showDetail) {
				// eslint-disable-next-line
				console.log(log.datas);
				alert(JSON.stringify(log.datas, null, '  '));
			}
		},
		/** 로그 삭제 하기 */
		clearLog() {
			this.dataList = [];
		},
	},
});
</script>
<style scoped lang="scss"></style>
