<template>
	<view class="container">
		<view class="searchBar" :style="`top:${statusBarHeight}px`">
			<image @tap="backHandler" class="btnback" :src="baseImgUrl+'/static/searchpage/btnback.png'"></image>
			<view class="input-view">
				<view class="flexinput">
					<image class="icon_search_yellow" :src="baseImgUrl+'/static/searchpage/icon_search_yellow.png'">
					</image>
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
						@confirm="confirm" />
				</view>
			</view>
		</view>
		<view class="topbox" :style="`margin-top:${statusBarHeight+10}px`">
			<view v-if="step === 1" class="recentbox">
				<image class="icon_trash" :src="baseImgUrl+'/static/searchpage/icon_trash.png'"></image>
				<view class="title">最近搜索</view>
				<view class="tagbox">
					<view :key="index" v-for="(item,index) in recentTagsList" class="tag">{{item}}</view>
				</view>
				
			</view>
			<view v-if="step === 1" class="recentbox">
				<view class="title">大家都在搜</view>
				<view class="tagbox">
					<view :key="index" v-for="(item,index) in oftenTagsList" class="tag">{{item}}</view>
				</view>
			</view>
			
			<view v-if="step !== 1" class="tabbox">
				<van-tabs :color="`#d3a358`" :active="tabIndex"  @click="onTabChange">
				  <van-tab title="内容" name="a"></van-tab>
				  <van-tab title="工具" name="b"></van-tab>
				  <van-tab title="商品" name="c"></van-tab>
				</van-tabs>
				
			</view>
			<view v-if="step !== 1" class="cardbox">
				<view class="card" v-for="(item,index) in resultList[tabIndex]" :key="index">
					<image class="pic" :src="baseImgUrl+item.bgUrl"></image>
					<view class="desc">
						{{item.desc}}
					</view>
					<view class="timestr">{{item.timeStr}}</view>
				</view>
			</view>
			
		</view>


	</view>
</template>

<script>
	const baseImgUrl = "";
	const recentTagsList=[
		"功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴"
	]
	const oftenTagsList=[
		"功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴"
	]
	const resultList = [
		[
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test.png",
				desc:"宝宝出生必做6件事，90 %爸妈漏掉第3条",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			}
		],
		[
			{
				bgUrl:"/static/searchpage/test2.png",
				desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test2.png",
				desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test2.png",
				desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test2.png",
				desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test2.png",
				desc:"秋风渐凉，宝宝的免疫力 也进入 “换季挑战期”",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
		],
		[
			{
				bgUrl:"/static/searchpage/test3.png",
				desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test3.png",
				desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test3.png",
				desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test3.png",
				desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
			{
				bgUrl:"/static/searchpage/test3.png",
				desc:"3 个 0 成本游戏，让宝宝 越玩越聪明～",
				timeStr:"2025-03-10",
				link:"www.baidu.com"
			},
		]
	]
	export default {

		data() {
			return {
				baseImgUrl: baseImgUrl,
				statusBarHeight: 38,
				recentTagsList:recentTagsList,
				oftenTagsList:oftenTagsList,
				step:2,
				resultList:resultList,
				tabIndex:0,
				searchValue:''
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 38;
		},
		methods: {
			backHandler() {
				uni.navigateBack();
			},
			onTabChange(evt)
			{
				this.tabIndex = evt.detail.index;
			},
			confirm(evt){
				this.searchValue= evt.detail.value;
			},
			searchHandler(){
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '@/common.less';
	:root{
		--tab-font-size:28rpx;
		--tab-active-text-color:#1d1e25;
		--tab-text-color:#a2a3a6;
	}
	
	.container {
		background-color: #f6f8fa;
		min-height: 100vh;
		.tabbox{
			width: 600rpx;
			margin: 0 auto;
		}
		.searchBar {
			display: flex;
			position: relative;
			align-items: center;
			.btnback {
				width: 50rpx;
				height: 50rpx;
				left: 38rpx;
				position: relative;
			}
			.flexinput {
				position: relative;
				left: 50rpx;
				height: 68rpx;
				line-height: 68rpx;
				width: 449rpx;
				border-radius: 33rpx;
				border: 2px solid @color-gold-main;
				display: flex;
				align-items: center;
				.icon_search_yellow {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					left: 20rpx;

				}

				.nav-bar-input {
					padding: 0 5px;
					font-size: 28rpx;
					background-color: rgba(0, 0, 0, 0);
					position: absolute;
					left: 70rpx;
					color: black;
					
				}
			}

			

		}
		
		.recentbox {
			margin-top: 32rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			.icon_trash {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 32rpx;
			}
		
			.title {
				font-size: 28rpx;
				color: @color-black-deep;
				
			}
		
			.tagbox {
				display: flex;
				flex-wrap: wrap;
				.tag{
					background-color: white;
					padding: 10rpx 20rpx;
					border-radius: 27rpx;
					font-size: 24rpx;
					margin: 15rpx;
					color: @color-black-deep;
				}
			}
		}
		.cardbox
		{
			display: flex;
			width: 750rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
			background-color: white;
			flex-wrap: wrap;
			
			.card{
				margin-top: 25rpx;
				margin-right: 25rpx;
				.pic{
					width: 343rpx;
					height: 343rpx;
					
				}
				.desc{
					font-size: 26rpx;
					width: 330rpx;
					color: @color-black-deep;
				}
				.timestr{
					font-size: 24rpx;
					color: @color-black-medium;
					margin-top: 10rpx;
				}
			}
		}
		
	
	
	}
</style>