<template>
	<ciy-header title="ciy-gesture组件"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">手势包裹组件</view>
			<view class="content">
				<view class="tip">
					单指滑动，感知四个方向。<br />
				</view>
			</view>
		</view>
		<ciy-gesture :pxlen="props.pxlen" move @tomove="move" @start="evt($event, 'start')" @end="evt($event, 'end')"
			@todown="evt($event, 'todown')" @toup="evt($event, 'toup')" @toright="evt($event, 'toright')" @toleft="evt($event, 'toleft')">
			<view style="height:10em;margin:1em;padding:1em;background: var(--bg1);">滑动区域</view>
		</ciy-gesture>

		<view class="ciy-card">
			<view class="content">
				<view>move: {{mv}}</view>
				<view>event: {{event}}</view>
				<view>eventdata: {{eventdata}}</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">属性</view>
			<view class="content">
				<view class="prp">move</view>
				<view class="tip">
					是否触发移动事件。<br />
					默认 false
				</view>
				<view style="margin:0 1em;">
					<ciy-switch v-model="props.move"></ciy-switch>
				</view>
				<view class="hr"></view>
				<view class="prp">pxlen</view>
				<view class="tip">
					滑动距离阈值，单位px。
				</view>
				<ciy-input bb v-model="props.pxlen" style="width:4em;"></ciy-input>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">方法</view>
			<view class="content">
				无
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">事件</view>
			<view class="content">
				<view class="evt">@start</view>
				<view class="tip">
					touchstart触发<br />
					第一个手指坐标
				</view>
				<view class="hr"></view>
				<view class="evt">@toleft,toright,todown,toup,end</view>
				<view class="tip">
					touchend触发<br />
					某个方向超过pxlen阈值，则触发to*<br />
					都未超过pxlen阈值，则触发end<br />
				</view>
				<view class="hr"></view>
				<view class="evt">@tomove</view>
				<view class="tip">
					touchmove触发<br />
					相对开始的x，y
				</view>
				<view class="hr"></view>
				<view class="log" v-for="(item, index) in eventlog" :key="index">
					<text class="code">{{eventlog.length - index}}</text>
					{{item}}
				</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				props:{
					pxlen: 40
				},
				event: '',
				eventdata:'',
				mv: {}
			}
		},
		onLoad() {},
		methods: {
			move(e) {
				this.mv = e;
			},
			evt(e,act) {
				this.eventdata = e;
				this.event = act;
			}
		}
	}
</script>