<template>
	<view class="shop-search-page">
		<HeaderCom></HeaderCom>
		<view class="search">
			<image class="search-icon" src="@/static/new/search.png" mode="aspectFit" @click="search"></image>
			<input type="text" placeholder="请输入内容" v-model="productName" class="input" placeholder-class="place-class">
			<view @click="search" class="cancel">搜索</view>
		</view>
		<view class="headerline">
			<view class="label">最近搜索</view>
			<image src="@/static/new/del.png" class="del-icon" mode="aspectFit" @click="del"></image>
		</view>
		<view class="main">
			<view class="item">
				<view v-for="(item,index) in historyList" :key="index" class="txt" @click="historySearch(item)">{{item}}</view>
				<!-- <image src="" class="del" mode=""></image> -->
			</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/shop/search"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {searchHistoryRecommend,searchHistoryPersonal,delSearchHistoryPersonal} from '@/API/shop.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default {
	mixins: [myMixins],
		data() {
			return {
				historyList:[],//搜索历史
				productName:""
			}
		},
		components:{HeaderCom},
		mounted() {
			
		},
		onShow() {
			this.getHistory()	
		},
		methods: {
			// goBack(){
			// 	uni.switchTab({
			// 		url:'/pages/shop/index'
			// 	})
			// },
			// 搜索
			search(){
				uni.navigateTo({
					url:`/pages/shop/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" scoped>
	page{
		background-color: #fff;
	}
	.shop-search-page{
		padding-top: 112rpx;
		.search{
			width: 100%;
			height: 88rpx;
			padding: 0 32rpx;
			background-color: #fff;
			position: relative;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search-icon{
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				top: 22rpx;
				left: 48rpx;
			}
			.input{
				width: 598rpx;
				height: 64rpx;
				background: rgba(0,0,0,0.04);
				border-radius: 16rpx;
				padding-left: 72rpx;
				color: #000;
				font-size: 32rpx;
			}
			.place-class{
				font-size: 32rpx;
				color: rgba(0,0,0,0.45);
			}
			.cancel{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.headerline{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;
			padding: 0 32rpx;
			.label{
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}
			.del-icon{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.main{
			margin-top: 24rpx;
			padding: 0 32rpx;
			.item{
				max-width: 686rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.txt{
					background: #F5F5F5;
					padding: 8rpx 16rpx;
					border-radius: 8rpx;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					max-width: 686rpx;
					height: 56rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>