<template>
	<view class="tm-pullBottom">
		<scroll-view 
		class="tm-pullBottom-sroll"
		:refresher-enabled="disabled"
		:refresher-threshold="pullY"
		:refresher-triggered="isRefresh"
		:scroll-y="true"
		refresher-default-style="none"
		:lower-threshold="bottomY"
		@scrolltolower="pullBottom"
		@refresherpulling="onPulling"
		@refresherrefresh="onRefresh" 
		@refresherrestore="onRestore"
		@refresherabort="onAbort"
		:style="{
			height:activeHeight+'px'
		}">
			<view v-if="bottomLoadding==true" class="tm-pullBottom-top flex-center flex-col">
				<view v-if="loading">
					
					<view>
						<slot name="pull" v-if="isPullDown==true&&showScrollPic">
							<view  class="tm-pullBottom-top-icon flex-center pull"
							>
								<tm-icons :color="color" name="icon-long-arrow-up"></tm-icons>
							</view>
							<view class="flex-center tm-pullBottom-top-text text-size-n"
							:class="[`text-${color}`]">继续下拉刷新</view>
						</slot>
						<slot name="pullReresh" v-if="isPullDown==false&&showScrollPic">
							<view  class="tm-pullBottom-top-icon flex-center "
							>
								<tm-icons :color="color" name="icon-long-arrow-up"></tm-icons>
							</view>
							<view class="flex-center tm-pullBottom-top-text text-size-n"
							:class="[`text-${color}`]" >松开刷新</view>
						</slot>
					</view>
					<tm-loadding v-if="showScrollPic==false" ></tm-loadding>
				</view>
			</view>
			<slot name="default"></slot>
			<tm-loadding v-if="bottomLoadding==false&&loading" ></tm-loadding>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * 上拉触底刷新
	 * @property {String|Number} height = [] 默认0，默认0使用父高度。
	 * @property {Number} pullY = [] 默认80，下拉多长的距离执行刷新。
	 * @property {Number} bottomY = [] 默认0，离底部多高度多少执行加载
	 * @property {String} color = [] 默认primary，主题色。
	 * @property {Boolean} loading = [] 默认 false，，需要loading.sync执行双向绑定，加载状态，true，加载中。false加载完成。
	 * @property {Boolean} disabled = [] 默认 true，，是否启用下拉刷新，不影响触底刷新功能。
	 * @property {Boolean} finish = [] 默认 false，是否数据没有了。如果为true，触底后将不会触发刷新操作。
	 * @property {Function} refresh 当下拉或者触底时，触发此函数。参数e=pull为下拉刷新，bottom为触底刷新。
	 * @example <tm-pullBottom :loading.sync="loading" @refresh="getdata"></tm-pullBottom>
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmLoadding from "@/tm-vuetify/components/tm-loadding/tm-loadding.vue"
	
	export default {
		components:{tmIcons,tmLoadding},
		name:"tm-pullBottom",
		props:{
			// 高度，默认为0时，自动使用父组件的高度.
			height: {
				type: String | Number,
				default: 0
			},
			pullY:{
				type: Number,
				default: 80
			},
			bottomY:{
				type: Number,
				default: 0
			},
			color: {
				type: String,
				default: 'primary'
			},
			loading:{
				type:Boolean,
				default:false
			},
			// 是否没有更多数据了。
			finish:{
				type:Boolean,
				default:false
			},
			disabled:{
				type:Boolean,
				default:true
			}
			
		},
		watch:{
			loading:function(newval){
				
				if(newval==false){
					// 结束操作。
					this.susscess();
				}
			},
			
		},
		data() {
			return {
				activeHeight: 0,
				isRefresh:false,//是否触发了下拉刷新区域。
				freshing:false,//是否刷新 中。
				showScrollPic:false,//是否拖动了下拉区域，显示图标。停止不显示。
				isPullDown:false,//是否下正确的下拉刷新区域。
				bottomLoadding:true,//当前是底部还是顶部刷新操作。false为底部。true为顶部。
			};
		},
		computed:{

		},
		mounted() {
			this.guid = uni.$tm.guid();
			let t = this;
			this.$nextTick(async function() {
				this.activeHeight = uni.upx2px(this.height);
				if (!this.activeHeight) {
					let wsz = await this.$Querey(".tm-pullBottom",this).catch(e=>{})
					this.activeHeight = wsz[0].height||150;
				}
				if(this.loading===true){
					this.$emit('update:loading',false)
				}
			});
		},
		methods: {
			onRefresh(e) {
				let t = this;
				this.isRefresh = true;
				setTimeout(function() {
					t.isRefresh = false;
					t.showScrollPic = false;
					if(t.freshing==true) return;
					t.freshing = true;
					t.pullChangeOk();
				}, 200);
				
			},
			onPulling(e){
				
				if(this.loading === false){
					
					this.$emit('update:loading',true)
				}
				this.bottomLoadding = true;
				this.showScrollPic = true;//显示刷新 图标。
				let dy = e.target.dy || 0
				// #ifdef H5
					dy = e.target.deltaY;
				// #endif
				
				if(dy < this. pullY){
					this.isPullDown = true;
				}else{
					this.isPullDown = false;
				}
			},
			onAbort(e){
				this.$emit('update:loading',false)
				this.showScrollPic = false;//显示刷新 图标。
				
			},
			onRestore(e){
				this.isRefresh = 'restore'; // 需要重置
				
			},
			// 结束操作。
			susscess(){
				this.freshing = false;
				this.$emit('update:loading',false)
				
			},
			pullChangeOk(){
				
				this.$emit("refresh",'pull')
			},
			// 触底加载中。
			pullBottom(){
				if(this.finish) return;
				this.bottomLoadding = false;
				if(this.loading === false){
					this.$emit('update:loading',true)
					this.$emit("refresh",'bottom')
				}
				
			},
		},
	}
</script>

<style lang="scss" scoped>
.tm-pullBottom{
	height: 100%;
	.tm-pullBottom-sroll{
		position: relative;
		.tm-pullBottom-top{
			width: 100%;
			position: relative;
			
			.tm-pullBottom-top-icon{
				transition: all 0.5s;
				&.pull{
					transform: rotate(180deg);
				}
			}
		}
	}
	
}
</style>
<html>
<head><title>PANIC: session(release): write data/sessions/d/0/d0e70a8dfea1407d: no space left on device</title>
<meta charset="utf-8" />
<style type="text/css">
html, body {
	font-family: "Roboto", sans-serif;
	color: #333333;
	background-color: #ea5343;
	margin: 0px;
}
h1 {
	color: #d04526;
	background-color: #ffffff;
	padding: 20px;
	border-bottom: 1px dashed #2b3848;
}
pre {
	margin: 20px;
	padding: 20px;
	border: 2px solid #2b3848;
	background-color: #ffffff;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>
</head><body>
<h1>PANIC</h1>
<pre style="font-weight: bold;">session(release): write data/sessions/d/0/d0e70a8dfea1407d: no space left on device</pre>
<pre>/root/go/pkg/mod/github.com/go-macaron/session@v0.0.0-20190805070824-1a3cdc6f5659/session.go:199 (0x8bc0f8)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:81 (0x83623b)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:115 (0x8473a6)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/recovery.go:161 (0x84739d)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/logger.go:40 (0x839a24)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:187 (0x8412dd)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:304 (0x8423ec)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/macaron.go:218 (0x83adde)
/usr/local/btgo/src/net/http/server.go:2936 (0x7b23b5)
	serverHandler.ServeHTTP: handler.ServeHTTP(rw, req)
/usr/local/btgo/src/net/http/server.go:1995 (0x7add91)
	(*conn).serve: serverHandler{c.server}.ServeHTTP(w, w.req)
/usr/local/btgo/src/runtime/asm_amd64.s:1598 (0x47e160)
	goexit: BYTE	$0x90	// NOP
</pre>
</body>
</html>