<template>
	<view>
		<view class="shichangboxs">
			<view class="header"></view>
			<view class="search">
				<view class="graed"></view>
				<image src="../../static/search.png" mode="" class="searchimg"></image>
				<input type="text" placeholder="搜索" class="inputtext" v-model.trim="inputtext" @blur="search"><text
					style="line-height: 64rpx; color: #ffffff;" @click="cancel">取消</text>
			</view>

			<view class="history">
				<view class="histroy_title">
					<view class="history_search">
						<text>历史搜索</text>
					</view>
					<view class="remove" @click="remove">
						<image src="../../static/remove.png" mode="" class="img"></image>
					</view>
				</view>

				<view class="history_content">
					
					<view class="textbox" v-for="(item,index) in local">
						<text>{{item}}</text>
					</view>
				
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import Head from '@/components/head/head.vue'
	import Uitabber from '@/components/uitabbar/uitabbar.vue'
	export default {
		components: {
			Head,
			Uitabber
		},
		data() {
			return {
				inputtext: "",
				local:[],
				
			}
		},
		methods: {
			cancel() {
				uni.navigateTo({
					url: "../shichang/shichang"
				})
			},
			search(){
				if(this.inputtext){
					
				let arr=uni.getStorageSync("Location");
				if(!arr){
						this.local.push(this.inputtext);
						uni.setStorageSync("Location",this.local)
				}else{
					this.local=arr;
					if(this.local.length<5){
						this.local.push(this.inputtext);
						uni.setStorageSync("Location",this.local)
						
					}else{
						this.local.pop();
						this.local.push(this.inputtext);
						uni.setStorageSync("Location",this.local)
					}
				}
				
					
					uni.navigateTo({
						url:`../shichang/shichang?text=${this.inputtext}`
					})
				}
			},
			remove(){
				uni.removeStorage({
					key: 'Location',
					success: function (res) {
						uni.showToast({
							title: '删除成功',
							duration: 2000,
							icon:'success'
						});
						this.local=[]
					}
				});
			}
		},
		onLoad() {
			this.local=uni.getStorageSync("Location");
		}
	}
</script>

<style lang="scss">
	.shichangboxs {
		margin: 0px auto;
		min-height: 100vh;

		.header {
			width: 750upx;
			height: 88upx;
			opacity: 1;
		}

		.search {
			width: 100%;
			position: relative;
			box-sizing: border-box;
			display: flex;

			.graed {
				width: 500upx;
				height: 64upx;
				background: #FFFFFF;
				border-radius: 4upx 4upx 4upx 4upx;
				opacity: 0.08;
				margin-left: 35rpx;
				margin-right: 30rpx;
			}

			.searchimg {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				top: 18rpx;
				left: 60rpx;
			}

			.inputtext {
				position: absolute;
				left: 100rpx;
				top: 10rpx;
				color: #B4B4B4;

			}

		}

		.history {
			width: 700rpx;
			margin: 0px auto;
			margin-top: 50rpx;

			.histroy_title {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.history_search {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.remove {
					.img {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.history_content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.textbox {
					width: 100rpx;
					padding: 10rpx 30rpx;
					background: #29353E;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #B4B4B4;
					margin-right: 30rpx;
					margin-top: 40rpx;
					text-align: center;
				}
			}


		}

	}

	page {
		background-color: #282828;
		background-image: url(http://124.220.7.57:8888/down/5x39pvJMOmLg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
