<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="header">
			<input type="text" v-model="searchVlaue" focus placeholder="输入产品关键搜索" />
			<view class="btn" @click="getLists()">搜索</view>
		</view>
		<!-- 搜索列表 -->
		<block v-if="goodsArr.length >= 1">
			<oct-goods
				:lists="goodsArr"
				color="#e6576b"
				@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
			/>
			<!-- 加载更多 -->
			<view class="pages-load">
				<u-loadmore :status="status" />
			</view>
		</block>
		<block v-else>
			<view class="vertical pages-empty">
				<u-empty
					icon="http://cdn.uviewui.com/uview/empty/search.png"
					textColor="#999"
					text="暂无搜索结果"
				></u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { lists } from "@/apis/interfaces/store"
	export default {
		data() {
			return {
				searchVlaue : '',
				goodsArr	: [],
				status		: "loading",
				page 		: 1
			};
		},
		methods:{
			getLists() {
				lists({
					name: this.searchVlaue,
					page: this.page
				}).then(res => {
					console.log(res.page)
					
					if(res.page.current === 1){
						this.goodsArr = []
					}
					this.goodsArr = this.goodsArr.concat(res.data)
					this.status = res.page.has_more ? 'loadmore' : 'nomore'
				})
			}
		},
		onReachBottom() {
			if(this.status === 'loadmore'){
				this.page += 1
				this.status = 'loading'
				this.getLists()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		padding-top: 110rpx;
		background: $window-color;
		box-sizing: border-box;
	}
	// 搜索
	.header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		padding: 20rpx ($padding + 150) 20rpx $padding;
		box-sizing: border-box;
		background: white;
		input{
			background: $window-color;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 $padding;
			border-radius: 35rpx;
			font-size: $title-size-lg;
		}
		.btn{
			position: absolute;
			top: 20rpx;
			right: $padding;
			width: 130rpx;
			background: $window-color;
			line-height: 70rpx;
			text-align: center;
			font-size: $title-size-lg;
			color: $main-color;
			font-weight: bold;
			border-radius: 35rpx;
		}
	}
	// 结果空
	.pages-empty{
		height: 80vh;
	}
	// 加载分页
	.pages-load{
		padding-bottom: $padding;
	}
</style>
