<template>
	<view class="page">
		<u-navbar title="搜索" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar">
		</u-navbar>

		<!-- 搜索区域 -->
		<view class="search-container">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="search-box">
					<view class="search-icon">
						<u-icon name="search" color="#999" size="28"></u-icon>
					</view>
					<input 
						type="text" 
						v-model="searchKeyword" 
						placeholder="请输入搜索内容" 
						placeholder-style="color:#999"
						class="search-input"
						@confirm="handleSearch"
					>
					<view 
						class="clear-icon" 
						v-if="searchKeyword" 
						@click="clearSearch"
					>
						<u-icon name="close-circle" color="#999" size="24"></u-icon>
					</view>
				</view>
				<view class="search-btn" @click="handleSearch">搜索</view>
			</view>
			<view class="tablist">
				<view :class="tabindex == item.type ? 'active' : ''" v-for="(item,index) in tablist" :key="index" @click="btntab(item)">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 搜索内容区域 -->
		<scroll-view class="content" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
			<view class="list" v-for="(item,index) in shujulist" :key="index" @click="btnitem(item)">
				<view class="lt">
					<video v-if="item.picture && isVideo(item.picture.split(',')[0]) && tabindex == 5" :src="item.picture.split(',')[0]" :controls="false"></video>
					<image v-if="item.picture && isimg(item.picture.split(',')[0]) && tabindex == 5" :src="item.picture.split(',')[0]" mode="aspectFill" />
					<image v-if="tabindex == 2" :src="item.photo ? item.photo.split(',')[0] : ''" mode="aspectFill"></image>
					<image v-if="tabindex == 3" :src="item.imageUrl ? item.imageUrl.split(',')[0] : ''" mode="aspectFill"></image>
					<image v-if="tabindex == 1 || tabindex == 4" :src="item.picture ? item.picture.split(',')[0] : ''" mode="aspectFill"></image>
				</view>
				<view class="rt">
					<view class="top">
						<view class="ltwz" v-if="tabindex == 5">
							{{item.nickName == undefined ? '' : item.nickName}}
						</view>
						<view class="ltwz" v-if="tabindex == 4">
							{{item.title == undefined ? '' : item.title}}
						</view>
						<view class="ltwz" v-if="tabindex == 1 || tabindex == 2 || tabindex == 3">
							{{item.name == undefined ? '' : item.name}}
						</view>
						<view class="rtwz">
							详情 <u-icon name="arrow-right" color="#1EC28B" size="28"></u-icon>
						</view>
					</view>
					<view class="jianjie" v-if="tabindex == 5">
						{{item.content.length > 30 ? item.content.slice(0,60) + '...' : item.content}}
					</view>
					<view class="jianjie" v-if="item.description != null">
						{{item.description.length > 30 ? item.description.slice(0,60) + '...' : item.description}}
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;margin-top: 20rpx;text-align: center;color: #999;">
				当前没有更多数据了...
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				searchKeyword: '', // 搜索关键词
				tablist:[{name:'景区',type:1},{name:'攻略',type:2},{name:'美食',type:3},{name:'文化',type:4},{name:'动态',type:5},],
				tabindex:1,
				isRefreshing:false,
				pageNum:1,
				total:0,
				shujulist:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			// 判断获取的数据是否为视频（通过后缀名）
			isVideo(url) {
				if (!url || typeof url !== 'string') return false
				const lower = url.split('?')[0].toLowerCase()
				return ['.mp4','.mov','.m4v','.mkv','.avi','.wmv','.flv','.webm','.3gp'].some(ext => lower.endsWith(ext))
			},
			// 判断获取的数据是否为视频（通过后缀名）
			isimg(url) {
				if (!url || typeof url !== 'string') return false
				const lower = url.split('?')[0].toLowerCase()
				return ['.png','.jpg'].some(ext => lower.endsWith(ext))
			},
			// 点击进行详情跳转
			btnitem(item){
				console.log(item)
				if(this.tabindex == 1){ //1是请求景区详情
					uni.navigateTo({
						url:'/page_fenbao/remenxq?id=' + item.id
					})
				}else if(this.tabindex == 2){ //2是请求攻略详情
					uni.navigateTo({
						url:'/page_fenbao/gonglue/gongluexq?id=' + item.id
					})
				}else if(this.tabindex == 3){ //3是请求美食详情
					uni.navigateTo({
						url:'/page_user/meishi/meishixq?id=' + item.id
					})
				}else if(this.tabindex == 4){ //4是请求文化详情
					uni.navigateTo({
						url:'/page_user/wenhua/wenhuaxq?id=' + item.id 
					})
				}else if(this.tabindex == 5){ //5是请求动态详情
				    uni.navigateTo({
				    	url:'/page_fenbao/guangchang/dongtaixq?id=' + item.id
				    })
				}
			},
			// 执行搜索
			handleSearch() {
				uni.showLoading({
				  title: '加载中...', 
				  mask: true 
				})
			   this.pageNum = 1
			   this.getlist()
			},
			// 上拉加载更多
			handqixing() {
				if(this.total > this.shujulist.length){
					this.getlist()
				}else{
					console.log(111);
				}
				console.log('加载更多')
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				setTimeout(() => {
					this.getlist()
					this.isRefreshing = false
				}, 100)
			},
			// 点击进行tab切换
			btntab(item){
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				})
				this.shujulist = []
				this.tabindex = item.type
				this.pageNum = 1
				this.getlist()
			},
			// 清空搜索
			clearSearch() {
				this.searchKeyword = ''
				this.searchResult = []
			},
			// 请求景区列表
			getlist(){
				if(this.tabindex == 1){ //1是请求景区列表
					this.$u.get(`/app/scenicArea/list?pageNum=${this.pageNum}&pageSize=20&keyword=${this.searchKeyword}`).then(res =>{
						if(res.code == 200){
					       this.total = res.total
						   if(this.pageNum == 1){
							   this.shujulist = res.rows
							   this.pageNum++
							   uni.hideLoading()
						   }else{
							   this.shujulist = this.shujulist.concat(res.rows) 
							   his.pageNum++
							   uni.hideLoading()
						   }
						}
					})
				}else if(this.tabindex == 2){ //2是请求攻略列表
					this.$u.get(`/app/strategy/list?pageNum=${this.pageNum}&pageSize=20&keyword=${this.searchKeyword}`).then(res =>{
						if(res.code == 200){
					       this.total = res.total
						   if(this.pageNum == 1){
							   this.shujulist = res.rows
							   this.pageNum++
							   uni.hideLoading()
						   }else{
							   this.shujulist = this.shujulist.concat(res.rows) 
							   this.pageNum++
							   uni.hideLoading()
						   }
						}
					})
				}else if(this.tabindex == 3){ //3是请求美食列表
					this.$u.get(`/app/dish/list?pageNum=${this.pageNum}&pageSize=20&keyword=${this.searchKeyword}`).then(res =>{
						if(res.code == 200){
					       this.total = res.total
						   if(this.pageNum == 1){
							   this.shujulist = res.rows
							   this.pageNum++
							   uni.hideLoading()
						   }else{
							   this.shujulist = this.shujulist.concat(res.rows) 
							   this.pageNum++
							   uni.hideLoading()
						   }
						}
					})
				}else if(this.tabindex == 4){ //4是请求文化列表
					this.$u.get(`/app/article/list?pageNum=${this.pageNum}&pageSize=20&keyword=${this.searchKeyword}&type=3`).then(res =>{
						if(res.code == 200){
					       this.total = res.total
						   if(this.pageNum == 1){
							   this.shujulist = res.rows
							   this.pageNum++
							   uni.hideLoading()
						   }else{
							   this.shujulist = this.shujulist.concat(res.rows)
								this.pageNum++
								uni.hideLoading()
						   }
						}
					})
				}else if(this.tabindex == 5){ //5是请求动态列表
				    this.$u.get(`/app/feed/list?pageNum=${this.pageNum}&pageSize=20&keyword=${this.searchKeyword}`).then(res =>{
				    	if(res.code == 200){
				           this.total = res.total
				    	   if(this.pageNum == 1){
				    		   this.shujulist = res.rows
							   this.pageNum++
							   uni.hideLoading()
				    	   }else{
				    		   this.shujulist = this.shujulist.concat(res.rows) 
							   this.pageNum++
							   uni.hideLoading()
				    	   }
				    	}
				    })
				}
			}
		}
	}
</script>

<style lang="scss">
	.active{
		border-bottom: 3px solid #1EC28B;
		font-weight: 600 !important;
		font-size: 30rpx !important;
		color: #000 !important;
	}
	page {
		background: #f5f5f5;
		overflow: hidden;
	}
	// 搜索容器
	.search-container {
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 0;
		.tablist{
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			view{
				color: #666;
				font-size: 28rpx;
				padding-bottom: 10rpx;
			}
		}
		.search-box {
			flex: 1;
			display: flex;
			align-items: center;
			background: #f5f5f5;
			border-radius: 60rpx;
			padding: 14rpx 24rpx;
			.search-icon {
				margin-right: 16rpx;
			}
			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				height: 40rpx;
				line-height: 40rpx;
			}
			.clear-icon {
				margin-left: 16rpx;
				display: flex;
				align-items: center;
			}
		}
		.search-btn {
			width: 120rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			font-size: 28rpx;
			color: #262B37;
			font-weight: 500;
			margin-left: 20rpx;
			background-color: #1EC28B;
			border-radius: 10rpx;
			color: #fff;
		}
	}
	// 内容区域
	.content {
		height: 77vh;
		padding-bottom: 30rpx;
		overflow: scroll;
		.list{
			width: 700rpx;
			height: 230rpx;
			background-color: #fff;
			margin: auto;
			margin-top: 10rpx;
			border-radius: 10rpx;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			overflow: hidden;
			.lt{
				width: 180rpx;
				height: 180rpx;
				margin-right: 20rpx;
				video{
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}
				image{
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}
			}
			.rt{
               .top{
				   display: flex;
				   justify-content: space-between;
				   width: 460rpx;
				   .ltwz{
					   font-size: 30rpx;
					   font-weight: 600;
				   }
				   .rtwz{
					   color: #1EC28B;
				   }
			   }
			   .jianjie{
				   color: #999;
				   margin-top: 10rpx;
			   }
			}
		}
	}
</style>