<template>
	<view class="page">
		<!-- <u-search :style="{width:'100%',height: '32px',fontSize: '14px'}" bg-color="#F7F7F7" placeholder="请输入学生姓名/学号/手机号"
			search-icon-color="#D9D9D9" placeholder-color="#8C8C8C" input-align="left" :clearabled="true"
			:show-action="false" v-model="search" focus=true @search="handelLink()">
		</u-search> -->
		<u-search placeholder="请输入学生姓名/学号/手机号" placeholderColor="#C1C1C9" searchIconSize="36" height="64rpx"
			bgColor="#F4F4F4" :showAction="false" shape="round" v-model="search" @search="handelLink()" @clear="clearInput()">
		</u-search>
		<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 40rpx;">
			<view class="title">
				历史搜索
			</view>
			<u-image width="16px" height="16px" src='/static/img/home/delete.png' @click="clear"></u-image>
		</view>
		<view class="his">
			<view class="historyItem" v-for="(item,index) in history" :key="index" @click="clickItem(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				search: '',
				history: [],
			}
		},

		onLoad(option) {
			console.log('onshow', option)
			if (option && option.type) {
				this.type = option.type
				this.search = option.searchkey
			}
		},

		onShow() {
			let that = this
			uni.getStorage({
				key: 'search_history',
				success: function(res) {
					console.log('123', res)
					that.history = res.data;
				}
			});
		},

		methods: {
			handelLink(e) {
				let that = this

				// if (e == '' || !e) {
				// 	this.$u.toast('请输入搜索条件')
				// 	return
				// }
				
				if (e != '') {
					if (this.history.indexOf(e) == -1) {
						this.history.push(e)
						uni.setStorage({
							key: 'search_history',
							data: that.history,
							success: function() {
								console.log('success');
							}
						});
					}
				}

				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.keyword = e;
				uni.navigateBack({
					delta: 1
				});
			},
			
			clearInput() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.keyword = '';
				uni.navigateBack({
					delta: 1
				});
			},

			clear() {
				let that = this
				uni.removeStorage({
					key: 'search_history',
					success: function(res) {
						that.history = [];
					}
				});
			},

			clickItem(e) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.keyword = e;
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 40rpx;

		.title {
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.his {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
		}

		.historyItem {
			// height: 32px;
			background: rgba(0, 0, 0, 0.03);
			border-radius: 16px;
			padding: 12rpx 32rpx;
			font-size: 14px;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: rgba(0, 0, 0, 0.65);
			text-align: center;
			margin-right: 20rpx;
			margin-bottom: 10px;
		}
	}
</style>