<template>
	<view class="cotainer">
		<view class="search">
			<view class="search-area">
				<input type="text" maxlength="20" focus confirm-type="search" placeholder-class="pclass"
					v-model="keyword" @confirm="getPoints" />
				<view class="bg-base" @click="getPoints">搜索</view>
			</view>
		</view>

		<view class="line">
			<block v-if="pointers.length>0">
				<view class="line-item" v-for="pointer in pointers" @click="toDetail(pointer)">
					<image class="line-item-img" src="../static/detail-go.png"></image>
					<view class="line-item-title">{{pointer.name}}</view>
				</view>
				<view class="line-nodata">————没有更多记录了————</view>
			</block>
			<view v-else class="nodata">
				<u-empty text="没有更多记录了" mode="search"></u-empty>
			</view>
		</view>
		<tabbar :currentPage="6"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		shareInfo
	} from "@/common/util.js"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				keyword: '',
				pointers: []
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline(){
			return shareInfo
		},
		onLoad() {
			// this.getPoints()
		},
		methods: {
			getPoints() {
				this.pointers = []
				this.$u.api.getPoints({
					name: this.keyword
				}).then((res) => {
					this.pointers = res.points
				})

			},
			toDetail(pointer) {
				console.log("pointer",pointer)
				uni.setStorageSync("vuex_pointer",pointer)
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
		}
	}
</script>

<style lang="scss">
	.cotainer {
		padding-bottom: 135rpx;
		background-color: #f5f5f5;
	}

	.search {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #f5f5f5;
		z-index: 9;
	}

	.search-area {
		display: flex;
		width: 90%;
		margin: 30rpx auto;

		input {
			padding: 20rpx 40rpx;
			background-color: #fff;
			border-radius: 40rpx 0 0 40rpx;
			width: calc(100% - 160rpx);
			height: 80rpx;
			box-sizing: border-box;
		}

		.bg-base {
			background: linear-gradient(to right, #edc99f, #cc9f6d);
			color: #fff;
			padding: 20rpx 40rpx;
			height: 80rpx;
			border-radius: 0 40rpx 40rpx 0;
			width: 160rpx;
			text-align: center;
		}
	}

	.line {
		width: 90%;
		margin: 30rpx auto;
		height: calc(100vh - 200rpx);
		background-color: #f5f5f5;
		overflow: scroll;
		padding-top: 120rpx;
		position: relative;

		.nodata {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&-item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ddd;
			padding: 15rpx;

			&-img {
				width: 33rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			&-title {
				font-size: 32rpx;
				color: #bc9766;
				width: calc(100% - 60rpx);
			}
		}

		&-nodata {
			margin: 20rpx;
			color: #ccc;
			text-align:center;
		}
	}
</style>