<script setup>
	// 
	import {
		ref,
		computed,
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex'
	// 顶部状态栏
	import statusBar from '@/components/header/statusBar'
	// 顶部导航
	import apex from '@/components/header/apex'
	// 产品列表
	import productList from '@/components/shop/productList/productList';
	// 底部导航
	import footerMneu from '@/components/footerMenu/footerMenu'
	// 
	import util from '@/common/js/util';
	// 当前方式 search搜索 result搜索结果
	const mode = ref('result')
</script>

<template>
	<view class="page">
		<view class="apexBox pr">
			<apex mode="flex" bgColor="#ffffff00">
				<template #content>
					<view class="searchBox rows f1 ml20 ptb10 plr20 bfff br20">
						<uni-icons type="search" size="40rpx" color="#999" />
						<input type="text" v-model="keyword" class="f1 mlr20" placeholder="请输入关键字"
							@blur="handleSearch" />
						<uni-icons type="camera" size="40rpx" color="#999" />
						<view class="btn bar sm primary ml20 plr20">搜索</view>
					</view>
				</template>
			</apex>
			<view class="shopHeaderBg pfull"></view>
		</view>

		<view class="container f1 pr">
			<scroll-view scroll-y="true" class="scroll">
				<view class="main oh">
					<template v-if="mode === 'search'">
						<view class="searchList">
							<view class="header rows">
								<view class="title">历史搜索</view>
								<uni-icons type="trash" size="30rpx" color="#999" />
							</view>

							<view class="list">
								<view class="item" v-for="(item,index) in 3" :key="index">袖子</view>
							</view>
						</view>

						<view class="searchList">
							<view class="header rows">
								<view class="title">搜索发现</view>
								<view class="rows">
									<uni-icons type="refreshempty" size="30rpx" color="#999" />
									<view class="ml10 f24 c999">换一批</view>
								</view>
							</view>

							<view class="list">
								<view class="item" v-for="(item,index) in 4" :key="index">笔记本电脑</view>
							</view>
						</view>
					</template>

					<template v-if="mode == 'result'">
						<view class="product oh">
							<view class="screen rows bfff">
								<view class="item fmid f1">
									<view>综合</view>
									<uni-icons type="bottom" size="30rpx" color="#999" />
								</view>

								<view class="item fmid f1">
									<view>销量</view>
									<uni-icons type="bottom" size="30rpx" color="#999" />
								</view>

								<view class="item fmid f1">
									<view>价格</view>
									<uni-icons type="bottom" size="30rpx" color="#999" />
								</view>

								<view class="item fmid f1">
									<view>筛选</view>
									<uni-icons type="bars" size="30rpx" color="#999" />
								</view>
							</view>

							<view class="list mtb30 mlr30">
								<productList />
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.apexBox {
		overflow: hidden;
		padding-bottom: 30rpx;

		// 
		.shopHeaderBg {
			height: auto;
		}
	}

	// 内容
	.container {
		margin-top: -30rpx;
		padding-top: 30rpx;

		.scroll {
			height: 100%;
		}
	}

	// 搜索列表
	.searchList {
		margin: 30rpx;

		.title {
			color: #333;
			font-size: 30rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				padding: 5rpx 15rpx;
				color: #333;
				font-size: 26rpx;
				background-color: #fff;
				border-radius: 100rpx;
			}
		}
	}

	// 产品
	.product {
		.screen {
			font-size: 24rpx;

			.item {
				padding: 20rpx 0;
			}
		}
	}
</style>