<template>
	<view class="">
	<view class="minBox">
		<!-- 搜索框 -->
		<view class="search">
			<u-search bgColor='#F6F6F6' :showAction="false" placeholder="搜索" v-model="keyword" @search="search(keyword)">
			</u-search>
		</view>

		<view class="" v-if="status==0">
			<!-- 历史搜索 -->
			<view class="history flexJ" v-if="historyList.length">
				<view class="searchHistory">搜索历史</view>
				<image src="../../static/delete.png" mode="" style="width: 32rpx; height:32rpx;" @click="clear"></image>
			</view>
			
			<!-- 历史记录 -->
			<view class="historyRecord" >
				<view class="historyRecordBox flexC" v-for="item in historyList" :key="item.id">
					{{item}}
				</view>
			</view>
		</view>
		
	</view>
		
		<view class="minBoxs">
		<!-- 搜索出的结果 -->
				<view class="" v-if="status==1">
					<view class="searchResult flexJ" v-for="(item,idx) in displayLIstanbul" :key="item.id">
						<view class="left">
							<image src="../../static/Frame 181@2x.png" mode=""></image>
						</view>
						<view class="right">
							<view class="top">{{item.name}}</view>
							<view class="center flexA">
								<view class="two">￥110</view>
							</view>
							<view class="bottom flexJ">
								<view class="flexA">
									<view class="flexA">
										<view class="money">￥</view>
										<view class="moneys">{{item.price}}</view>
									</view>
									<view class="price flexA">
										<view class="">￥</view>
										<view class="">{{item.prics}}</view>
									</view>
								</view>
								<image src="../../static/Group 5@2x.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 搜索结果为空 -->
			<view class="searchNull" v-if="status==2">
				<image src="../../static/Frame 181@2x.png" mode="" style="width: 320rpx; height: 320rpx;"></image>
				<view class="null">
					暂无搜素结果
				</view>
			</view>
			
		<!-- 模态框是否确认删除 -->
		<u-modal :show="show" :title="title" :content='content' showCancelButton=true @confirm="confirm"
			@cancel="cancel"></u-modal>
</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				historyList: ['薯片','薯片配啤酒','可乐','巴啦啦小魔仙裙子','减肥的药能首发式地方'],
				show: false,
				title: '确定清空搜索历史吗',
				searchList: [{id:1,name:'薯片',price:20,prics:15},{id:2,name:'辣条',price:20,prics:15}, {id: 3,name:'可乐',price:20,prics:15},{id:4,name:'裙子',price:200,prics:150}, {id:5,name:'减肥的药',price:80,prics:60}, {id:6,name:'泡面',price:20,prics:15}], //搜索数组
				displayLIstanbul:[], //存放搜索到的内容
				status:0,
			}
		},
		onLoad() {
			
		},
		methods: {
			
			clear() {
				this.show = true
			},
			
			//模态框的确认键
			confirm() {
				this.show = false
				this.historyList = []  
				uni.showToast({
					title: '清空成功'
				})
			},
			
			//模态框的取消键
			cancel() {
				this.show = false
			},
			
			// 回车事件
			search(keyword) {
				// console.log(keyword)
				// console.log('按下了回车')
				this.historyList.push(keyword)
				this.searchList.forEach(item=>{
					if (item.name.indexOf(this.keyword) !== -1) {
						// console.log('看看是啥',item.name.indexOf(this.keyword))
						console.log('搜到了')
						this.displayLIstanbul.push(item)
						console.log(item)
						this.status = 1
						this.keyword = ''
					} else {
						console.log('没搜到')
						this.status = 2
						this.keyword = ''
					}
				})
				
			}
		},
	}
</script>

<style lang="scss">
	.minBox {
		margin: 16rpx 32rpx;
	}

	.search {
		width: 100%;
		height: 72rpx;
		border-radius: 38rpx;
		margin-bottom: 16rpx;
	}

	.history{
		margin-top: 32rpx;
	}
	
	.searchHistory {
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		font-weight: 700;
	}

	.historyRecord {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 30rpx;

		.historyRecordBox {
			height: 52rpx;
			border-radius: 0 16rpx 0 16rpx;
			background: rgba(235, 249, 238, 1);
			color: rgba(0, 0, 0, 1);
			font-size: 26rpx;
			padding: 6rpx 16rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;
		}
	}
	
		
	.minBoxs {
		width: 750rpx;
		height: auto;
		background-color: #F6F6F6;
	}
	
	.searchResult {
		width: 686rpx;
		height: 268rpx;
		border-radius: 8rpx;
		background: #fff;
		margin: 24rpx 32rpx;

		.left {
			padding: 21rpx 22rpx 22rpx 21rpx;
			box-sizing: border-box;
			margin-right: 24rpx;

			image {
				width: 177rpx;
				height: 177rpx;
			}
		}

		.right {
			height: 220rpx;
			width: 394rpx;
			.top {
				height: 72rpx;
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
			}

			.center {
				margin-top: 24rpx;
				height: 40rpx;
				background-image: url('@/static/tabBar/Group 42@2x.png');
				background-repeat: no-repeat;
				background-size: 114rpx 40rpx;

				.two {
					height: 28rpx;
					width: 42rpx;
					margin-left: 50rpx;
					padding: 2rpx 1rpx 1rpx 1rpx;
					box-sizing: border-box;
					color: rgba(255, 223, 177, 1);
					font-size: 20rpx;
					font-weight: 700;
				}
			}

			.bottom {
				margin-top: 44rpx;

				.money {
					color: rgba(9, 94, 28, 1);
					font-size: 24rpx;
					font-weight: 700;
				}

				.moneys {
					color: rgba(9, 94, 28, 1);
					font-size: 32rpx;
					font-weight: 700;
				}

				.price {
					color: rgba(179, 179, 179, 1);
					font-size: 24rpx;
					text-decoration: line-through;
					text-decoration-color: #B9B9B9;
					margin-top: 5rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
	.searchNull{
		margin: 196rpx 214rpx 32rpx 216rpx;
		.null{
			 width: 168rpx;
			 height: 40rpx;
			 color: rgba(0,0,0,0.6);
			 font-size: 28rpx;
			 margin-left: 76rpx;
		}
	}
</style>