<template>
	<view class="container">
		<view class="searchBar" :style="`top:${statusBarHeight*2-5}rpx`">
			<image 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*2+32}rpx`">
			<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">
				
			</view>
			
			
		</view>


	</view>
</template>

<script>
	const baseImgUrl = "";
	const recentTagsList=[
		"功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴"
	]
	const oftenTagsList=[
		"功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴","功能营养","母婴"
	]
	export default {

		data() {
			return {
				baseImgUrl: baseImgUrl,
				statusBarHeight: 38,
				recentTagsList:recentTagsList,
				oftenTagsList:oftenTagsList,
				step:1
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 38;
		},
		methods: {
			back() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '@/common.less';

	.container {
		background-color: #f6f8fa;
		min-height: 100vh;
		.searchBar {
			display: flex;
			position: relative;
			align-items: center;
			.btnback {
				width: 50rpx;
				height: 50rpx;
				left: 48rpx;
				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;
				}
			}
		}
	
	
	}
</style>