<template>
	<div class="component-tree">
		<div class="line-holder"
		     :class="{selected: source.isCurrent}"
		     @click="switchComponent(source)"
		>
			<div class="inline" :style="{left}">
				<a-icon class="arrow"
				        @click.stop="source.open = !source.open"
				        :type="source.open ? 'down' : 'right'"
				        v-if="source.children.length" />
				&lt;
				<div class="name">{{ source.name }}</div>
				&gt;
			</div>
		</div>
		<div class="list" v-if="source.open">
			<ComponentTree v-for="item in source.children" :source="item" :indent="indent + 10"></ComponentTree>
		</div>
	</div>
</template>

<script>
import ComponentTree from './ComponentTree';
import { Icon } from 'ant-design-vue';
const IconFont = Icon.createFromIconfontCN({
	scriptUrl: '//at.alicdn.com/t/font_2664462_d3sbv3y85m4.js',
});
export default {
	name: "ComponentTree",
	components: {
		ComponentTree, IconFont
	},
	computed: {
		left() {
			let result = this.indent;
			if (!this.source.children.length) {
				result += 20;
			}
			return result + 'px'
		}
	},
	props: {
		source: Object,
		indent: {
			type: Number,
			default: 10
		}
	},
	methods: {
		switchComponent(component) {
			this.$iframe.post({event: 'changeComponent', data: component});
		}
	},
}
</script>

<style scoped lang="scss">
.component-tree {
	text-align: left;
	position: relative;
	overflow: hidden;
	.line-holder {
		position: relative;
		cursor: pointer;
		border-left: 2px solid transparent;
		&.selected {
			background: white(0.1);
			border-color: blue;
		}
	}
	.inline {
		position: relative;
		display: flex;
		font-size: 16px;
		align-items: center;
		.arrow {
			margin-right: 5px;
		}
		.name {
			color: #42b983;
		}
	}
}
</style>
