<template>
	<view class="scarch">
	
	<u-navbar back-text="返回"  :is-back="false" :title-bold="true">
			<view class="slot-wrap" >
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 :show-action="showAction" -->
					<u-search v-model="searchText" bg-color="#f5f7fa"  :show-action="false"  @search="search()"   height="72" :action-style="{color: '#fff'}">
					</u-search>
					<text class="clear" @click="back">取消</text>
			</view>
			
	</u-navbar>
	
	<!-- 	<view class="title">
			<u-icon name="search" size="30" class="icon" color="#737373"></u-icon>
			<u-input class="input" :clearable='false' v-model="searchText"
				style="background-color: #f5f7fa;width: 594rpx;" confirm-type="search" @confirm="search()" />
			<text class="clear" @click="back">取消</text>
		</view> -->
		<view class="history">
			<view class="headline">
				历史搜索
				<view class="icon" @click="delShow = true">

				</view>
			</view>
			<view class="ilst">
				<view class="item" v-for="(item,index) in hitorySearchList" :key="index" @click="search(item)">
					{{item}}
				</view>
			</view>
		</view>
		<u-modal v-model="delShow" content="确定删除全部搜索记录？" confirm-color="red" @confirm="delAll" show-cancel-button>
		</u-modal>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list: [],
				searchText: '',
				delShow: false,
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			search(item) {
				if (!item) {
					item = this.searchText
					this.searchText = ''
				}
				if (!this.hitorySearchList.includes(item)) {
					this.hitorySearchList.push(item)
					this.$u.vuex('hitorySearchList', this.hitorySearchList)
				}
				uni.navigateTo({
					url: '../searchList/searchList?text=' + item
					
				})
			},
			delAll() {
				this.hitorySearchList = []
				this.$u.vuex('hitorySearchList', [])
				this.delShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;	
		padding: 0 36rpx;
		
		.clear {
			margin-left: 36rpx;
		}
	}
	
	.scarch {
		// .title {
		// 	position: relative;
		// 	display: flex;
		// 	padding: 12rpx 36rpx;
		// 	box-shadow: 0 2rpx 30rpx -1px #eeeeee;

		// 	.icon {
		// 		position: absolute;
		// 		top: 30rpx;
		// 		left: 60rpx;
		// 		z-index: 2;
		// 	}

		// 	.input {
		// 		text-indent: 65rpx;
		// 		border-radius: 12rpx;
		// 		vertical-align: middle;
		// 	}

		// 	.clear {
		// 		line-height: 70rpx;
		// 		margin-left: 32rpx;
		// 	}
		// }

		.history {
			.headline {
				font-size: 30rpx;
				color: #303133;
				font-weight: 600;
				margin-left: 36rpx;
				margin-top: 48rpx;

				.icon {
					vertical-align: middle;
					float: right;
					width: 28rpx;
					height: 28rpx;
					background-image: url(../../../static/del.png);
					background-size: 100% 100%;
					transform: translateY(10rpx);
					margin-right: 36rpx;
				}
			}

			.ilst {
				margin-top: 36rpx;

				.item {
					display: inline-block;
					margin-left: 24rpx;
					height: 66rpx;
					text-align: center;
					line-height: 66rpx;
					background: #F5F7FA;
					opacity: 1;
					border-radius: 12rpx;
					padding: 0 24rpx;
					margin-bottom: 24rpx;
				}
			}
		}
	}
</style>
