<template>
	<div class="component-tree">
		<div class="item-container" v-for="item in list" @mousedown.stop="handleDrag($event, item)">
			<img :src="item.preview" :style="{width: item.width + 'px', height: item.height + 'px'}" alt="">
			<div class="item">
				<div class="name">{{ item.name }}</div>
				<div class="path">{{ item.path }}</div>
			</div>
		</div>
		<div class="fake-node item-container" :style="recordStyle" v-if="record">
			<img :src="record.preview" :style="{width: record.width + 'px', height: record.height + 'px'}" alt="">
			<div class="item">
				<div class="name">{{ record.name }}</div>
				<div class="path">{{ record.path }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { randomId } from "@/util/util";

export default {
	name: "ComponentTree",
	data: function () {
		return {
			record: null,
			list: [],
			deltaBetweenScreenAndClient: null,
			recordPosition: {
				left: 0,
				top: 0,
			}
		}
	},
	computed: {
		recordStyle() {
			return {
				left: this.recordPosition.left + 'px',
				top: this.recordPosition.top + 'px'
			}
		},
		iframeClientOffset() {
			return this.$store.state.iframeClientOffset
		}
	},
	mounted() {
		this.getComponents();
		this.$iframe.on('setComponentPreviewImage', this.setComponentPreviewImage)
		this.$iframe.on('dropComponent', this.handleDrop)
		this.$iframe.on('moveComponent', this.handleMove)
		this.$iframe.on('injectComponent', this.handleInject)
	},
	methods: {
		getComponents() {
			this.axios({
				url: window.api + '/api/AnalysisVueComponent',
				method: 'post',
			}).then(data => {
				data = data.data;
				window.d = data[0].ast.script;
				this.list = data.filter(item => item.isComponent).map(item => {
					return {
						name: item.name,
						path: item.relative,
						preview: null,
						extra: item.packagingAttributes,
						id: randomId(5)
					}
				});
				this.getImageData();
			});
		},
		getImageData() {
			this.$iframe.post({
				event: 'getComponentPreviewImage',
				data: this.list
			});
		},
		setComponentPreviewImage(data) {
			this.list = data;
		},
		handleDrag(e, item) {
			this.bus.$emit('setIframeStatus');
			this.offset = {
				x: e.offsetX,
				y: e.offsetY
			}
			this.handleMove(e);
			this.record = item;
			this.$iframe.post({
				event: 'dragComponent',
				data: item
			});
			document.addEventListener('mousemove', this.handleMove);
			document.addEventListener('mouseup', this.handleDrop);
		},
		handleMove(e) {
			if (!this.deltaBetweenScreenAndClient) {
				this.deltaBetweenScreenAndClient = {
					deltaX: e.screenX - e.clientX,
					deltaY: e.screenY - e.clientY
				}
			} else {
				this.recordPosition = {
					left: e.screenX - this.offset.x - this.deltaBetweenScreenAndClient.deltaX,
					top: e.screenY - this.offset.y - this.deltaBetweenScreenAndClient.deltaY,
				}
			}
		},
		handleDrop(e) {
			this.record = null;
			if (e) {
				this.$iframe.post({event: 'dropComponent',});
			}
			document.removeEventListener('mousemove', this.handleMove);
			document.removeEventListener('mouseup', this.handleDrop);
		},
		handleInject(data) {
			this.axios({
				url: window.api + '/api/generateImportComponentCode',
				method: 'post',
				data,
			}).then(data => {
				data = data.data;
				console.log(data);
			})
		}
	},
}
</script>

<style scoped lang="scss">
.component-tree {
	text-align: left;
	.item-container {
		min-height: 80px;
		background: white(0.05);
		margin-bottom: 5px;
		padding: 10px 20px;
		padding-left: 10px;
		border-left: 10px solid #42b983;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.item {
			position: absolute;
		}
		.name,.path {
			position: relative;
			opacity: 0;
			transition: all .4s;
			color: white;
			text-shadow: getFontShadow(black, 1px);
		}
		&:hover {
			img {
				opacity: 0.2;
			}
			& .name, & .path {
				opacity: 1;
			}
		}
		img {
			position: relative;
			object-fit: contain;
			width: 100%;
			height: 100%;
			pointer-events: none;
			transition: all .4s;
		}
		& *{
			pointer-events: none;
		}
	}
	.fake-node {
		position: fixed;
		pointer-events: none;
		z-index: 10;
	}
}
</style>
