<template>
	<view class="uv-gap" :style="[gapStyle]"></view>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	/**
	 * gap 間隔槽
	 * @description 該組件壹般用於內容塊之間的用壹個灰色塊隔開的場景，方便用戶風格統壹，減少工作量
	 * @tutorial https://www.uvui.cn/components/gap.html
	 * @property {String}			bgColor			背景顏色 （默認 'transparent' ）
	 * @property {String | Number}	height			分割槽高度，單位px （默認 20 ）
	 * @property {String | Number}	marginTop		與前壹個組件的距離，單位px（ 默認 0 ）
	 * @property {String | Number}	marginBottom	與後壹個組件的距離，單位px （默認 0 ）
	 * @property {Object}			customStyle		定義需要用到的外部樣式
	 * 
	 * @example <uv-gap height="80" bg-color="#bbb"></uv-gap>
	 */
	export default {
		name: "uv-gap",
		mixins: [mpMixin, mixin,props],
		computed: {
			gapStyle() {
				const style = {
					backgroundColor: this.bgColor,
					height: this.$uv.addUnit(this.height),
					marginTop: this.$uv.addUnit(this.marginTop),
					marginBottom: this.$uv.addUnit(this.marginBottom),
				}
				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
			}
		}
	};
</script>
