<!-- 搜索 -->
<template>
	<view class="search-page" :style="{'paddingTop':statusBarHeight}">
		<view class="header">
			<image src="@/static/mine/fh.png" mode="" class="go-back" @click="goBack"></image>
			<view class="header-input">
				<input type="text" v-model="productName" class="input">
				<view @click="search" class="btn">搜索</view>
			</view>
		</view>
		<view class="history" v-if="historyList.length > 0">
			<view class="history-title">
				历史搜索
			</view>
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/search/del.png" class="search-del" mode="" @click="del"></image>
		</view>
		<view class="history-list">
			<view v-for="(item,index) in historyList" :key="index" class="history-list-item" @click="historySearch(item)">{{item}}</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/search/index"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {searchHistoryRecommend,searchHistoryPersonal,delSearchHistoryPersonal} from '@/API/shop.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	export default {
	mixins: [myMixins],
		data() {
			return {
				statusBarHeight,
				historyList:[],//搜索历史
				likeList:[{},{},{}],//猜你喜欢
				productName:""
			}
		},
		mounted() {
			
		},
		onShow() {
			this.getHistory()	
		},
		methods: {
			goBack(){
				uni.switchTab({
					url:'/pages/product/product'
				})
			},
			// 搜索
			search(){
				uni.navigateTo({
					url:`/pages/search/search-list?productName=${this.productName}`
				})
			},
			historySearch(item){
				this.productName = item
				this.search()
			},
			// 获取搜索历史
			getHistory(){
				searchHistoryPersonal().then(res => {
					if(res.code === 200){
						this.historyList = res.data
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
					this.$api.msg(err)
				})
			},
			del(){
				delSearchHistoryPersonal().then(res=> {
					if(res.code === 200){
						this.historyList = []
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					this.$api.msg(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.search-page{
		// height: 100vh;
		// background-color: #F0F1F5;
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 22rpx;
			.go-back{
				width: 19rpx;
				height: 22rpx;
			}
			.header-input{
				width: 631rpx;
				height: 69rpx;
				background: #FFFFFF;
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 6rpx 10rpx 6rpx 20rpx;
				.input{
					width: 480rpx;
					font-size: 24rpx;
					color: #000000;
				}
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 104rpx;
					height: 57rpx;
					background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
					border-radius: 28px;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.search-header{
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx 20rpx 32rpx;
			padding-top: 40rpx;
			.search-main{
				display: flex;
				align-items: center;
				position: relative;
				.search-img{
					position: absolute;
					width: 36rpx;
					height: 36rpx;
					top: 14rpx;
					left: 74rpx;
				}
				.search-arrows{
					width: 16rpx;
					height: 28rpx;
					z-index: 9999;
				}
				.search-input{
					width: 534rpx;
					height: 64rpx;
					border: 2rpx solid #85DBD2;
					border-radius: 32rpx;
					margin-left: 36rpx;
					padding-left: 74rpx;
					font-size: 28rpx;
					color: #999999;
				}
			}
			.search-txt{
				font-size: 32rpx;
				color: #000000;
				font-weight: bold;
			}
		}
		.history{
			padding: 31rpx 43rpx 42rpx 23rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.history-title{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.search-del{
				width: 32rpx;
				height: 35rpx;
			}
		}
		.history-list{
			// background-color: #fff;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 32rpx;
			.history-list-item{
				min-width: 100rpx;
				display: inline-block;
				text-align: center;
				margin-right: 9rpx;
				background-color: #F0F1F5;
				padding: 15rpx 27rpx;
				background: #EBEBEB;
				border-radius: 28rpx;
				font-size: 24rpx;
				color: #B5B5B5;
				margin-bottom: 15rpx;
			}
		}
		.like{
			background-color: #fff;
			padding: 30rpx 32rpx 0 32rpx;
			.like-title{
				font-size: 32rpx;
				color: #000000;
				font-size: 800;
			}
			.like-list{
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.like-list-item{
					display: inline-block;
					margin-right: 36rpx;
					background-color: #F0F1F5;
					padding: 8rpx 22rpx;
					font-weight: 400;
					color: #000000;
					font-size: 28rpx;
					border-radius: 28rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
