<template>
	<view class="site-wrapper">
		<!-- 筛选框start -->
		<view class="cu-bar search bg-gray filter-section">
			<view class="search-form round bg-white">
				<text class="cuIcon-search"></text>
				<input class="" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="请输入站点名称"
				 confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-blue round">查询</button>
			</view>
		</view>
		<!-- 筛选框end -->
		
		<!-- 站点列表start -->
		<view class="site-items">
			<view class="cu-list menu-avatar">
				<view class="cu-item"  :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in 12" :key="index"
					 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar round lg" style="background-image: url(../../static/site-icon.png);"></view>
					<view class="content" @tap="goAlarmingList">
						<view class="text-grey site-tit">测试站点一</view>
					</view>
					<view class="nav-right">
						<view class="text-grey text-xs">
							<image src="../../static/nav-icon.png" style="width:25rpx;height:25rpx"></image>
						</view>
					</view>
					<view class="move">
						<view class="bg-grey">编辑</view>
						<view class="bg-red">删除</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 站点列表end -->
		
		<!-- 新增按钮start -->
		<view class="plus">
			<image src="../../static/plus.png" style="width:125rpx;height:125rpx"></image>
		</view>
		<!-- 新增按钮end -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
		
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		methods: {
			
			// 页面跳转
			goAlarmingList() {
				uni.navigateTo({
					url: '/pages/alarmingList/alarmingList',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
		
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
		
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
		
	}
</script>

<style>
	
</style>
