<template>
	<view :style="viewColor">
		<view class='productList'>
			<view class='search acea-row row-between-wrapper'>
				<!--#ifdef H5-->
				<view class="back" @click='set_where(1)'>
					<view class="iconfont icon-xiangzuo"></view>
				</view>
				<!--#endif-->
				
				<view style="text-align: right;" v-if="tabIndex==1" class='iconfont' :class='is_switch==true?"icon-pailie":"icon-tupianpailie"'
				 @click='Changswitch'></view>
				  <!-- @click="showMaoLocation(latitude,longitude)" -->
				<!-- <view v-else-if="mer_location == 1" style="text-align: right;" class='iconfont icon-dingwei'></view> -->
				<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
					<input placeholder='搜索' placeholder-class='placeholder' confirm-type='search' name="search" v-model='where.keyword'
					 @confirm="searchSubmit"></input>
					<view class="searchBtn" @click.stop="searchSubmit">
						搜索
					</view>
				</view>
			</view>
			
			
			<!-- 店铺 -->
			<block v-if="tabIndex == 2">
				<view v-if="storeList.length" class="store-wrapper">
					<view class="store-item" v-for="(item,index) in storeList" :key="index"  @click="goStore(item.mer_id)">
						<view class="newStoreItem">
							<view class="storeInfo">
								<image :src="item.mer_avatar" mode=""></image>
								<view class="storeDesc">
									<view class="storeTitle">
										{{item.mer_name}}
									</view>
									<view class="descText">
										<text>{{item.type_name}}</text>
										<text>{{item.distance}}</text>
									</view>
									<view class="phone">
										{{item.mer_phone}}
									</view>
								</view>
							</view>
							<view class="storeAddr"  @click.stop="showMaoLocation(item.lat,item.long)">
								<text class='iconfont icon-dingwei'></text>
								<text>{{item.mer_address}}</text>
							</view>
						</view>
						<!-- <view class="head">
							<view class="left-wrapper">
								<view class="logo">
									<image :src="item.mer_avatar" mode=""></image>
								</view>
								<view class="con-box">
									<view class="name acea-row row-between-wrapper line1">
										<text class="mer_name line1">{{item.mer_name}}</text>
										<image v-if="margin_ico_switch==1 && margin_ico && item.is_margin == 10" :src="margin_ico" class="store-margin"></image>
										<text v-if="item.type_name" class="font-bg-red" style="background: #116636 !important;border:none !important;">{{item.type_name}}</text>
										<text v-else-if="item.is_trader" class="font-bg-red b-color">自营</text>
									</view>
									<view class="star-box">
										<view class="star">
											<view class="star-active" :style="{width: `${item.allScore}%`, backgroundImage: `url(${domain}/static/diy/score1${keyColor}.png)`}"></view>
										</view>
										<view class="num">{{item.product_score}}</view>
										<view class="line" v-if="item.distance"></view>
										<view class="distance" v-if="item.distance" @click="showMaoLocation(item.lat,item.long)">{{item.distance}}
											<view class="iconfont icon-xiangyou"></view>
										</view>
									</view>
								</view>
							</view>
							<view class="link" @click="goStore(item.mer_id)">进店</view>
						</view> -->
						<!-- <view class="pic-wrapper">
							<view class="pic-item" v-for="(goods,index) in item.recommend" :key="index">
								<navigator :url="`/pages/goods_details/index?id=${goods.product_id}`">
									<image :src="goods.image" mode=""></image>
									<view class="price">
										<text>￥</text>{{goods.price}}
									</view>
								</navigator>
							</view>
						</view> -->
					</view>
					<view class='loadingicon acea-row row-center-wrapper' v-if='loading'>
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view>
					
				</view>
				<view class='no-shop' v-if="!storeList.length && !loading">
					<view class='pictrue' style="margin: 0 auto;">
						<image src='/static/images/no-Cart.png'></image>
						<text>暂无店铺，快去搜索其他店铺吧</text>
					</view>
				</view>
			</block>
			<rightSlider1 v-if="rightBox" :status="rightBox" :activeIndex="activeIndex" :brandList="brandList" :price_on="where.price_on" :price_off="where.price_off"
			 @confirm="confirm" @close="close"></rightSlider1>
		</view>
		
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #ifndef H5 -->
		<passwordPopup></passwordPopup>
		<!-- #endif -->
	</view>
</template>

<script>
	// let statusBarHeight = uni.getSystemInfoSync().statusBarHeight*2 + 'rpx';
	// let statusBarHeightNum = uni.getSystemInfoSync().statusBarHeight*2;
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		
		storeMerchantList,
		getGeocoder
	} from '@/api/store.js';
	
	import { merClassifly, getStoreTypeApi } from '@/api/store.js';
	import { configMap } from "@/utils";
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import authorize from '@/components/Authorize';
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		getconfig,
	} from '@/api/public.js';
	const app = getApp();
	export default {
		components: {
			
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize,
		},
		watch: {
		
		},
		data() {
			return {
				
				where: {
					cate_id: '',
					order: '',
					price_on: '',
					price_off: '',
					brand_id: '',
					keyword: '',
					is_trader: '',
					page: 1,
					limit: 30
				},
				
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				title: '',
				
				
				tabIndex: 2,
				// 商铺列表
				storeList: [],
				sotreParam: {
					keyword: '',
					page: 1,
					limit: 10,
					order: '',
					category_id : '',
					type_id: ''
				},
				storeKey: 0,
				storeScroll: true,
				detaile_address: "", //详细地址
				recommend_address: "", //当前地点
				latitude: "",
				longitude: "",
				mer_location: 0,
				count: 0, //店铺总条数
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				storeTypeArr: [], //店铺类型
				merList: [], //商户分类
				mTop: 0,
				activeIndex: 0,
			};
		},
		onLoad: function(options) {
		
			this.getStoreType();
			
		},
		onReady() {
		},
		mounted() {
			uni.getStorage({
				key: 'GLOBAL_DATA',
				success: (res) => {
					console.log(res);
					if (res.data.mer_location == 1) {
						this.mer_location = res.data.mer_location
						this.selfLocation()
					}
				}
			});
			// this.mTop = this.hide_mer_status == 0 ? '238rpx' : '170rpx'
			// this.mTop = this.hide_mer_status == 0 ? statusBarHeightNum+70+'rpx' : '170rpx'
			
		},
		computed: {
			
		},
		// 滚动监听
		onPageScroll() {
			uni.$emit('scroll');
		},
		methods: {
			// rightClick() {
			// 	uni.navigateBack({delta:-1})
			// },
			//查看地图
			showMaoLocation(lat, lon) {
				console.log(lat, lon)
				if (!lat || !lon) return this.$util.Tips({
					title: '请设置允许商城访问您的位置！'
				});
				//#ifdef H5
				if (this.$wechat.isWeixin() === true) {
					this.$wechat.seeLocation({
						latitude: Number(lat),
						longitude: Number(lon)
					}).then(res=>{
						console.log('success');
					})
				}else{
					//#endif
					uni.openLocation({
						latitude: parseFloat(lat),
						longitude: parseFloat(lon),
						scale: 8,
						geocode: true,
						name: '当前位置',
						address: this.detaile_address,
						success: function(res) {
							console.log(res)
						},
					});
				// #ifdef H5
				}
				//#endif
			},
			//获取定位
			selfLocation() {
				let self = this
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						this.latitude = res.latitude
						this.longitude = res.longitude
						console.log(res)
						this.storeMerchantList('')
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							this.detaile_address = res.data.address;
							this.recommend_address = res.data.formatted_addresses.recommend;
						})
					},
					complete: function() {
						// self.getList();
					}
				});
			},
			// 获取商户分类
			getClassfication: function() {
				let temp = []
				merClassifly()
					.then(res => {
						temp = res.data.map(item => {
							return {
								...item,
								check: false
							}
						})
						if (this.sotreParam.category_id.length > 0) {
							this.sotreParam.category_id.forEach((ids, index) => {
								temp.forEach(el => {
									if (ids == el.merchant_category_id) {
										el.check = true
									}
								})
							})
						}
						this.merList = temp

					})
					.catch(res => {
						this.$util.Tips({
							title: res
						});
					});
			},
			// 获取店铺类型
			getStoreType: function() {
				let temp = []
				getStoreTypeApi()
					.then(res => {
						temp = res.data.map(item => {
							return {
								...item,
								check: false
							}
						})
						if (this.sotreParam.type_id.length > 0) {
							this.sotreParam.type_id.forEach((ids, index) => {
								temp.forEach(el => {
									if (ids == el.mer_type_id) {
										el.check = true
									}
								})
							})
						}
						this.storeTypeArr = temp
					})
					.catch(res => {
						this.$util.Tips({
							title: res
						});
					});
			},
			searchSubmit(){
				console.log("uuuuu",this.where.keyword)
				this.sotreParam.page = 1;
				this.storeList=[]
				this.storeMerchantList('')
				
			},
			// 查找店铺
			storeMerchantList(type) {
				// if (!this.storeScroll) return
				this.loading = true
				let serachData = {
					keyword: this.where.keyword,
					page: this.sotreParam.page,
					limit: this.sotreParam.limit,
					is_trader:0
				}
				if (this.latitude) {
					serachData.location = this.latitude + ',' + this.longitude
				}
				storeMerchantList(serachData).then(res => {
					res.data.list.forEach(item => {
						var tempNum = parseFloat(item.product_score) + parseFloat(item.service_score) + parseInt(item.postage_score)
						tempNum = tempNum / 3 / 5 * 100
						item.allScore = tempNum.toFixed(2)
					})
					this.storeScroll = res.data.list.length >= this.sotreParam.limit
					this.storeList = this.storeList.concat(res.data.list)
					this.count = res.data.count
					this.loading = false
				})
			},
			// 店铺排序
			storeTab(key) {
				if (this.loading) return
				this.storeKey = key
				this.sotreParam.order = this.shopTabs[key].order
				this.sotreParam.page = 1
				this.storeScroll = true
				this.storeList = []
				this.storeMerchantList()
			},
			
			onLoadFun: function(e) {
				this.isShowAuth = false
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
		
			goStore: function(id) {
				if (this.hide_mer_status != 1) {
					uni.navigateTo({
						url: `/pages/store/home/index?id=${id}`
					})
				}
			}
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			if (this.tabIndex == 1) {
				if (this.productList.length > 0) {
					this.get_product_list(false);
				} else {
					this.get_host_product();
				}
			} else {
				if (this.count === this.storeList.length) {
					if (this.count === 0) {
						return
					}
					uni.showToast({
						title: '已加载全部',
						icon: 'none',
						duration: 1000
					});
				} else {
					this.sotreParam.page += 1
					this.storeMerchantList()
				}
			}
		},
		onPullDownRefresh(){
			// setTimeout(()=>{
			// 	const newList = this.productList.reverse();
			// 	this.productList = newList;
			// 	uni.stopPullDownRefresh();
			// },500)
		}
	}
</script>

<style lang="scss" scoped>
	
	.b-color {
		background:$btn-color !important;
		border: 1px solid $btn-inActive !important;
	}
	.productList .search {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: fixed;
		height: 110rpx;
		left: 0;
		// top: 0;
		z-index: 9;
		background: #fff;
		.icon-dingwei {
			color: #666666;
			font-weight: 0;
			font-size: 40rpx;
			line-height: 86rpx;
			// width: 62rpx;
		}
	}
	.productList .search .back {
		display: flex;
		align-items: center;
		width: 40rpx;
		height: 60rpx;
		.iconfont {
			color: #fff;
			font-size: 36rpx;
		}
	}
	.productList .search .input {
		flex: 1;
		height: 80rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #F5F5F7;
		margin-left:19rpx;
		position: relative;
		.searchBtn{
			position: absolute;
			z-index:99;
			right:0;
			top:0;
			width: 120rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(0deg, #89B929, #116636);
			border-radius: 33px;
			
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		
	}
	.productList .search .input input {
		flex: 1;
		height: 100%;
		font-size: 26rpx;
		margin-left: 10rpx;
		
		
	}
	.productList .search .input .placeholder {
		color: #999;
	}
	.productList .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}
	.productList .search .icon-pailie,
	.productList .search .icon-tupianpailie,
	.productList .search .iconempty {
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}
	.no-shop {
		// margin-top: 240rpx;
		background-color: #fff;
		padding-bottom: calc(100% - 109rpx);
		.pictrue {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: $uni-nothing-text;
			image {
				width: 414rpx;
				height: 336rpx;
			}
		}
	}
	.spin {
		display: block;
		transform: rotate(180deg);
		font-size: 36rpx;
	}
	.icon-xiala1 {
		margin-top: 6rpx;
	}
	.icon-shaixuan {
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.store-wrapper {
		// margin-top: 240rpx;
		padding-top: 110rpx;
		border-top: 1px solid #F6F6F6;
		padding-bottom: 20rpx;
		.star-box {
			display: flex;
			align-items: center;
			.line {
				width: 2rpx;
				height: 20rpx;
				background: #BFBFBF;
				margin: 0 12rpx;
			}
			.star {
				position: relative;
				width: 111rpx;
				height: 19rpx;
				background: url(~pages/columnGoods/images/star.png);
				background-size: 111rpx 19rpx;
			}
			.star-active {
				position: absolute;
				left: 0;
				top: 0;
				width: 111rpx;
				height: 19rpx;
				overflow: hidden;
				background: url(~pages/columnGoods/images/star_active.png);
				background-size: 111rpx 19rpx;
			}
			.num {
				color: #E53623;
				font-size: 28rpx;
				margin-left: 13rpx;
			}
		}
		.store-item {
			margin:24rpx;
			background-color: #fff;
			border-radius: 20px;
			.newStoreItem{
				.storeInfo{
					display: flex;
					padding-bottom: 20rpx;
					padding: 30rpx;
					
					image{
						height:160rpx;
						width:160rpx;
						background: #C9D7E4;
						border-radius: 10px;
						flex-shrink: 0;
					}
					.storeDesc{
						flex:1;
						margin-left:22rpx;
						width: calc(100% - 180rpx);
						.storeTitle{
							
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.descText{
							
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #C0C5CA;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top:29rpx;
						}
						.phone{
							margin-top:24rpx;
							
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
				.storeAddr{
					border-top:1px solid #EAEAEA;
					.icon-dingwei{
						font-size: 26rpx;
					}
					padding:25rpx;
					
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
		
		}
	}
</style>
