<template>
	<div class="bg">
		<view class="top-box">
			<uni-icons color="#333333" type="left" size="18" @click.native="goBack()"></uni-icons>
			<view class="search-box">
				<uni-icons color="#96684F" type="search" size="20" ></uni-icons>
				<input type="text" class="input" placeholder="请输入导游姓名/产品名称" v-model="keywords" @confirm="search" />
			</view>
			<view class="btn" @click="search()">搜索</view>
		</view>
	
		<view class="search-list">
			<view class="type-title">导游服务</view>
			
			<view v-for="(item,index) in list1" :key="index" class="item" @click="goDetail(item)">
				<view class="item-img">
					<image :src="showImg(item.image)" mode="aspectFill"></image>
				</view>
				
				<view class="item-content flex-column">
					<view class="item-title">
						<view class="title text-overflow">{{item.guide_data?item.guide_data.nickname:item.title}}</view>
						<view class="group_data_name" v-if="item.guide_data">{{item.guide_data.group_data.name}}</view>
					</view>
					<view class="item-tags text-overflow" v-if="item.guide_data">
						从业{{item.guide_data.duration}}年 |
						{{item.guide_data.lingo_data.name}}
					</view>
					<view class="item-tags text-overflow" v-else>
						{{item.goods_new_tag?item.goods_new_tag.split(',').join(' | '):''}}
					</view>
				</view>
			</view>
			<div class="list-common-empty" v-if="list1.length<=0">
				<p class="list-common-empty-tip">—— 暂无数据 ——</p>
			</div>
			
			<view class="type-title">线路产品</view>
			<view v-for="(item,index) in list2" :key="index" class="item" @click="goDetail(item)">
				<view class="item-img">
					<image :src="showImg(item.image)" mode="aspectFill"></image>
				</view>
				
				<view class="item-content flex-column">
					<view class="item-title text-overflowRows">
						{{item.title}}
					</view>
					<view class="item-tags text-overflow" style="padding-top: 0;">
						{{item.goods_new_tag?item.goods_new_tag.split(',').join(' | '):''}}
					</view>
					<view class="money">{{item.money/100}}</view>
				</view>
			</view>
			
			<div class="list-common-empty" v-if="list2.length<=0">
				<p class="list-common-empty-tip">—— 暂无数据 ——</p>
			</div>
		</view>
	</div>
</template>

<script>
	export default {
		name: "Search",
		data() {
			return {
				showMore: true,
				list1: [], // type_id 2 导游
				list2: [], // type_id 1 线路产品
				keywords: "",

				options: {}
			}
		},
		onLoad(options) {
			this.options = options
			this.keywords = options.keywords;
			this.getList()
		},
		methods: {
			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))
			},
			goDetail(item) {
				this.gotoDetailByTypeId(item.id, item.type_id)
			},
			getList() {
				this.Post({
					name: this.keywords,
					offset: 0,
					limit: 9999999,
				}, '/api/Search/search').then(res => {
					let resData = (res.data || []).map(v=>v.search_data)
					// 导游 type_id 2
					this.list1 = resData.filter(v=>v.type_id == 2)
					this.list2 = resData.filter(v=>v.type_id == 1)
				})
			}
		},
		
		onReachBottom() {
			// setTimeout(() => {
			// 	if (this.showMore) this.getList()
			// },1000)
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F7F7F7;
		padding: 110rpx 0 40rpx;
		// padding: 0 30rpx;
	}
	.top-box {
		height: 84rpx;;
		padding: 12rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		position: fixed;
		z-index:99;
		top: 0;
		left: 0;
		right: 0;
		.search-box{
			width: 493rpx;
			height: 60rpx;
			border: 1px solid #96684F;
			display: flex;
			align-items: center;
			padding: 15rpx 19rpx;
			font-size: 28rpx;
			.input {
				flex: 1;
				border: none;
				outline: none;
				background: none;
				color: #000000;
				margin: 0 20rpx;
				font-size: 28rpx;
			}
		}
		.btn {
			width: 120rpx;
			height: 60rpx;
			background: #96684F;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
		}
	}
	
	.type-title{
		padding:0 26rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		display: flex;
		align-items: center;
		
	}
	.type-title::before{
		content: '';
		width: 6rpx;
		height: 33rpx;
		background: #96684F;
		display: block;
		margin-right: 20rpx;
	}
	
	.item {
		margin: 26rpx auto;
		width: 697rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		
		.item-img {
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 13rpx;
			}
		}
		
		.item-content {
			flex: 1;
			width: 1rpx;
			padding: 10rpx 10rpx 10rpx 20rpx;
			.item-title {
				font-weight: bold;
				font-size: 31rpx;
				color: #010101;
				display: flex;
				align-items: center;
				.title{
					max-width: 320rpx;
					
				}
				
				.group_data_name {
					line-height: 30.67rpx;
					margin-left: 5rpx;
					background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/rankBg.png');
					background-size: 100% 100%;
					padding: 0 8rpx;
					font-weight: 500;
					font-size: 23rpx;
					color: #FFFFFF;
					flex-shrink: 0;
				}
			}
			
			.item-tags {
				// display: flex;
				font-weight: 500;
				font-size: 24rpx;
				color: #96684F;
				padding-top: 10rpx;
				overflow: hidden;
				width: 100%;
				
				// &>view:first-child::after {
				// 	content: '丨';
				// 	display: inline-block;
				// 	margin: 0 5rpx;
				// }
			}
		}
	}
	
	.money{
		text-align: right;
		font-weight: bold;
		font-size: 34rpx;
		color: #DC2525;
	}
	.money::before {
		font-size: 22rpx;
		content: '￥';
	}
	
	.money::after {
		font-size: 22rpx;
		content: '起';
		color: #999999;
		font-weight: normal;
	}
	
	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 26rpx 0;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
</style>
