<template>
	<div class="routes-list">
		<div class="route-item" v-for="item in list" @dblclick="switchRoute(item)">
			<span class="name">{{ item.name }}</span>
			<span class="path">{{ item.path }}</span>
		</div>
	</div>
</template>

<script>
let cache = [];
export default {
	name: "RouteTree",
	data: function () {
		return {
			list: []
		}
	},
	async mounted() {
		if (cache.length) {
			this.list = cache;
		} else {
			await this.$iframe.beReady;
			cache = this.list = await this.$iframe.post({event: 'getRoutes'});
		}
	},
	methods: {
	    switchRoute(item) {
		    this.$iframe.post({event: 'setRoute', data: item.path});
	    }
	},
}
</script>

<style scoped lang="scss">
.routes-list {
	text-align: left;
	padding: 10px 0;
	.route-item {
		padding: 0 10px;
		&:hover {
			background: #2c3e50;
		}
		.name {

		}
		.path {
			margin-left: 15px;
			opacity: 0.4;
		}
	}
}
</style>
