<template>
	<div class="home" :style="computedStyle">
		<div class="up" :style="computedUpStyle">
			<div class="up-left" v-if="ready">
				<SwitchBanner></SwitchBanner>
				<FileTree v-if="leftUpSelector === '文件'"></FileTree>
				<RouteTree v-if="leftUpSelector === '路由'"></RouteTree>
				<ComponentTree v-if="leftUpSelector === '组件'"></ComponentTree>
			</div>
			<div class="split-line-left-center"
			     v-if="config.up.children"
			     :style="{left: config.up.children.left.width+'%'}"
			     @mousedown="mousedown($event, 'left-center')"></div>
			<div class="up-center" v-show="ready">
				<VueContainer></VueContainer>
			</div>
			<div class="split-line-center-right"
			     v-if="config.up.children && ready"
			     :style="{right: config.up.children.right.width+'%'}"
			     @mousedown="mousedown($event, 'center-right')"></div>
			<tab-container class="up-right" id="top-right"></tab-container>
		</div>
		<div class="split-line-up-down"
		     v-if="ready"
		     :style="{top: config.up.height+'%'}"
		     @mousedown="mousedown($event, 'up-down')"
		></div>
		<tab-container class="down" id="bottom"></tab-container>
	</div>
</template>

<script>
import { components, BodyConfig } from './requires';
export default {
	name: 'ExtraHome',
	components: components,
	data: function () {
		return {
			ready: false,
			leftUpSelector: "文件",
			cursor: '',
			config: {
				up: {},
				down: {}
			}
		}
	},
	computed: {
		computedStyle() {
			const style = {};
			style.gridTemplateRows = `${this.config.up.height}% ${this.config.down.height}%`;
			style.cursor = this.cursor;
			return style;
		},
		computedUpStyle() {
			const style = {};
			const source = this.config.up.children;
			try {
				style.gridTemplateColumns = `${source.left.width}% ${source.center.width}% ${source.right.width}%`;
			} catch (e) {}
			return style;
		}
	},
	mounted() {
		this.config = BodyConfig;
		this.bus.$on('left-up-selector-change', this.leftUpSelectorChange);
		this.checkIframeReady();
	},
	methods: {
		async checkIframeReady() {
			setTimeout(() => {
				this.ready = true;
			}, 1000)
			await this.$iframe.beReady;
			this.ready = true;
			this.bus.$emit('iframe-ready');
		},
		mousedown(ev, type) {
			let beforeData = {};
			switch (type) {
				case "up-down": {
					this.cursor = 's-resize';
					beforeData = {
						up: this.config.up.height,
						down: this.config.down.height
					};
					break;
				}
				case "left-center": {
					this.cursor = 'w-resize';
					let child = this.config.up.children;
					beforeData = {
						left: child.left.width,
						center: child.center.width
					}
					break
				}
				case "center-right": {
					this.cursor = 'w-resize';
					let child = this.config.up.children;
					beforeData = {
						right: child.right.width,
						center: child.center.width
					}
				}
			}
			const calcHandler = event => {
				let delta = 0;
				switch (type) {
					case "up-down": {
						delta = (event.clientY - ev.clientY) / this.$el.clientHeight * 100;
						this.config.up.height = Math.min(Math.max(beforeData.up + delta, 0), 100);
						this.config.down.height = Math.min(Math.max(beforeData.down - delta, 0), 100);
						break;
					}
					case "left-center": {
						delta = (event.clientX - ev.clientX) / this.$el.clientWidth * 100;
						let child = this.config.up.children;
						child.left.width = Math.min(Math.max(beforeData.left + delta, 0), 100 - child.right.width);
						child.center.width = Math.min(Math.max(beforeData.center - delta, 0), 100 - child.right.width);
						break
					}
					case "center-right": {
						delta = (event.clientX - ev.clientX) / this.$el.clientWidth * 100;
						let child = this.config.up.children;
						child.right.width = Math.min(Math.max(beforeData.right - delta, 0), 100 - child.left.width);
						child.center.width = Math.min(Math.max(beforeData.center + delta, 0), 100 - child.left.width);
					}
				}
			}
			const overHandler = event => {
				this.cursor = '';
			    document.body.removeEventListener('mouseup', overHandler);
				document.body.removeEventListener('mousemove', calcHandler);
				this.saveConfigFile();
				this.bus.$emit('setIframeStatus');
			}
			document.body.addEventListener('mouseup', overHandler);
			document.body.addEventListener('mousemove', calcHandler);
		},
		saveConfigFile() {
			this.$emit('savefile', {
				type: 'editor',
				path: '/node_modules/@jspatrick/vue-cli-plugin-editor/src/layout/body.js',
				data: 'module.exports = ' + JSON.stringify(BodyConfig,null, '\t')
			});
		},
		leftUpSelectorChange (item) {
			this.leftUpSelector = item.name;
			if (this.leftUpSelector === '文件') {
				this.$iframe.post({
					event: 'setMode',
					data: 'component'
				});
			} else if(this.leftUpSelector === '路由') {
				this.$iframe.post({
					event: 'setMode',
					data: 'routes'
				});
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.home {
	height: calc(100% - 50px);
	display: grid;
	position: relative;
	.up {
		display: grid;
		position: relative;
		.up-left {
			height: 100%;
			overflow: hidden;
		}
		.up-center {
			position: relative;
		}
	}
	.split-line-up-down {
		position: absolute;
		width: 100%;
		height: 5px;
		cursor: s-resize;
		display: flex;
		align-items: center;
		z-index: 100;
		&:after {
			height: 1px;
			width: 100%;
			display: block;
			content: '';
			background: gray;
		}
	}
	.split-line-left-center {
		position: absolute;
		height: 100%;
		width: 5px;
		cursor: w-resize;
		display: flex;
		align-items: center;
		margin-left: -2.5px;
		z-index: 100;
		&:after {
			height: 100%;
			width: 1px;
			display: block;
			content: '';
			background: gray;
		}
	}
	.split-line-center-right {
		position: absolute;
		height: 100%;
		width: 5px;
		cursor: w-resize;
		display: flex;
		align-items: center;
		margin-right: -2.5px;
		z-index: 100;
		&:after {
			height: 100%;
			width: 1px;
			display: block;
			content: '';
			background: gray;
		}
	}
}
</style>
