<template>
	<view class="searchPage-wrap">
		<!-- 搜索 -->
		<u-search shape="square" placeholder="请输入门店名称搜索" v-model="keyword" action-text="取消" @change="change" @search="search" @custom="custom"></u-search>
		<!-- 列表数据 -->
		<view class="listData-con">
			<view class="listData-item" v-for="(item, index) in list" :key="index" @click="goPage(item)">
				<view class="listData-item-l">
					<u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
					<text class="listData-item-l-name">{{item.name}}</text>
				</view>
				<view class="listData-item-r">
					<u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
				</view>
			</view>
			<u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="80" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword: '',  //  关键字
				list: [  //  数据列表
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
				],
				noDataText: '暂无数据',  //  数据异常提示
			}
		},
		methods: {
			//  用户点击右侧控件时触发
			custom(val){
				
			},
			//  输入框内容发生变化时触发
			change(val){
				let i = this.throttle(this.handle(), 1000)
				// console.log(i)
			},
			//  用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
			search(val){
				
			},
			// 节流throttle代码（时间戳+定时器）
			throttle(fn,delay){
			    let valid = true
			    return function() {
			       if(!valid){
			           //休息时间 暂不接客
			           return false 
			       }
			       // 工作时间，执行函数并且在间隔期内把状态位设为无效
			        valid = false
			        setTimeout(() => {
			            fn()
			            valid = true;
			        }, delay)
			    }
			},
			handle(){
				console.log(12)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.searchPage-wrap{
		padding: 20upx 30upx 0;
		.listData-con{
			.listData-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 0;
				border-bottom: 1upx dashed #f8f8f8;
				&-l{
					flex-grow: 1;
					padding-right: 10upx;
					position: relative;
					padding-left: 50upx;
					&-icon{
						vertical-align: sub;
						padding-right: 8upx;
						position: absolute;
						left: 0;
						top: -4upx;
					}
				}
				&-r{
					flex-shrink: 0;
				}
			}
		}
	}
</style>
