<template>
	<div class="bg">
		<view class="top-bg">
			<div class="search-box">
				<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt="">
				<input type="text" class="input" placeholder="请输入关键字" v-model="keywords" @confirm="search" />
				<div class="btn" @click="search()">搜索</div>
			</div>
			<view class="common-box">
				<view class="common-types com-flex-tao">
					<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id"
						:class="['common-type', typeIndex == index ? 'active' : '']">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<div class="search-list">
			<view @click="gotoDetailByType(item)" v-for="(item, key) in list" :key="item.id" class="search-item">
				<image class="img" :src="showImg(item.ext.headimg)" mode=""></image>
				<view class="content">
					<view class="title text-overflowRows">
						{{item.ext.title}}
					</view>
					<view class="distance text-overflow"  >
						<!-- <image v-if="item.ext.address||item.ext.scene_address" :src="showImg('/uploads/20241024/b7d33bf405526f09212ff3d9485e6d06.png')" class="icon-tip"></image> -->
						<text v-if="item.ext.address">{{item.ext.address}}</text>
						<text v-else-if="item.ext.scene_address">{{item.ext.scene_address}}</text>
					</view>
					
					
					<view class="bottom">
						<view class="price ticlet-price" v-if="item.ext.price">
							{{item.ext.price/100}}
						</view>
					</view>
					
					
				</view>
			
			
			</view>
			<div class="list-common-empty" v-if="!showMore">
				
				<p class="list-common-empty-tip">—— 暂无更多 ——</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				typeList: [
					{name: '全部', type: ''},
					{name: '门票', type: 'ticket'},
					{name: '酒店', type: 'hotel'},
					{name: '特产', type: 'post'},
					{name: '线路', type: 'line'},
					{name: '美食', type: 'food'},
				],
				typeIndex: 0,
				showMore: true,
				list: [],
				keywords: "",
				
				types: {
					'goods': "商品",
					// 'scenic': "景点",
					'article': "文章",
					'activity':'活动'
				},
				options: {}
			}
		},
		onLoad(options) {
			this.options = options
			this.keywords = options.keywords;
			this.getList()
		},
		methods: {
			setType(index) {
				if (this.typeIndex!==index) {
					this.typeIndex = index;
					this.list = []
					this.getList()
				}
			},
			search() {
				this.pushHis(this.keywords);
				this.list = [];
				this.getList();
			},
			pushHis(keywords) {
				let history = JSON.parse(uni.getStorageSync('tz_trip_keyowrds')) || [];
				let index = history.findIndex(item => item == keywords);
				if (index >= 0) history.splice(index, 1);
				history.unshift(keywords);
				uni.setStorageSync('tz_trip_keyowrds',JSON.stringify(history))
			},
			gotoDetail(item) {
				
			},
			getList() {
				this.Post({
					name: this.keywords,
					offset: this.list.length,
					type: this.typeList[this.typeIndex].type,
					limit: 10,
					lon: uni.getStorageSync('location').lon || '120',
					lat: uni.getStorageSync('location').lat || '36',
				}, '/api/search/search').then(res => {
					
					this.list = [...this.list, ...res.data.list];
					this.showMore = true
					if (res.data.length<10) {
						this.showMore = false
					}
				})
			}
		},
		
		onReachBottom() {
			setTimeout(() => {
				if (this.showMore) this.getList()
			},1000)
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #FFFFFF;
		// padding: 0 30rpx;
	}
	.top-bg{
		padding: 20rpx 30rpx;
		.search-box {
			width: 100%;
			height: 67rpx;
			background: #F2F2F2;
			border-radius: 33rpx;
			padding: 6rpx 7rpx 6rpx 26rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			img {
				width: 28rpx;
				height: 30rpx;
			}
			.input {
				flex: 1;
				border: none;
				outline: none;
				background: none;
				color: #666;
				margin: 0 20rpx;
			}
			.btn {
				background-color: #6A8A27;
				border-radius: 27rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 10rpx 26rpx;
			}
		}
	}

	.search-list {
		padding: 0 30rpx;
		padding-bottom: 30rpx;
	}

	.search-item {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		margin: 26rpx 0rpx;
		.img {
			width: 200rpx;
			height: 200rpx;
			background: #87CD93;
			border-radius: 13rpx;
			flex-shrink: 0;
		}
		
		.content {
			padding:13rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
		}
		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			width: 100%;
		}
		.distance {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #666666;
			display: flex;
			align-items: center;
			flex: 1;
			width: 100%;
			padding-right: 10rpx;
			
			image{
				flex-shrink: 0;
			}
			text{
				flex: 1;
				width: 1rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.price {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 33.33rpx;
			color: #D90F00;
			display: flex;
			align-items: baseline;
		}
		.price::before{
			content: '￥';
			font-size: 24rpx;
		}
		.ticlet-price::after{
			content: '起';
			font-size: 24rpx;
		}
		.food-price::after{
			content: '/人';
			font-size: 24rpx;
		}
	}

	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 26rpx 0;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
	
	.common-box {
		height: 90rpx;
		.common-types {
			background: white;
			height: 90rpx;
			font-size: 31rpx;
			z-index: 10;
			margin: auto;
			color: #666;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 0;
			display: flex;
		}
		
		.common-types::-webkit-scrollbar {
			width: 0rpx;
			height: 0;
			display: none;
		}
		
		.common-type {
			flex-shrink: 0;
			margin: 0 26rpx;
			line-height: 90rpx;
			height: 90rpx;
			position: relative;
			color: #000000;
		}
		
		.common-type.active {
			font-size: 31rpx;
			font-weight: bold;
			color: #6A8A27;
		}
		
		.common-type.active:after {
			display: block;
			width: 60%;
			font-size: 0;
			content: '1';
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 1rpx;
			height: 4rpx;
			background: #6A8A27;
			border-radius: 2rpx;
		}
	}
	

	.icon-tip{
		width: 26rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
