<!-- 返回页面顶部 buy 缪启峙 
	引入 返回顶部组件如:
	<vGoTop :pageScroll ="PageScroll" goTopStyle="bottom:20px;right:20px;" :showTopHeight ="可不填默认为 300"/>
	pageScroll  // 页面滑动的高度,
	goTopStyle  // 返回按钮与底部,左右的距离,
	showTopHeight //  滑动高度>按钮出现高度时出现返回按钮  ！
-->

<template>
	<view>
		<view class="go-top" :class="{'top-show':isShowTop}" @click="goTop" :style="goTopStyle">
			<view class="iconfont icon-top"></view>
			<!-- <image src="data:image/png;base64,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"></image> -->
			<!-- <text>顶部</text> -->
		</view>
	</view>
</template>

<script>
	var scorllTimert = null;
	export default {
		data() {
			return {
				isShowTop: false
			};
		},
		methods: {
			goTop(e) {
				if (this.topType === "page") {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				} else if (this.topType === "view") {
					this.$emit("clickBtn");
				}
			},
			//防止滚动触发多次函数
			debounce(wait, immediate) {
				var that = this;
				return function() {
					// 每次触发 scroll 时先清除定时器
					clearTimeout(scorllTimert);
					scorllTimert = setTimeout(function() {
						that.handler(immediate);
					}, wait);
				}();
			},
			handler(scrollHeight) {
				this.isShowTop = scrollHeight > this.showTopHeight;
			},
		},
		watch: {
			pageScroll(value) {
				this.debounce(200, value)
			}
		},
		props: {
			pageScroll: Number,
			showTopHeight: {
				type: Number,
				default: 300
			},
			topType: {
				type: String,
				default: "page"
			},
			goTopStyle: String
		}
	}
</script>

<style>
	.go-top {
		position: fixed;
		bottom: 156upx;
		right: 24upx;
		width: 76upx;
		height: 76upx;
		border-radius: 50%;
		overflow: hidden;
		text-align: center;
		z-index: 16;
		transform: translateY(80upx);
		opacity: 0;
		transition: all .5s ease;
		background: rgba(255, 255, 255, 0.7);
		border: 1upx solid #eee;
	}

	.go-top.top-show {
		transform: translateY(0);
		opacity: 1;
	}

	.go-top .iconfont {
		position: absolute;
		top: 0;
		left: 0;
		width: 76upx;
		height: 76upx;
		line-height: 76upx;
		z-index: 1;
	}

	/* .go-top text {
		display: inline-block;
		color: #333;
		font-size: 22upx;
		margin-top: 38upx;
		position: relative;
		z-index: 10;
	} */
</style>
