<!-- 搜索 -->
<template>
	<view class="search">
		<view class="search-area">
			<u-search
				placeholder="请输入关键字" 
				v-model="keyword"
				bgColor="#fff"
				height="40"
				:actionStyle="{
					fontSize: '16px',
					color: '#000',
					fontWeight: '600'
				}"
				clearabled
				@custom="search"
				@search="search"
			></u-search>
		</view>
		
		<view class="event-area">
			<EventList :list="eventList"/>
		</view>
		
		<!-- 加载更多 -->
		<u-loadmore :status="status" loadmoreText=" "/>
		
		<!-- 返回顶部 -->
		<u-back-top 
			:scroll-top="scrollTop" 
			icon="arrow-up" 
			duration="200"
		></u-back-top>
		
		<u-empty
			v-if="isEmpty"
			mode="search"
			text="暂无结果"
			:show="true"
			iconColor="#77797d"
			textColor="#77797d"
			marginTop="80"
		></u-empty>
	</view>
</template>

<script>
	import EventList from '@/components/index/eventList.vue';
	export default {
		name: 'Search',
		components: {
			EventList
		},
		data() {
			return {
				isEmpty: false, //是否为空
				eventList: [], //事件数据
				keyword: '新疆', //搜索关键字
				scrollTop: 0,
				status: 'loadmore', //上滑加载状态 loading加载中，nomore没有更多了
			}
		},
		watch: {
			eventList: {
				handler(val){
					if(val.length) {
						this.isEmpty = false;
					} else {
						this.isEmpty = true;
					}
				},
				deep: true,
				// immediate: true,
			}
		},
		mounted() {
			//先用新疆调一下接口
			this.search();
		},
		// 监听滚动条位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		onPullDownRefresh() {
			//用this.keywords刷新
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上滑加载
		onReachBottom() {
			
		},
		methods: {
			//点击搜索
			search() {
				console.log('搜索');
				//调接口
				this.eventList = [
					{
						title: '工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},
					{
						title: '工作动态工作动态工作动态工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},
					{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},{
						title: '工作动态工作动态工作动态',
						time: '2121-12-12 12:02:20',
						img: '../../static/share.png'
					},
				]
			}
		}
	}
</script>

<style lang="scss">
	.search {
		width: 100%;
		padding: 110rpx 0 80rpx 0;
		box-sizing: border-box;
		.search-area {
			position: fixed;
			box-sizing: border-box;
			top: 0;
			left: 0;
			padding: 20rpx 20rpx;
			width: 100%;
			height: 130rpx;
			background-color: #efeff4;
		}
	}
</style>