<!--
 * @Author: ch
 * @Date: 2022-03-21 11:29:38
 * @LastEditors: ch
 * @LastEditTime: 2022-03-23 17:18:48
 * @Description: file content
-->
<template>
  <view class="container">
	<view class="search">
		<image class="search--icon" src="@/static/search/arrow.png" @click="$Router.back()"></image>
		<u--input class="search--input" placeholder="请输入您想搜索的商品名称" 
			prefixIcon="search" clearable prefixIconStyle="font-size:48rpx;color:#ccc" 
			v-model="searchValue" placeholderClass="search--input__placeholder"></u--input>
		<text class="search--btn" @click="onSearch">搜索</text>
	</view>
    <view class="history" v-if="historyList.length">
      <view class="history--head">
        <text>最近搜索</text>
        <image class="history--del" src="@/static/search/del.png" @click="clearHistory" />
      </view>
      <view class="history--list">
        <view class="history--item" v-for="(val, index) in historyList" 
			:key="index" @click="handleQuick(val)">{{ val }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>

const HISTORY_SEARCH_KEY = "historySearch";
export default {
	data() {
		return {
			historyList : [],
			searchValue: '',
		};
	},
	onShow(){
		this.searchValue = '';
		this.historyList = uni.getStorageSync(HISTORY_SEARCH_KEY) || [];
	},

	methods: {
		/**
		 * 搜索提交
		 */
		onSearch() {
			const { searchValue } = this;
			if (searchValue) {
				this.setHistory(searchValue);
				this.$Router.push({path:'/pages/goods/list/index', query :{
						search: searchValue
					}
				});
			}
		},

		/**
		 * 清空最近搜索记录
		 */
		clearHistory() {
			this.updateHistoryStorage([]);
		},
		/**
		 * 记录历史搜索
		 */
		setHistory(searchValue) {
			const data = this.historyList;
			const index = data.indexOf(searchValue);
			index > -1 && data.splice(index, 1);
			data.unshift(searchValue);
			if(data.length === 11){
				data.pop();
			}
			this.updateHistoryStorage(data);
		},
		/**
		 * 更新历史搜索缓存
		 * @param {Object} data
		 */
		updateHistoryStorage(data) {
			this.historyList = data;
			uni.setStorageSync(HISTORY_SEARCH_KEY, data);
		},

		/**
		 * 跳转到最近搜索
		 */
		handleQuick(searchValue) {
			this.setHistory(searchValue);
			this.$Router.push({path:'/pages/goods/list/index', query :{
					search: searchValue
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
page{
	background: #fff;
}
.container{
	padding: 0 40rpx;
}
.search{
	height: 88rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	&--icon{
		width: 14rpx;
		height: 28rpx;
	}
	&--input{
		display: block;
		margin: 0 40rpx;
		height: 70rpx;
		border:none;
		box-sizing: border-box;
		background: #F8F8F8;
		&__placeholder{
			font-size: 26rpx;
			color: #666;
		}
	}
	
	&--btn{
		font-size: 26rpx;
		color: #666;
	}

}



// 最近搜索
.history {
	&--head {
		font-size: 26rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0;
	}
	&--del{
		width: 27rpx;
		height: 28rpx;
	}
	&--list{
		display: flex;
		flex-wrap: wrap;
	}
	&--item{
		max-width: 276rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #666;
		background: #F8F8F8;
		margin: 10rpx 18rpx 10rpx 0;
	}

}
</style>
