<template>
	<div ref="content" class="_sd-dock-container">
		<slot />
	</div>
</template>

<script>
export default {
	name: 'SdDockContainer',
	mounted() {
		this.redraw();
	},
	updated() {
		this.redraw();
	},
	methods: {
		redraw() {
			let top = 0;
			let left = 0;
			let bottom = 0;
			let right = 0;

			const docks = this.$children.filter(
				child => child.$options.name === 'SdDock',
			);
			for (const dock of docks) {
				if (dock.position === 'top') {
					Object.assign(dock.$refs['content'].style, {
						top: top + 'px',
						bottom: '',
						left: left + 'px',
						right: right + 'px',
					});
					top += dock.$refs['content'].offsetHeight;
				} else if (dock.position === 'bottom') {
					Object.assign(dock.$refs['content'].style, {
						top: '',
						bottom: bottom + 'px',
						left: left + 'px',
						right: right + 'px',
					});
					bottom += dock.$refs['content'].offsetHeight;
				} else if (dock.position === 'left') {
					Object.assign(dock.$refs['content'].style, {
						top: top + 'px',
						bottom: bottom + 'px',
						left: left + 'px',
						right: '',
					});
					left += dock.$refs['content'].offsetWidth;
				} else {
					// right
					Object.assign(dock.$refs['content'].style, {
						top: top + 'px',
						bottom: bottom + 'px',
						left: '',
						right: right + 'px',
					});
					right += dock.$refs['content'].offsetWidth;
				}
			}

			Object.assign(this.$refs['content'].style, {
				paddingTop: top + 'px',
				paddingBottom: bottom + 'px',
				paddingRight: right + 'px',
				paddingLeft: left + 'px',
			});
		},
	},
};
</script>

<style scoped lang="scss">
._sd-dock-container {
	position: relative;
	width: 100%;
	height: 100%;
}
</style>
