<template>
	<view @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
		<slot></slot>
	</view>
</template>

<style scoped>
</style>
<script>
	export default {
		emits: ['start', 'toleft', 'toright', 'todown', 'toup', 'end'],
		props: {
			pxlen: { //滑动距离超过pxlen px生效
				type: Number,
				default: 40
			},
			move: { //产生移动过程事件
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		watch: {},
		computed: {},
		mounted() {},
		methods: {
			touchstart(e) {
				this.$emit('start', e.touches[0]);
				this.startx = e.touches[0].pageX;
				this.starty = e.touches[0].pageY;
				this.movex = e.touches[0].pageX;
				this.movey = e.touches[0].pageY;
				this.st = true;
			},
			touchend(e) {
				this.st = false;
				var x = this.movex - this.startx;
				var y = this.movey - this.starty;
				var needend = true;
				if (Math.abs(x) > this.pxlen) {
					if (x < 0)
						this.$emit('toleft', {
							x,
							y
						});
					else
						this.$emit('toright', {
							x,
							y
						});
					needend = false;
				}
				if (Math.abs(y) > this.pxlen) {
					if (y > 0)
						this.$emit('todown', {
							x,
							y
						});
					else
						this.$emit('toup', {
							x,
							y
						});
					needend = false;
				}
				if (needend) {
					this.$emit('end', {
						x,
						y
					});
				}
			},
			touchmove(e) {
				if (!this.st)
					return;
				this.movex = e.touches[0].pageX;
				this.movey = e.touches[0].pageY;
				if (!this.move)
					return;
				this.$emit('tomove', {
					x: this.movex - this.startx,
					y: this.movey - this.starty
				});
			}
		}
	}
</script>