<template>
	<view class="box">
		<view class="topTIs">门店确认收货后，才可选择预约时间</view>
		<view class="shopbox">
			<view class="shopline" v-for="(item,index) in queryShopList">
				<view class="shoplineLeft">
					<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
					<image src="../../static/img/noimg.png" mode="" class="shopImg" v-else></image>
				</view>
				<view class="shopright">
					<view class="shopTop">
						<view class="shopName">{{item.shopName}}</view>
						<image src="../../static/img/shopcall.png" mode="" class="shopCallImg"></image>
					</view>
					<view class="shopScore">
						<span class="shopScore1" v-if="item.shopScore">{{item.shopScore}}</span>
						<span class="shopScore2" v-if="item.shopScore">分</span>
						<span class="shopScore2" v-if="!item.shopScore">暂无评分</span>
						<span class="shopScore3">服务次数 {{item.sheetSum}}</span>
					</view>
					<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span v-if="item.endTime">{{item.endTime}}</span> </view>
				    <view class="shopBottom">
						<view class="shopBottomLeft">
							<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
							<span class="shopaddress">{{item.address}}</span>
						</view>
						<view class="Btn" @click="ckshop(item)">确定</view>
					</view>
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	components: {
		
	},
	data() {
		return {
			orderData:'',
			currentMileage:'',
			location:'',
			queryShopList:[],
		}
	},
	onShow() {
		
	},
	onLoad(opt) {
        this.orderData=opt.orderData;
		this.currentMileage=opt.currentMileage;
		this.location=uni.getStorageSync("location");
		this.getqueryShopList()
	},
	methods: {
		ckshop(item){
			console.log(item)
			var that=this;
			uni.setStorage({
				key: 'orderShop',
				data: item,
				success: function() {
					uni.navigateTo({
						url:'confirmOrder?orderData='+that.orderData+'&currentMileage='+that.currentMileage
					}) 
				}
			});
		},
	
		getqueryShopList(){
			uni.showLoading({ });
			var params={}
			if(this.location.lat){
				params={
					lat:this.location.lat,
					lng:this.location.lng,
					cityCode:this.location.cityCode,
				}
				
			}else{
				
			}
			this.$http('worldKeepCar/worldHome/getWorldShopInfoList', params,'GET').then(res => {
				uni.hideLoading();
				this.queryShopList=res.data
			})
		},
		
	
	}
}
</script>

<style scoped>
	.box{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	.topTIs{
		font-size: 26rpx;
		text-align: center;
		color: #C8841C;
		height: 72rpx;
		background: #FFF7EB;
		line-height: 72rpx;
		margin-bottom: 20rpx;
	}
	.shopbox{
		padding:0 16rpx;
	}
	.shopline{
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
	}
	.shopImg{
		width: 146rpx;
		height: 146rpx;
		border-radius: 10rpx;
	}
	.shopCallImg{
		width: 38rpx;
		height: 46rpx;
	}
	.shopTop{
		display: flex;
		justify-content: space-between;
		width: 510rpx;
	}
	.shopright{
		padding-left: 20rpx;
	}
	.shopName{
		font-size: 26rpx;
		color: #333333;
		line-height: 37rpx;
		width:450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shopScore1{
		font-size: 36rpx;
		color: #FF4F00;
	}
	.shopScore2{
		font-size: 22rpx;
		color: #FF4F00;
	}
	.shopScore3{
		font-size: 22rpx;
		color: #333333;
		padding-left: 20rpx;
	}
	.shopTime{
		font-size: 22rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
	}
	.Btn{
		width: 104rpx;
		height: 56rpx;
		background: #FF2400 linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}
	.shopBottom{
		display: flex;
		
	}
	.shopBottomLeft{
		width: 400rpx;
		font-size: 22rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
	}
	.shopaddress{
		padding-left: 10rpx;
	}
</style>