<template>
	<view>
		<view class="ui-fixed" :class="{'fixed-top':position=='top','fixed-bottom':position=='bottom'}"
			:style="{zIndex:zIndex}">
			<slot></slot>
		</view>
		<view :style="{height:height+'px'}"></view>
	</view>
</template>

<script>
	export default {
		name: 'fixed',
		props: {
			position: {
				type: [String],
				default () {
					return 'top'
				}
			},
			zIndex: {
				type: Number,
				default () {
					return 999
				}
			},
			refresh: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowWidth * 100 / 750
			}
		},
		mounted() {
			this.setHeight();
		},
		onReady() {
			this.setHeight();
		},
		watch: {
			refresh(val) {
				console.log(val, "=======val")
				if (val) return
				this.setHeight()
			},
		},
		methods: {
			setHeight() {
				var _this = this;
				var query = uni.createSelectorQuery().in(this);
				query.select('.ui-fixed').boundingClientRect(function(res) {
					_this.height = res.height;
				}).exec();
			}
		},
	}
</script>


<style>
	.ui-fixed {
		position: fixed;
		left: 0;
		width: 100%;
	}

	.fixed-top {
		top: 0;
	}

	.fixed-bottom {
		bottom: 0;
	}
</style>
