<template>
	<view class="content">
		<view class='navhead flextwo searchnav'>
			<!-- <view class="navheadleft">
				<view class="yourow">
					<image src="../../static/zuorow.png" mode=""></image>
				</view>
			</view> -->
			<view class="navmiddle navmiddlek flexone">
				<view class="middleleft">
					<image src="../../static/search.png" mode=""></image>
				</view>
				<view class="middleenter">
					<input type="text" placeholder="请输入商品，店铺搜索" placeholder-class="enterk" @input="enterword" />
				</view>
			</view>
			<view class="souyou" @click="search">
				搜索
			</view>
		</view>
		<view class="tapnav flexone">
			<!-- :class="order==2?'nearactive':''" -->
			<!-- :class="order==3?'nearactive':''"  -->
			<view class="tapnavitem" :class="order==2?'nearactive':''" @click="rangge" :data-id="2">距离最近</view>
			<view class="tapnavitem pingfen" @click="rangge" :class="order==3?'nearactive':''" :data-id="3">评分最高</view>
		</view>

		<view class="nodata" v-if="shoplist.length==0">暂无数据</view>
		<view class="searchshop commnonpadding" v-else>
			<!-- v-fo="(item,index) in shoplist" :key="" -->
			<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 class="searchgooditem flex boxsizing">
				<view class="shopleftimg">
					<image src="../../static/shop.png" mode=""></image>
				</view>
				<view class="shopright">
					<view class="shopname">湖北省南阳市南阳面粉厂</view>
					<view class="shopmiddle flexone">
						<view class="shopmiddleleft">
							8.2
						</view>
						<view class="shopmiddleright">
							<view class="star flex">
								<view class="starimg">
									<image src="../../static/shixing.png" mode=""></image>
								</view>
								<view class="starimg">
									<image src="../../static/shixing.png" mode=""></image>
								</view>
								<view class="starimg">
									<image src="../../static/shixing.png" mode=""></image>
								</view>
								<view class="starimg">
									<image src="../../static/shixing.png" mode=""></image>
								</view>
								<view class="starimg">
									<image src="../../static/kongxing.png" mode=""></image>
								</view>
							</view>
							<view class="haoping">好评率96%</view>
						</view>
					</view>
					<view class="shopdizhi flexone">
						<view class="shopdiimg">
							<image src="../../static/shopaddress.png" mode=""></image>
						</view>
						<view class='shopli'>距离256km</view>
					</view>
				</view>
			</view>
 -->
		</view>

		<!-- 底部导航 -->
		<view class="teacherfooter">
			<view class="teacherfootitem" @click="selnav" :data-id="1">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==1?'../../static/tieziactive.png':'../../static/tiezi.png'"></image>
				</view>
				<view class="teacherfootname " :class="footersel==1?'activename':''">首页</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="2">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==2?'../../static/nearshopactive.png':'../../static/nearshop.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==2?'activename':''">附近店铺</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="3">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==3?'../../static/luntanctive.png':'../../static/luntan.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==3?'activename':''">中面论坛</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="4">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==4?'../../static/useractive.png':'../../static/user.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==4?'activename':''">个人中心</view>
			</view>
		</view>

	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showbanben: false,
				footersel: 2,
				keyword: '',
				order: '',
				shoplist: []
			}
		},
		onLoad() {
			this.getshoplist()
		},
		methods: {

			// 顶部切换
			rangge(e) {
				this.order = e.currentTarget.dataset.id;
				this.shoplist = [];
				this.page = 1;
				this.getshoplist()
			},
			// 店铺详情
			shopdetail(e){
				let id=e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/nearshop/shopdetail?shopid='+id
				})
			},
			// 底部导航跳转
			selnav(e) {
				console.log(e)

				let id = e.currentTarget.dataset.id;
				console.log(id)
				if (id == 1) {
					uni.navigateTo({
						url: '../homepage/homepage'
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: "../nearshop/nearshop"
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: "../luntan/luntan"
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: "../usercenter/my"
					})
				}
			},
			enterword(e) {
				this.keyword = e.detail.value;
			},

			search() {
				this.page = 1;
				this.shoplist = [];
				this.getshoplist()
			},
			//获取店铺列表
			getshoplist() {
				let that = this;
				var url = 'store/get_store_list';
				var params = {
					keyword: that.keyword,
					order: that.order,
					page: that.page,
					pageNum: 10
				}
				console.log('参数', params)
				app.post(url, params, "post").then((res) => {
					console.log(res);
					that.shoplist = that.shoplist.concat(res.data.data)

				}).catch((err) => {
					console.log(err)

				})
			}



		}

	}
</script>

<style>
	@import url('../../base/homepage');
	.nodata{
		margin:150rpx auto 0;
	}
</style>