<template>
	<view class="t-gap" :class="customClass" :style="rootStyle"></view>
</template>

<script>
	export default {
		name: 't-gap',
		options: {
			addGlobalClass: true,
			virtualHost: true,
			styleIsolation: 'shared'
		},
		props: {
			/**
			 * 自定义根节点样式
			 */
			customStyle: {
				type: String,
				default: ''
			},
			/**
			 * 自定义根节点样式类
			 */
			customClass: {
				type: String,
				default: ''
			},
			/**
			 * 背景颜色
			 */
			bgColor: {
				type: String,
				default: 'transparent'
			},
			/**
			 * 高度
			 */
			height: {
				type: [Number, String],
				default: 15
			}
		},
		computed: {
			rootStyle() {
				const rootStyle = [];

				if (this.bgColor) {
					rootStyle.push(`background-color: ${this.bgColor};`);
				}

				if (this.height) {
					const height = typeof this.height === 'number' ? `${this.height}px` : this.height;
					rootStyle.push(`height: ${height};`);
				}

				return rootStyle.join(' ');
			}
		}
	}
</script>