<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.ext)" v-for="(item, key) in list" :key="item.id" class="search-item">
				<view class="img" style="position: relative;">
					<image class="img" :src="showImg(item.ext.headimg)" mode="aspectFill"></image>
					<view class="hover-use-type" v-if="item.ext.type=='post'&&item.ext.delivery_method">
						{{item.ext.delivery_method_str.join('/')}}
					</view>
				</view>
				<view class="content">
					<view class="title text-overflowRows">
						{{item.ext.title}}
					</view>
	
			
				<view class="flex-between">
						<view class="distance text-overflow"  >
							<image v-if="item.ext.address||item.ext.scene_address" :src="showImg('https://static.ticket.sz-trip.com/uploads/20250619/0e16bffb0cd3648faa47879d0d532842.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">
								{{item.ext.price/100}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-data-zhanwei" v-if="list.length<=0">
				<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
				<view style="padding:50rpx 0 67rpx">暂无数据</view>
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				typeList: [
					{name: '全部', type: ''},
					{name: '游玩', type: 'ticket'},
					{name: '民宿', type: 'hotel'},
					{name: '线路', type: 'line'},
					{name: '农产品', type: 'post'},
				],
				typeIndex: 0,
				showMore: true,
				list: [],
				keywords: "",
				
				types: {
					'goods': "商品",
					// 'scenic': "景点",
					'article': "文章",
					'activity':'活动'
				},
				deliveryMethod: {
					"1":"邮寄","2":"自提", "3":"配送"
				},
				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 => {
					let resData = res.data.list
					resData.forEach(v=>{
						if (v.ext.delivery_method) {
							v.ext.delivery_method_str = this.getDeliveryMethodStr(v.ext.delivery_method)
						}
					})
					this.list = [...this.list, ...resData];
					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;
		
		// padding: 0 30rpx;
	}
	.top-bg{
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		.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: 26rpx 30rpx;
		background: #F7F7F7;
	}

	.search-item {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		margin-bottom: 26rpx;
		.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: 24rpx;
			color: #666666;
			display: flex;
			align-items: center;
			flex: 1;
			width: 100%;
			padding-right: 10rpx;
			
			image{
				width: 26rpx;
				height: 26rpx;
				flex-shrink: 0;
			}
			text{
				flex: 1;
				width: 1rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				    height: 26rpx;
				    line-height: 26rpx;
			}
		}
		
		.price {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 33.33rpx;
			color: #C3282E;
			display: flex;
			align-items: baseline;
		}
		.price::before{
			content: '￥';
			font-size: 24rpx;
		}
		.ticlet-price::after{
			content: '起';
			font-size: 24rpx;
			color: #999999;
		}
	}

	.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;
			justify-content: space-between;
		}
		
		.common-types::-webkit-scrollbar {
			width: 0rpx;
			height: 0;
			display: none;
		}
		
		.common-type {
			margin: 0 26rpx;
			line-height: 90rpx;
			height: 90rpx;
			position: relative;
			color: #000000;
			flex-shrink: 0;
		}
		
		.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>
