<template>
	<!-- 搜索页 -->
	<view class="">
		<u-navbar bgColor="#F6F8FA" title="搜索" :placeholder="true" :autoBack="true"></u-navbar>
		<!-- 搜索框 -->
		<search @doSearchs="doSearchs" @input="input" :keyWord="keyWord" :disabled="false"></search>
		<!-- 历史搜索 -->
		<view class="mineBox" v-if="!shopList.length && !searchRes">
			<view class="titleBox flexJ">
				历史搜索
				<image src="/static/indexIc/del.png" mode="" @click="clearHistory"></image>
			</view>
			<!-- 历史搜索记录 -->
			<view class="recordBox">
				<view class="record flexC" v-for="item,index in historyrecord" :key="index"
					@click="serachHistroy(item)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 搜索有结果 -->
		<view class="searchResult">
			<shops :list="shopList" :key="index" :shopWidth="344" :shopHeight="344" />
		</view>
		<!-- 搜索无结果 -->
		<view class="searchNull" v-if="searchRes">
			<image src="/static/indexIc/searchNull.png" mode=""></image>
			<text>没有找到相关内容哦</text>
			<view class="tips">可以再去有哪些想看的</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import {onShow,onLoad,onReachBottom} from '@dcloudio/uni-app'
	import search from '@/componets/searchBox.vue'
	import shops from '@/componets/shops.vue'
	import { getSearch,getRecord,getDelRecord } from '@/api/'
	let keyWord = ref('') //搜索关键字
	let historyrecord = ref([]) //历史搜索记录
	let shopList = ref([]) //搜索到商品
	let searchRes = ref(false)  //是否搜索
	let shopId = ref('') //商品id
	let page = ref(1) //第一页
	let lastPage = ref(1) //最后一页
	onLoad(() => {
		getRecords()  //搜索记录
	})
	// 搜索框为空时显示历史收缩
	const change = (e) => {
		
	}
	//历史搜索
	const serachHistroy = (item) => {
		keyWord.value = item
		getSearchs(item)
	}
	// 清除历史记录
	const clearHistory = () => {
		// 提示
		uni.showModal({
			title: '提示',
			content: '是否清空历史记录',
			success: function(res) {
				if (res.confirm) {
					getDelRecords()
					uni.showToast({ title: '清空成功' }) //提示
					// 删除本地保存
					uni.removeStorage({
						key: 'searchRecords'
					})
				} else if (res.cancel) {
					console.log('用户点击取消')
				}
			}
		});
	}
	// 搜搜
	const doSearchs = (keyword)=> {
		if(keyword.trim() != '') {
			getSearchs(keyword)
		}
	}
	const input = (data)=>{
		searchRes.value = false
		shopList.value = []
	}
	// 搜索
	const getSearchs = async (keyWord) => {
		try {
			const res = await getSearch(keyWord)
			shopList.value =  res.goods.concat(res.tjgoods)
			searchRes.value = shopList.value.length == 0 ? true : false
			getRecords()
			console.log('getSearch', res)
			// 保存数据
		} catch (err) {
			console.log('getSearch', err)
		}
	}
	// 搜索记录
	const getRecords = async ()=>{
	  try {
	    const res = await getRecord()
		historyrecord.value = res
	    console.log('getRecord', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getRecord', err)
	  }
	}
	// 删除搜索记录
	const getDelRecords = async ()=>{
	  try {
	    const res = await getDelRecord()
		getRecords()
	    console.log('getDelRecord', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getDelRecord', err)
	  }
	}
	// 触底加载分页
	onReachBottom(() => {
		if (this.page != this.lastPage) {
			this.page = this.page + 1
			this.getSearch(1)
			// this.isSearch ? this.getSearch(1) : this.getCategoryGoods(1)
		} else {
			uni.showToast({
				title: '暂无更多商品~',
				icon: 'none'
			})
		}
	})
</script>

<style lang="scss">
	page {
		background: #F6F8FA;
	}

	.mineBox {
		padding: 24rpx 32rpx 0;

		.titleBox {
			margin-bottom: 24rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			font-weight: 700;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.recordBox {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			height: 132rpx;
			margin-bottom: 36rpx;
			overflow: hidden;

			.record {
				padding: 0 24rpx;
				height: 56rpx;
				box-sizing: border-box;
				margin: 0 16rpx 16rpx 0;
				border-radius: 8rpx;
				color: #000000e6;
				font-size: 26rpx;
				background: #fff;
			}
		}
	}

	.searchNull {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 180rpx;

		image {
			margin-bottom: 32rpx;
			width: 320rpx;
			height: 320rpx;
		}

		text {
			color: #323233ff;
			font-size: 28rpx;
		}

		.tips {
			margin-top: 16rpx;
			color: #969799ff;
			font-size: 24rpx;
		}
	}

	.searchResult {
		width: 100%;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		// .noMore {
		// 	margin-top: 76rpx;
		// 	color: rgba(0, 0, 0, 0.4);
		// 	font-size: 24rpx;
		// }
	}
</style>