<template>
	<view class="storeList">
		<view style="width: 100%;height: 50px;background: #FFF;padding: 9px 15px;" >
			<u-search placeholder="请输入商户名" v-model="msg.Name" radius="40" action-text="搜索" shape="round" @search='gosearch' @custom='gosearch' ></u-search>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
		<view v-if="g.length > 0" style="
        height: calc(100vh - 90px);
        width: 100%;
        overflow: hidden;
		margin-top: 7px;
      ">
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
			  style="height: 100%; padding-bottom: 0px;">
				<view class='store' style="padding: 7.5px 15px;" v-for="(c, i) in g" :key="i" @click="gostoreDetails(c)"> 
					<view class="box" >
						<image mode="aspectFill" class="img"   :src="c.CoverImg"  ></image>
						<view class="content" >
							<view class="c-t">
								<view class="c-t-l">
									{{c.Name}} 
								</view>
								<view class="c-t-r">
									距离：{{c.KM>1?c.KM+'km':(c.KM*1000)+'m'}}
								</view>
							</view>
							<view class="address">
								{{c.Address}} 
							</view>
							<view class="c-t" style="justify-content: space-between;">
								<view>
									<image mode="aspectFill" style="width: 11px;height: 11px;"  src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/osTel.png'/>
									<text class="tel">{{c.Tel}} </text>
								</view>
								<view style="font-size: 11px;color: #FFC86D;">
									{{c.consumptionObj?c.consumptionObj.consumptionStoreName:''}}
								</view>
							</view>
						</view>
						<view class="choice" @click.stop="radioChange">
							<u-radio-group v-model="currentChosen" @change='radioChange'>
								<u-radio 
								shape="circle"
								:name="c.Id"
								:icon-size="40"
								:active-color="mainColor"> </u-radio>
							</u-radio-group>
						</view>
					</view>
					
				</view>
				<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
				 :margin-bottom="20" bg-color="#FAF8F9" />
			</scroll-view>
		</view>
		<view v-if="!loading && g.length== 0 " style="
		  height: calc(100vh - 90px);
		  width: calc(100vw - 20px);
		  padding-top: 10px;
		">
			<u-empty text="没有找到对应的门店" font-size="36" mode="list" ></u-empty>
		</view>
	
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				pageTitle: "门店列表",
				status: "loadmore",
				sortStatus: 1,
				mainColor: "",
				loading: true,
				page_count: 1,
				g: [],
				catId: 0,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				list:[
					{name: '距离'},
					{name: '热度'},
				],
				current: 0,
				showLoading: true,
				sortShowType: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				
				currentChosen: "",
				msg: {
					pageIndex: 1,
					pageSize: 10,
					Name: '',
					CurrentPosition: '',
					OrderByType: 3,
				},
				
			};
		},
		
		onLoad(option) {
			this.mainColor = this.$uiConfig.mainColor;
			
			this.msg.CurrentPosition = uni.getStorageSync("position") && uni.getStorageSync("position").position?uni.getStorageSync("position").position:'';
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.init();
			
		},
		methods: {
			
			change(e) {
				this.current = e;
				if(e==0){
					this.msg.OrderByType = 3
				}else if(e==1){
					this.msg.OrderByType = 5
				}
				this.g = [];
				this.msg.pageIndex = 1
				this.init();
				
				
			},
			gosearch(){//确认搜索
				this.g = [];
				this.msg.pageIndex = 1
				this.init();
			},
			init() {
				
				this.loading = true;
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletStores/GetStorePage',
						data: this.msg
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							let storeId = uni.getStorageSync("storeId") && uni.getStorageSync("storeId").storeId?uni.getStorageSync("storeId").storeId:0;
							if(storeId>0){
								res.data.pageData.forEach(x=>{
									if(x.Id == storeId){
										this.currentChosen = x.Id
									}
								})
							}
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}
						uni.hideLoading();
						
					}
				);
			
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.status = "loading";
					this.msg.pageIndex++;
					this.init();
				} else {
					
					this.status = "nomore";
				}
			},
			gostoreDetails(item) {
				
				uni.setStorageSync("storeId", {storeId:item.Id});
				this.currentChosen = item.Id
				let pages = getCurrentPages(); // 当前页面
				let beforePage  = pages[pages.length - 2]; // 前一个页面
				setTimeout(()=>{
					 uni.navigateBack({
						 delta:1,
						 success: function() {
							 beforePage.$vm.getCurrentStore(); // 执行前一个页面的方法
						 }
					 });
				},100)
				// uni.navigateTo({
				// 	url: "/pages/reserve/storeDetails?id="+item.Id,
				// });
			},
			radioChange(e){
				uni.setStorageSync("storeId", {storeId:this.currentChosen});
				let pages = getCurrentPages(); // 当前页面
				let beforePage  = pages[pages.length - 2]; // 前一个页面
				setTimeout(()=>{
					 uni.navigateBack({
						 delta:1,
						 success: function() {
							 beforePage.$vm.getCurrentStore(); // 执行前一个页面的方法
						 }
					 });
				},100)
			},
		},
	};
</script>

<style>
	.storeList {
		height: 100%;
		background: #FAF8F9;
		position: relative;
	}
	.storeList .store {
		width: 100%;
		/* height: 184px; */
		/* background: #FAF8F9; */
	}
	.storeList .box{
		width: 100%;
		height: 100%;
		box-shadow:0 6px 10px 1px #F2F2F2;
		font-family: aa;
		position: relative;
		border-radius: 6px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.storeList .img{
		width: 100%;
		height: 94px;
		border-top-left-radius:6px ;
		border-top-right-radius: 6px;
		/* border-radius: 6px; */
	}
	.storeList .content{
		width: 100%;
		height: 90px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10px 15px;
		background: #FFF;
		/* position: absolute;
		left: 0;
		bottom: 0; */
		
	}
	.storeList .c-t{
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	.storeList .c-t-l{
		width: 1;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 14px;
		color: #000000;
	}
	.storeList .c-t-r{
		width: 90px;
		text-align: right;
		font-size: 12px;
		color: #111111;
	}
	.storeList .tel{
		font-size: 12px;
		color: #555555;
		margin-left: 5px;
	}
	.storeList .address{
		font-size: 11px;color: #727272;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.storeList .choice{
		position: absolute;
		left: 0;
		top: 0;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}

</style>
