<template>
	<view class="container">
		<view class="search-box">
			<u-search v-model="searchText" height="80rpx" shape="square" :showAction="false"  bgColor="#F5F5F5" borderColor="#FFF" @change="onChange" @custom="onCustom"
				placeholder="输入关键词" @search="onSearch"></u-search>
		</view>

		<!-- 搜索前 -->
		<!--  v-if="!isSearch" -->
		<view class="search-record">
			<view class="title">
				<text>搜索历史</text>
				<image @click="delShow = true" src="@/static/home/del.png"></image>
			</view>
			<view class="tag-list">
				<view @click="onSearchRecordClick(item)" v-for="(item, index) in 10" :key="index"
					class="item">
					<text>标签</text>
					<image @click.stop="onDelOnly()" class="close" src="@/static/home/close.png"></image>
				</view>
			</view>
		</view>
		
		<!-- v-if="!isSearch" -->
		<view class="recommend-box">
			<view class="title">
				<text>热门推荐</text>
			</view>
			<view class="recommend-list-box">
				<view @click="onSearchRecordClick(item)" v-for="(item, index) in 5" :key="index"
					class="item">
					<text>热门推荐</text>
				</view>
			</view>
		</view>


		<!-- 搜索后的结果 -->
		<!-- v-if="isSearch"  -->
		<view class="search-result">
			<!-- 列表 -->
			<view class="goods-list-box">
				<!-- <scroll-view style="height: 100%;" scroll-y @scrolltolower="onScrolltolower">
					<goodslist :goodsDataList="dataList"></goodslist>
				</scroll-view> -->

				<emptydata emptyText="没找到相关的商品,换个词儿试试？"></emptydata>
			</view>
		</view>

		<!-- 清空弹窗 -->
		<wskj-modal :show="delShow" :showCancelButton="true" confirmText="确定" confirmColor="#FE2C24"
			@close="delShow = false" @confirm="onConfirmDelAll" @cancel="delShow = false">
			<view style="padding: 40rpx 0;">
				<view>
					<text class="fs-28">确定删除全部历史记录？</text>
				</view>
			</view>
		</wskj-modal>

		<!-- 删除单个搜索记录弹窗 -->
		<wskj-modal :show="delOnlyShow" :showCancelButton="true" confirmText="确定" confirmColor="#FE2C24"
			@close="delOnlyShow = false" @confirm="onConfirmDelOnly"
			@cancel="delOnlyShow = false">
			<view style="padding: 40rpx 0;">
				<view>
					<text class="fs-28">确认要删除吗？</text>
				</view>
			</view>
		</wskj-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				delShow: false,
				isSearch: true, // 是否展示搜索结果

				searchRecordList: [],
				hotRecordList: [],

				delOnlyShow: true,
				currentTagId: '',

				dataList: [],
				currentPage: 1,
				isEmpty: false
			}
		},
		onLoad() {
			// this.getSearchKeyResult()
		},
		methods: {
			// 获取搜索记录 和 热门推荐
			getSearchKeyResult() {
				
			},
			// 获取数据
			getGoodsList() {
				
			},
			// 切换排序方式
			onChangeSort(index) {
				
			},
			// 点击搜索记录标签
			onSearchRecordClick(item) {
				
			},
			onChange(e) {
				
			},
			onSearch(e) {
				
			},
			onCustom(e) {
				
			},
			onScrolltolower() {
				
			},
			// 删除单个记录
			onDelOnly(item) {
				
			},
			onConfirmDelOnly() {
				
			},
			// 确认删除所有搜索记录
			onConfirmDelAll() {
				
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100%;
		background-color: #FFF;
		padding: 20rpx;
	}

	.search-box {
		height: 80rpx;
		background-color: #FFF;
		display: flex;
		align-items: center;
	}

	.search-btn {
		width: 140rpx;
		height: 60rpx;
		background: #FE2C24;
		text-align: center;
		border-radius: 8rpx;
		line-height: 60rpx;
		color: #FFF;
		position: absolute;
		top: 8rpx;
		right: 8rpx;
	}


	.search-record {
		background-color: #FFF;
		padding: 20rpx 0;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.search-record>.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.search-record>.title>image {
		width: 32rpx;
		height: 32rpx;
	}

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

	.tag-list>.item {
		padding: 10rpx 35rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		background-color: #F5F5F5;
		color: #000;
		position: relative;
	}

	.close {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 20%;
		right: 5rpx;
	}

	.recommend-box {
		margin-top: 20rpx;
		padding: 0 0;
	}

	.recommend-box>.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.recommend-list-box {
		margin-top: 40rpx;
	}

	.recommend-list-box>.item {
		margin-bottom: 30rpx;
		font-weight: 400;
	}

	.recommend-list-box>.item:last-child {
		margin-bottom: 0;
	}




	.search-result {
		height: calc(100% - 100rpx);
		background-color: #FFF;
		padding: 0 0;
	}

	

	.goods-list-box {
		height: 100%;
		padding: 20rpx 0;
	}
</style>