<template>
	<view class='store' 
	:style="{
		'margin-top':goods.PaddingTop+'px',
		'padding-right':goods.PaddingRight+'px',
		'margin-bottom':goods.PaddingBottom+'px',
		'padding-left':goods.PaddingLeft+'px',
		'background-color': goods.backgroundColor,
		
	}"
	@click="goUrl" >
		<view class="box" :style="{'border-radius':goods.SearchFilletPX+'px'}" v-if="goods.IsShowStoreImg==true" @click="gostoreDetails">
			<image mode="aspectFill" class="img" :style="{'border-radius':goods.SearchFilletPX+'px'}"  :src="storeinfo.storeCoverImg"  ></image>
			<view class="switchstore" @click.stop="goStorelist()">
				<view class="switchstore-box">
					<image style="width: 8px;height: 7px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/switchstore.png"/>
					<text style="font-size: 10px;color: #111111;">切换门店</text>
				</view>
				
			</view>
			<view class="content" >
				<view class="c-t">
					<view class="c-t-l">
						{{storeinfo.storeName?storeinfo.storeName:'暂无数据'}} 
					</view>
					<view class="c-t-r">
						距离：{{storeinfo.distance>1?storeinfo.distance+'km':(storeinfo.distance*1000)+'m'}}
					</view>
				</view>
				<view class="address">
					{{storeinfo.storeAddress?storeinfo.storeAddress:''}} 
				</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">{{storeinfo.storeTel?storeinfo.storeTel:''}} </text>
					</view>
					<view style="font-size: 11px;color: #FFC86D;">
						{{storeinfo.consumptionObj && storeinfo.consumptionObj.consumptionStoreName?storeinfo.consumptionObj.consumptionStoreName:''}}
					</view>
				</view>
			</view>
		</view>
		<view v-else @click="gostoreDetails">
			<view class="content2" >
				<view class="c-t">
					<view class="c-t-l">
						{{storeinfo.storeName?storeinfo.storeName:'暂无数据'}} 
					</view>
					<view class="c-t-r" style="width: 80px;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
						
						<view class="switchstore2" @click.stop="goStorelist()" >
							<image style="width: 8px;height: 7px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/switchstore.png"/>
							<text style="font-size: 10px;color: #111111;">切换门店</text>
						</view>
					</view>
				</view>
				<view class="address">
					<view class="c-t-l" style="font-size: 11px;color: #727272;">
						{{storeinfo.storeAddress?storeinfo.storeAddress:''}} 
					</view>	
					<view class="c-t-r">
						距离：{{storeinfo.distance?(storeinfo.distance>=1000?(storeinfo.distance/1000).toFixed(2)+'km':storeinfo.distance+'m'):"0"}}					</view>
					</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">{{storeinfo.storeTel?storeinfo.storeTel:''}} </text>
					</view>
					<view style="font-size: 11px;color: #FFC86D;">
						{{storeinfo.consumptionObj?storeinfo.consumptionObj.consumptionStoreName:''}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['goods','storeinfo'],
		data() {
			return {
				windowWidth: 0,
				posiTop: 0,
				// storeinfo: {},
				position:'',
			}
		},
		created() {
		},
		methods:{
			goUrl(){
				
			},
			goStorelist(){//门店选择
				uni.navigateTo({
					url:"/pages/reserve/storeList"
				})
			},
			gostoreDetails() {
				uni.navigateTo({
					url: "/pages/reserve/storeDetails?id="+this.storeinfo.storeId,
				});
			},
		}
	}
</script>

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