<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class='navhead flextwo searchnav'>
			<view class="navheadleft" @click="back">
				<view class="yourow">
					<image src="../../static/zuorow.png" mode=""></image>
				</view>
			</view>
			<view class="navmiddle flexone">
				<view class="middleleft">
					<image src="../../static/search.png" mode=""></image>
				</view>
				<view class="middleenter">
					<input type="text" placeholder="请输入商品，店铺搜索" placeholder-class="enterk" focus="false" @input="enterword" />
				</view>
			</view>
			<view class="souyou" @click="search">
				搜索
			</view>
		</view>
		<view class="searchbox searchbigbox">
			<!-- 历史搜索 -->
			<view class="commnonpadding" v-if="history">
				<view class="zuijin flextwo">
					<view class="zuititle">最近搜索</view>
					<view class="zuiyou" @click="clearhistory">清除历史搜索</view>
				</view>
				<view class="nodata" v-if="historylist.length==0">暂无数据</view>
				<view class="searchbox flexone" v-else>
					<view class="searchitem" v-for="(item,index) in historylist" :key="index" @click="historywordk" :data-word="item.keyword">{{item.keyword}}</view>
					<!-- <view class="searchitem" >sdsdf</view> -->
				</view>
				<view class="zuijin flextwo">
					<view class="zuititle">热门搜索</view>
				</view>
				<view class="nodata" v-if="hotlist.length==0">暂无数据</view>
				<view class="searchbox flexone" v-else>
					<view class="searchitem" v-for="(item,index) in hotlist" :key="index" @click="hotsearchk" :data-word="item.keyword">{{item.keyword}}</view>
				</view>
			</view>

			<!--关键字店铺 -->
			<view class="commnonpadding" v-if="shopshow">
				<view class="searchshopitem flexone" @click="shopsearch">
					<view class="searchitemimg">
						<image src="../../static/searchshop.png" mode=""></image>
					</view>
					<view class="searchname">“{{keyword}}”店铺</view>
				</view>
				<view>
				</view>
				<view class="searchshopitem" v-for='(item,index) in goodlist' :key="index" @click="searchgoodkl(item)">
					<view class="searchname">{{item.name}}</view>
				</view>
			</view>

			<!-- 搜索商品 -->
			<view class="searchgood commnonpadding" v-if="searchgood">
				
				<view class="nodata" v-if="goodlist.length==0">暂无数据</view>
				<view v-else>
					<view class="searchgooditem flexone boxsizing" v-for="(item,index) in goodlist" :key="index" @click="goodtail" :data-id="item.id">
						<view class="gooditemleft">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="gooditemright ">
							<view class="goodsouname morehidden">{{item.name}}</view>
							
							<view class="hui flextwo">
								<view class="saleprice">¥{{item.price}}</view>
								<view class="yisale">已售{{item.sales}}件</view>
							</view>
							<view class="goodaddress flextwo">
								<view class="goodaddressleft flexone">
									<view class='addressimg'>
										<image src="../../static/goodshop.png" mode=""></image>
									</view>
									<view class="addressname">{{item.store_name}}</view>
								</view>
								<view class="goodaddressright">
									{{item.distance}}km
								</view>
					
							</view>
					
						</view>
					</view>
				</view>
				

			</view>


			<!-- 搜索店铺 -->
			<view class="searchshop commnonpadding" v-if="searchgoodk">
				<view class="nodata" v-if="shoplist.length==0">暂无数据</view>
				<view v-else>
					<view class="searchgooditem flex boxsizing" v-for="(item,index) in shoplist" :key="index" @click="shopdetail" :data-id="item.id">
						<view class="shopleftimg">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="shopright">
							<view class="shopname">{{item.name}}</view>
							<view class="shopmiddle flexone">
								<view class="shopmiddleleft">
									{{item.score}}
								</view>
								<view class="shopmiddleright">
									<view class="star flex">
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.star>=2"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.star>=4"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.star>=6"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.star>=8"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
										<view class="starimg">
											<image src="../../static/shixing.png" mode="" v-if="item.star>=10"></image>
											<image src="../../static/kongxing.png" mode="" v-else></image>
										</view>
									</view>
									<view class="haoping">好评率{{item.probability}}</view>
								</view>
							</view>
							<view class="shopdizhi flexone">
								<view class="shopdiimg">
									<image src="../../static/shopaddress.png" mode=""></image>
								</view>
								<view class='shopli'>距离{{item.distance}}km</view>
							</view>
						</view>
					</view>
				</view>
				

			</view>

		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				history: true,
				shopshow: false,
				searchgood: false,
				keyword: '',
				searchgoodk: false,
				pages: 1,
				pagek: 1,
				shoplist: [],
				goodlist: [],
				historylist: [],
				hotlist: []
			}
		},
		onLoad() {
			// 获取搜索记录
			this.gethistory()

		},
		methods: {
			back() {
				uni.navigateBack({
					checked: true
				})
			},
			// 焦点事件
			// enterfocus(){


			// },
			onNavigationBarButtonTap(e) {
				console.log(e)
				console.log("success")
			},
			// 最近搜索
			historywordk(e){
				this.keyword=e.currentTarget.dataset.word;
				this.history = false;
				this.shopshow = true;
				this.searchgood = false;
				this.searchgoodk = false;
				this.pages=1;
				this.goodlist=[];
				this.serarchgoodlist();
			},
			// 历史搜索
			hotsearchk(e){
				this.keyword=e.currentTarget.dataset.word;
				this.history = false;
				this.shopshow = true;
				this.searchgood = false;
				this.searchgoodk = false;
				this.pages=1;
				this.goodlist=[];
				this.serarchgoodlist();
			},
			// 输入关键字搜索
			enterword(e) {
				this.keyword = e.detail.value;
				console.log(3348439090);
				console.log(this.keyword)
				
				if(this.keyword!=""){
					this.history = false;
					this.shopshow = true;
					this.searchgood = false;
					this.searchgoodk = false;
					this.pages=1;
					this.goodlist=[]
					this.serarchgoodlist();
					
				}
				
			},
			// 获取搜索记录
			gethistory() {
				let that = this;
				var url = 'store/store_search_log';
				var params = {

				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.historylist = res.data.data;
					console.log(that.historylist)


				}).catch((err) => {

				})
			},
			// 点击店铺名称去搜索
			shopsearch() {
				
				if(this.keyword!==''){
					this.history = false;
					this.shopshow = false;
					this.searchgood = false;
					this.searchgoodk = true;
					this.serachshop();
				}
				
			},
			
			// 清空历史记录
			clearhistory() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除历史记录',
					success: function(res) {
						if (res.confirm) {
							var url = 'store/clear_search_log';
							var params = {

							}
							app.post(url, params).then((res) => {
								console.log(res);
								uni.showToast({
									title: "删除历史记录成功",
									icon: "none"
								})
								that.gethistory()


							}).catch((err) => {

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 点商品名去搜索
			searchgoodkl(item){
				this.keyword=item.name;
				this.history = false;
				this.shopshow = false;
				this.searchgood = true;
				this.searchgoodk = false;
				this.pagek=1;
				this.goodlist=[]
				this.serarchgoodlist()
				
			},
			// 获取热门搜索
			gethotlist() {
				let that = this;
				var url = 'store/hot_search_log';
				var params = {}
				app.post(url, params).then((res) => {
					console.log(res);
					that.hotlist = res.data.data;
				}).catch((err) => {

				})
			},
			// 搜索店铺
			serachshop() {
				let that = this;
				var url = 'store/get_store_list';
				var params = {
					keyword: that.keyword,
					page: that.pages,
					pageNum: 10

				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.shoplist = that.shoplist.concat(res.data.data);
				}).catch((err) => {

				})
			},
			// 进入店铺详情
			shopdetail(e){
				let id=e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/nearshop/shopdetail?shopid='+id
				})
			},
			// 搜索商品
			serarchgoodlist() {
				console.log(3334)
				let that = this;
				var url = 'store_goods/get_store_goods';
				var params = {
					keyword: that.keyword,
					page: that.pagek,
					pageNum: 10
				}
				console.log(params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.goodlist = that.goodlist.concat(res.data.data);
				}).catch((err) => {
					console.log(err)

				})
			},
			// 进入商品详情页
			goodtail(e) {
				let id = e.currentTarget.dataset.id;
				// type 1 面访商品 2积分商城商品
				uni.navigateTo({
					url: '/pages/nearshop/goodtail?id=' + id + '&type=' + 3
				})
			},
			// 搜索
			search(e) {
				this.keyword = e.detail.value;
			},
		}

	}
</script>

<style>
	@import url('../../base/homepage');

	/* 	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
	} */

	.searchbigbox {
		margin-top: 150rpx !important;
	}

	.searchshoptop {
		padding: 40rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

	}

	.searchshopimg {
		widht: 32rpx;
		height: 32rpx;
		font-size: 0;
	}

	.searchkshopname {
		color: #232323;
		font-size: 28rpx;
		margin-left: 4rpx;
	}

	.searchbox {
		/* margin-top: 120rpx; */
	}

	.searchnav {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 999
			/* top: var(--status-bar-height); */
	}
</style>