<template>
	<view class="w-100">
		<!-- searbar -->
		<view class="search-bar w-100 flex j-between a-center">
			<view class="input-wrap flex j-between a-center flex-1">
				<!-- @blur="handleSearch" -->
				<input
					class="input font-28 flex-1"
					type="text" 
					v-model="val"
					placeholder="搜索商品"
					confirm-type="search"
					@confirm="search"
				/>
				<view class="cancleInput flex j-center a-center">
					<view
						v-show="val.length"
						@click="clearInput"
					>
						<image
							style="width: 34rpx;height: 34rpx;"
							src="/static/images/common/icon-clear.png"
							mode="aspectFit"
						/>
					</view>
				</view>
				<image 
					class="search-icon"
					src="/static/images/common/icon-search.png"
					mode="aspectFit"
				/>
			</view>
			
			<view class="search-btn font-28" @click="search">搜索</view>
		</view>
		
		<!-- history -->
		<view class="history-wrap w-100">
			<view class="font-28 flex j-between a-center w-100 py-2">
				<view class="title">历史记录</view>
				<image
					class="del-btn"
					src="/static/images/common/icon-del.png"
					mode="aspectFit"
					@click="clearHistory"
				/>
			</view>
			<view class="w-100 flex j-start a-center flex-wrap">
				<view 
					class="history-item font-28 mr-2 mb-2"
					v-for="(item, index) in list"
					:key="index"
					@click="handleHistory(item)"
				>{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { removeStorage } from '@/lib/storage/index.js'
import { throttle } from '@/utils/common.js'
let cacheHistory = []
export default {
	data() {
		return {
			val: '',
			list: [], // 在页面显示的历史
		}
	},
	onShow() {
		const localHisotry = this.$getStorage('search-history') || []
		this.list = localHisotry
		cacheHistory = localHisotry
		// this.cancle = false
	},
	onHide() {
		
		this.$setStorage('search-history', cacheHistory)
		this.cacheHistory = []
	},
	// onUnload() {
	// 	this.$setStorage('search-history', this.list)
	// },
	watch: {
		val: throttle(function(newVal) {
			if(newVal.length > 0) {
				this.inputFocus = true
			}
		}, 800)
	},
	methods: {
		// 搜索
		search() {
			const { val, list } = this
			if(!val) return this.$toast({title: '请输入搜索内容'})
			if(!cacheHistory.includes(val)) {
				cacheHistory.push(val)
			}
			uni.navigateTo({
				url: `/pages/search/list?val=${val}`
			})
		},
		
		// 点击历史
		handleHistory(val) {
			uni.navigateTo({
				url: `/pages/search/list?val=${val}`
			})
		},
		
		// 清除记录
		clearHistory() {
			this.list = []
			cacheHistory = []
			removeStorage('search-history')
		},
		
		clearInput() {
			// this.cancle = true
			this.val = ''
			// this.timer = setTimeout(() => {
			// 	this.cancle = false
			// 	clearTimeout(this.timer)
			// }, 300)
		}
	}
}
</script>

<style lang="scss" scoped>
.search-bar {
	position: relative;
	@include borderBox(20rpx, 40rpx);
	margin: 0 auto;
	background-color: #fff;
	.input-wrap {
		width: 100%;
		height: 88rpx;
		border-radius: 8rpx;
		overflow: hidden;
		background-color: $mainBg;
		.input {
			width: 534rpx;
			height: 88rpx;
			padding-left: 70rpx;
			background-color: $mainBg;
		}
		.cancleInput {
			position: relative;
			flex: 0 0 50rpx;
			width: 50rpx;
			height: 88rpx;
		}
		.search-icon {
			position: absolute;
			left: 60rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 34rpx;
			height: 34rpx;
		}
	}
	.search-btn {
		flex: 0 0 60rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin-left: 20rpx;
		text-align: center;
	}
}

.history-wrap {
	@include borderBox(20rpx, 20rpx);
	.title {
		color: $desc;
	}
	.del-btn {
		width: 30rpx;
		height: 30rpx;
	}
	.history-item {
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		background-color: #FFE0D1;
	}
}
</style>