<template>
	<view class="page">
		<!-- 搜索框区域 -->
		<view class="search-container">
			<up-search @search="searchData() " v-model="searchText" :background="'#f5f5f5'" :showAction='false'
				:input-style="{ fontSize: '28rpx', height: '70rpx' }" </up-search>
		</view>

		<!-- 搜索历史 -->
		<view class="search-history">
			<view class="history-header">
				<text class="history-title">搜索历史</text>
				<text class="clear-btn" @click="clearHistory">清除</text>
			</view>
			<view v-if="searchHistory.length>0" class="history-tags">
				<view @click="Service.GoPage('/pages/userFunc/searchList?name=' + item)" class="history-tags-item"
					v-for="(item, index) in searchHistory" :key="index">
					{{item}}
				</view>
			</view>
			<view v-else class="history-tags" style="font-size:28rpx ; color: #4B5563;">
				暂无搜索历史
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Service } from '@/Service/Service'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	// 搜索文本
	const searchText = ref('');

	// 搜索历史
	const searchHistory = ref<Array<any>>([]);

	onLoad(() => {

	})
	onShow(() => {
		if (Service.GetStorageCache('search')) {
			searchHistory.value = Service.GetStorageCache('search')
		}

	})

	// 清除搜索历史
	const clearHistory = () => {
		searchHistory.value = [];
		Service.SetStorageCache('search', searchHistory.value)
	};

	const searchData = () => {
		let data = Service.GetStorageCache('search')
		if (searchHistory.value.includes(searchText.value)) {
			console.log(1111);
			Service.GoPage('/pages/userFunc/searchList?name=' + searchText.value)
			return
		}
		if (data.length > 6) {
			searchHistory.value.shift()
			searchHistory.value.push(searchText.value)
			Service.SetStorageCache('search', searchHistory.value)
		} else {
			searchHistory.value.push(searchText.value)
			Service.SetStorageCache('search', searchHistory.value)
		}
		Service.GoPage('/pages/userFunc/searchList?name=' + searchText.value)
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		min-height: 100vh;
	}

	/* 搜索框样式 */
	.search-container {

		padding: 24rpx;
	}

	.search-icons {
		display: flex;
		align-items: center;
	}

	.icon-item {
		margin-left: 20rpx;
	}

	/* 搜索历史样式 */
	.search-history {
		padding: 20rpx 24rpx 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #e2e2e2;
		border-top: 1rpx solid #e2e2e2;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.history-title {
		font-size: 30rpx;
		color: #333333;
		font-weight: 600;
	}

	.clear-btn {
		font-size: 28rpx;
		color: #666666;
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.history-tags-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		margin-right: 15rpx;
		background-color: #F3F4F6;
		color: #4B5563;
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	/* 推荐区域样式 */
	.recommendation-section {
		background-color: #ffffff;
		padding: 30rpx 24rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	/* 商品网格样式 */
	.goods-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		margin-top: 18rpx;
	}

	.goods-item {
		display: flex;
		flex-direction: column;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 0 10rpx 2rpx #e2e2e2;
	}

	.goods-img {
		width: 100%;
		height: 360rpx;
		margin-bottom: 20rpx;
	}

	.goods-name {
		flex: 1;
		padding: 15rpx;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-price {
		padding: 15rpx;
		font-size: 32rpx;
		color: #ff4d4f;
		font-weight: bold;
	}
</style>