<template>
	<el-dialog :title="$t('Events details')" width="70%" :visible.sync="visible"
	           :close-on-click-modal="false"
	           :append-to-body="true"
	           custom-class="events-details-dialog"
	>
		<el-scrollbar v-if="meta" class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
			<el-collapse class="collapse">
				<el-collapse-item v-for="(group, groupName) in meta.events" :key="groupName" :title="$t('eventGroup')[groupName]" :name="groupName">
					<el-collapse-item class="group" v-for="(item, key) in group" :key="key" :title="key + (item.alias ? ` (${item.alias})` : '')" :name="key">
						<div class="data-item" v-for="(alias, field)  of item.data">
							<el-tag size="small" type="primary">{{field}}</el-tag>
							<el-tag size="small" type="success">{{alias}}</el-tag>
						</div>
					</el-collapse-item>
				</el-collapse-item>
			</el-collapse>
		</el-scrollbar>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		name: "EventsDetailsDialog",
		data() {
			return {
				visible: false,
				meta: null,
			}
		},
		methods: {
			show(meta) {
				this.meta = meta;
				this.visible = true;
			},
			onClose() {
				this.visible = false;
			},
		}
	}
</script>

<style scoped>

</style>