<template>
	<view class="bg">
		<view class="search-box flex-center">
			<view class="search flex-center">
				<uni-icons type="search" size="25" color="#B3B3B3"></uni-icons>
				<input type="text" @confirm="getList()" placeholder="搜索场馆" v-model="title" />
			</view>
		</view>
		
		<navigator :url="'/subPackages/venue/venueDetail?id='+item.id" class="item" v-for="(item,index) in list" :key="index" :style="{backgroundImage: 'url('+showImg(item.image)+')'}">
			<view>
				<view class="point"></view>
				<view class="content">
					<view class="title text-overflow">{{item.title}}</view>
					<view class="subtitle text-overflow">{{item.subtitle}}</view>
					<view class="btn">立即预约  ></view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				limit: 10,
				title: '',
				isLoading: false
			}
		},
		onReady() {
			this.getList()
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.isLoading) this.getList();
			}, 500);
		},
		methods: {
			getList() {
				this.Post({
					offset: this.list.length,
					limit: this.limit,
					scenic_type_id: 1,
					title: this.title
				}, '/api/scenic/getScenicByType').then(res => {
					if(res) {
						if(res.data.length < this.limit) this.isLoading = true
						this.list = this.list.concat(res.data)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F3FFFF;
		padding-bottom: 100rpx;
	}
	
	.search-box {
		width: 750rpx;
		height: 93rpx;
		background: #FFFFFF;
		
		.search {
			width: 697rpx;
			height: 67rpx;
			background: #F2F2F2;
			border-radius: 33rpx;
			padding: 0 26.67rpx;
			
			input {
				flex: 1;
				line-height: 67rpx;
				font-size: 31rpx;
				margin-left: 13rpx;
			}
		}
	}
	
	.item {
		margin: 30rpx auto 0;
		width: 696.67rpx;
		height: 266.67rpx;
		border-radius: 15rpx;
		
		&>view {
			height: 100%;
			background-image: url('https://static.ticket.sz-trip.com/changshu/images/venue/itemBg.png');
			background-size: 100% 100%;
			padding: 45rpx 28rpx 40rpx;
			display: flex;
			
			.point {
				width: 13rpx;
				height: 13rpx;
				background: rgba(255, 255, 255, .5);
				border-radius: 50%;
				margin-top: 20rpx;
			}
			
			.content {
				margin-left: 14rpx;
				height: 100%;
				
				.title {
					font-weight: bold;
					font-size: 35rpx;
					color: #FFFFFF;
				}
				
				.subtitle {
					font-weight: 400;
					font-size: 23rpx;
					color: #FFFFFF;
					margin-top: 15rpx;
				}
				
				.btn {
					margin-top: 45rpx;
					width: 180rpx;
					height: 47rpx;
					line-height: 47rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 23rpx;
					background: rgba(255, 255, 255, .7);
					font-weight: bold;
					font-size: 25rpx;
					color: #009286;
				}
			}
		}
	}
</style>