<template>
	<div class="bg">
		<view style="width: 100%;height: 1px;"></view>
		<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>
		<div class="search-list">
			<div @click="gotoDetail(item)" v-for="(item, key) in list" :key="item.id" class="search-item">
				<image class="search-img" :src="item.ext.headimg" mode="aspectFill"></image>
				<div class="search-content">
					<div class="search-title text-overflowRows">{{item.ext.title}}</div>
					<!-- 门票+美食+酒店+年卡+文创特产 -->
					<template v-if="['ticket','food','room','scenic','post'].includes(item.ext.type)">
						<div class="text-overflow" style="color: #019B67;padding-top: 10rpx;flex-shrink: 0;"
							v-if="item.ext.display_tags">
							{{item.ext.display_tags.split(",").slice(0,2).join(" | ")}}
						</div>
					</template>
					<!-- 演出 -->
					<template v-else-if="['show'].includes(item.ext.type)">
						<div class="text-overflow" style="font-size: 27rpx;color: #606060;;padding-top: 10rpx;flex-shrink: 0;"
							v-if="item.ext.subtitle">
							{{item.ext.subtitle}}
						</div>
					</template>
					<!-- 线路 -->
					<template v-else-if="['line'].includes(item.ext.type)">
						<div class="text-overflow" style="font-size:21rpx;padding-top: 10rpx;flex-shrink: 0;">
							<text style="color: #019B67">{{item.ext.rate}}分</text>
							<text style="padding: 0 5rpx;">|</text>
							<text style="color: #606060;" v-if="item.ext.sales_number">销量{{item.ext.sales_number}}份</text>
						</div>
					</template>
					
					<div class="search-info">
						<div style="flex: 1;width: 1rpx;padding-right: 20rpx;" v-if="['ticket','food','room','scenic'].includes(item.ext.type)">
							<div style="align-items: center;display: flex;" class="text-overflow"
								v-if="item.ext.address || item.ext.scene_address">
								<image style="width: 24rpx;height: 24rpx;flex-shrink: 0;" src="https://kswtgl.com/uploads/20250716/b8e82f15960e56f476e75e35c39dad7c.png"></image>
								<view class="text-overflow" style="color: #606060;padding-left: 10rpx;">{{item.ext.address || item.ext.scene_address}}</view>
							</div>
							<div class="text-overflow" style="color: #000000;padding-top: 10rpx;" v-if="item.ext.distance">距您直线距离{{(item.ext.distance/1).toFixed(1)}}km</div>
						</div>
						<div v-else style="flex: 1;width: 1rpx;padding-right: 20rpx;"></div>
						<div class="price">{{item.ext.price/100}}</div>
						
						
					</div>
					
				</div>
				
			</div>
		</div>
		<div class="list-common-empty" v-if="list.length==0">
			<img src="https://static.ticket.sz-trip.com/taizhou/images/noData.png" />
			<p class="list-common-empty-tip">暂无内容</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				list: [],
				keywords: "",
				ajaxFlag: true,
				lat: "",
				lon:"",
				types: {
					'scenic':'景点',
					'ticket':'门票',
					'room':'酒店',
					'post':'特产',
					'line':'线路',
					'venue':'场馆',
					'food':'美食',
					'activity':'活动',
					'travels':'游记',
					'coupon':'卡券',
					'show': '演出',
					'calendar':'活动日历',
					'movie':'电影',
					'restaurant':'美食',
					'tenscenic':'景点', //十景
					'cinema':'影院',
					'relic':'文物',
					'units':'文化单位',
					'red_map':'红色地图'
				},
			}
		},
		onLoad(options) {
			let _this = this
			this.options = options
			this.keywords = options.keywords;
			this.finished = false;
			uni.getLocation({
				success: data => {
					_this.lat = data.latitude;
					_this.lon = data.longitude;
					_this.getList()
				},
				fail: res=> {
					_this.getList()
				}
			})
		},
		methods: {
			search() {
				if (this.keywords.trim().length<=0) {
					uni.showToast({
						title: '请输入搜索关键字',
						icon:"none",
					})
					return
				}
				
				this.pushHis(this.keywords);
				this.list = [];
				this.finished = false;
				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) {
				console.log(item)
				
				this.gotoDetailByTypeToJdsz(item.ext)
			},
			getList() {
				uni.showLoading({})
				uni.request({
					method: 'POST',
					url: 'https://api.cloud.sz-trip.com/api/search/kunshan',
					// url: "https://test.api.cloud.sz-trip.com/api/search/kunshan",
					header: {'content-type': 'application/json'},
					data: {
						name: this.keywords,
						offset: this.list.length,
						limit: 30,
						lon: this.lon ||"",
						lat: this.lat||"",
						key: "changshu"
					},
					success: res => {
						console.log(res)
						if (res.data.code==1) {
							let resData = res.data
							this.list = [...this.list, ...resData.data.list];
							if (resData.data.list.length<30) {
								this.finished = true
							}
						}
						
					},
					complete: () => {
						uni.hideLoading()
					}
				})
				
				this.Post({name: this.keywords,limit:1},"/api/search/search")
			}
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList()
			},1000)
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: white;
		padding: 0 30rpx;
	}
.search-box {
		width: 697rpx;
		height: 68rpx;
		margin: 34rpx auto;
		margin-bottom: 0;
		border-radius: 60rpx;
		padding: 6rpx 7rpx 6rpx 26rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background-color: #F2F2F2;
	}

	.search-box img {
		width: 28rpx;
		height: 30rpx;
	}

	.search-box .input {
		flex: 1;
		border: none;
		outline: none;
		background: none;
		color: #666;
		margin: 0 20rpx;
	}

	.search-box .btn {
		background-color: #019B67;
		border-radius: 27rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 10rpx 26rpx;
	}

	.search-list {
		
	}

	.search-item {
		display: flex;
		padding: 32rpx 0;
		border-bottom: 1px solid #d9d9d9;
		
		.search-img{
			width: 215rpx;
			height: 185rpx;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			flex-shrink: 0;
		}
		
		.search-content{
			flex: 1;
			width: 1rpx;
			padding-left: 25rpx;
			font-weight: 400;
			font-size: 20rpx;
			display: flex;
			flex-direction: column;
		}
		.search-info{
			padding-top: 10rpx;
			height: 1rpx;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}
		.search-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			flex-shrink: 0;
		}
		.price{
			font-size: 32rpx;
			color: #D62829;
			flex-shrink: 0;
			&::before{
				content: '￥';
				font-size: 21rpx;
			}
			&::after{
				content: '起';
				font-size: 21rpx;
				color: #606060;
			}
		}
	}

	

	.search-tip {
		flex-shrink: 0;
		margin-left: 30rpx;
		flex-shrink: 26rpx;
		color: #656565;
	}
	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
</style>
