<template>
	<div class="top-title_near">
		
		<div class="ranking_left">
			<slot>
				<div class="icon-border"></div>
				<div class="title">附近商家</div>
			</slot>
		</div>
		
		<div class="ranking_right">
			<div class="operationRaking" :class="activeID === 1 ?'active_status' :''" @click="optionSort(1)">综合排序</div>
			<div class="optimalScore" :class="activeID === 2 ?'active_status' :''" @click="optionSort(2)">评分最优</div>
			<div class="nearlyDistance" :class="activeID === 3 ?'active_status' :''" @click="optionSort(3)">距离最近</div>
		</div>
		
	</div>
		
	<div v-show="nearStatus === 'noMore'">
		<div
			class="nearlyStores"
			v-for="(item, index) in nearlyStores"
			:key="index"
			@click="clickMore(item)"
			>	
				<!-- 商家信息 -->
				<div class="storeInfo">
					<div style="display: flex;align-items: center;">
						<image :src="item.storeInfo.brandLogo" class="storeImg" alt="加载中1111111" />
					</div>
					<div v-if="item.storeInfo.status===-1" class="storeStatus">休息中</div>
					<div class="storeRight">
					<div class="storeName" style="display: flex;">
						<div>{{item.storeInfo.storeName }}</div>
						<div v-if="item.storeInfo.brandName">--</div>
						<div>{{ item.storeInfo.brandName }}</div>
					</div>
					<!-- 营业时间 -->
					 <div style="text-align: left;display: flex;">
						<div class="storeTime">营业时间：</div>
						<div class="storeTime1" v-if="item.storeInfo.openTime1 && item.storeInfo.closeTime1">{{$filters.processingHours(item.storeInfo.openTime1)}}-{{$filters.processingHours(item.storeInfo.closeTime1)}}</div>
						<div class="storeTime2" v-if="item.storeInfo.openTime2 && item.storeInfo.closeTime2">{{$filters.processingHours(item.storeInfo.openTime2)}}-{{$filters.processingHours(item.storeInfo.closeTime2)}}</div>
					 </div>
					<!-- 评分 -->
					<div class="storeRate">
						<div>门店评分：</div>
						<div v-if="item.storeInfo && item.storeInfo.storeWeeklyScore">
							<uni-rate :size="20" allow-half :value="(item.storeInfo.storeWeeklyScore *5) /100" />
						</div>
						<div v-else>暂无评分</div>
					</div>
					<!-- 满减 -->
					<div class="fullReduce">
						<div v-if="item.StoreDeductionInfo[0].deliveryFeeDeductionFee && item.StoreDeductionInfo[0].deliveryFeeDeductionSill" class="fullReduceFee">
						满{{item.StoreDeductionInfo[0].deliveryFeeDeductionSill/100}}减{{item.StoreDeductionInfo[0].deliveryFeeDeductionFee/100}}
						</div>
						<!-- 距离 -->
						<div v-if="String(item.storeInfo.distance).length<=3">距您{{item.storeInfo.distance}}m</div>
						<div v-else>距您{{(item.storeInfo.distance/1000).toFixed(2)}}km</div>
					</div>
					</div>
				</div>
				<!-- 商品  -->
				<div class="storeGood" v-if="item.StoreSkuInfo!==null && !isSearch" @click.stop="clickStop">
					<div v-for="(ite,i) in item.StoreSkuInfo" :key="i" class="storeGoodItem"  @click="toDetail(ite)">
						<image :src="$filters.urlToHttps(ite.img)" class="storeGoodImg"  alt="" />
						<div class="storeGoodName" >{{ite.skuName}}</div>
						<div class="storeGoodPrice" >{{(ite.price/100).toFixed(2)}}元/{{ite.unit}}</div>
					</div>
					<div class="storeGoodMore" @click="clickMore(item)">查看更多</div>
				</div>
				<!-- 搜索商品 -->
				<div class="storeGood" v-if="isSearch" @click.stop="clickStop">
					<div v-for="(ite,i) in item.searchSku" :key="i" class="storeGoodItem"  @click="toDetail(ite)">
						<image :src="$filters.urlToHttps(ite.img)" class="storeGoodImg"  alt="" />
						<div class="storeGoodName" >{{ite.skuName}}</div>
						<!-- <div class="storeGoodPrice" >{{(ite.price/100).toFixed(2)}}元/{{ite.unit}}</div> -->
						<div class="storeGoodPrice" >{{(ite.curPrice/100).toFixed(2)}}元/{{ite.unit}}</div>
					</div>
					<div class="storeGoodMore" @click="clickMore(item)">查看更多</div>
				</div>
				<!-- <div class="enterStore" v-else >
					<div style="padding:20rpx;background:rgba(78, 179, 49, 0.9);color:#fff;border-radius: 10rpx;border:1rpx solid red;"> </div>
				</div> -->
			</div>
	</div>

	<!-- 加载更多 -->
	<div style="background:#fff;margin-top:20rpx" v-if="!isSearch">
		<uni-load-more :status="nearStatus" ></uni-load-more>
	</div>

</template>
  
  <script>
//   import apiStore from '@/apis/apiStore';
  import { mapGetters, mapActions } from "vuex";
  import {debounce} from '@/utils'
  import {store} from "@/store";
  import { jumpPage } from "@/utils/uniapi.js"; 
  export default {
	props:{
		storeList:{
			type:Array,
			default:() => []
		},
		isSearch:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return  {
			// nearlyStores:[],
			nearStatus:'loading',
			originalNearlyStores:[],
			activeID: 1,
		}
	},
	// watch:{
	// 	storeList:{
	// 		handleError(val){
	// 			console.log('打印val的值',val)
	// 		}
	// 	}
	// },
	computed:{
		...mapGetters({
			myLocation:"indexPage/myLocation",
			reLocation: "indexPage/reLocation",
			storeID: "indexPage/storeID",
			isLogin: "login/isLogin",
		}),
		nearlyStores(){
			if(this.storeList && this.storeList.length>0) {
				this.nearStatus = 'loading'
				this.originalNearlyStores = [...this.storeList]	// 原始数据
				this.activeID = this.activeID !==1 ? this.activeID : 1	// 获取推荐商家时，为综合排序
				this.nearStatus = 'noMore'
			}
			return this.storeList
		}
	},
	methods:{
		// 查看更多
		async clickMore(item) {
			if(item.dnsType) store.commit('indexPage/changeDNS',item.dnsType) // 更换域名
			else store.commit('indexPage/changeDNS','wxC4') // 更换域名
			// console.log('item.storeInfo.storeIDn,,,99999999',item.storeInfo.storeID)
			store.commit("indexPage/changeStoreID", [+item.storeInfo.storeID])
			// if(this.isLogin ) await store.dispatch('cartPage/getCarList', store.getters['indexPage/storeID'])	
			if(this.isLogin ) {
				await store.dispatch('cartPage/getCarList', this.storeID)	// 获取购物车列表
				await store.dispatch('addressVue/getList')		// 加载地址列表
			}
			if(!(this.storeMap && this.storeMap[this.storeID[0]])) await store.dispatch('indexPage/getStoreInfo', { storeID: this.storeID[0] })	// 获取当前门店的信息
			jumpPage('navigateTo','/pagesGoods/good/index')
		},
		// 跳转到详情页
		toDetail(ite) {
			// if(ite.storeID !== this.storeID[0]) 
			store.commit("indexPage/changeStoreID", [+ite.storeID])
			jumpPage('navigateTo', `/pagesGoods/good-detail/index?skuID=${ite.skuID}&storeID=${ite.storeID}`)
		},
		clickStop(){
			// console.log('阻止默认事件')
		},
		optionSort: debounce(function (e) {
			this.activeID = e
			this.nearStatus = 'loading'
			switch (e) {
				case 1:
					this.nearlyStores = [...this.originalNearlyStores]
					break
				case 2:
					this.nearlyStores.sort(this.ArraySort('storeWeeklyScore','L2S'))
					break
				case 3:
					this.nearlyStores.sort(this.ArraySort('distance', 'S2L'))
					break
			}
			this.nearStatus = 'noMore'
		},500),
		// 数组排序	type  L2S 大 ——> 小		S2L  小 ——> 大
		ArraySort(property,type){
 		  	return function (a,b){
		    	let value1=a.storeInfo[property]
				let value2 = b.storeInfo[property]
		    	return type === 'L2S'? value2 - value1 : value1 - value2
		  	}
		},
	}
  }
  </script>
  
  <style lang="scss" scoped>
  @import './index.scss';
  </style>