<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"
							@click="call(item.mobilePhone)"></image>
					</view>
					<view class="brandsBg">
						<span class="shopScore1" v-if="item.shopScore">{{item.shopScore}}</span>
						<span class="shopScore11" v-if="item.shopScore">分</span>
						<span class="shopScore2" v-if="!item.shopScore">暂无评分</span>
						<view class="brands" v-if="item.brands" v-for="(barnd,index2) in item.brands.split(',')">{{barnd}}</view>
					</view>
					
					<view class="timeBg">
						<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
								v-if="item.endTime">{{item.endTime}}</span> </view>
						<span class="shopScore3">服务次数 {{item.sheetSum}}</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 v-if="fromChangeStore == 'true'">
							<view class="grayBtn" v-if="item.shopId == oldShopID" >确定</view>
							<view v-else class="Btn" @click="ckshop(item)">确定</view>
						</view>

						<view v-else class="Btn" @click="ckshop(item)">确定</view>
					</view>

				</view>
			</view>
			<nodata v-if="queryShopList.length<1"></nodata>
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	export default {
		components: {
           nodata
		},
		data() {
			return {
				orderData: '',
				currentMileage: '',
				location: '',
				queryShopList: [],
				fromChangeStore: '',
				oldShopID: '',
				brand:'',
			}
		},
		onShow() {

		},
		onLoad(opt) {
			this.orderData = opt.orderData;
			this.currentMileage = opt.currentMileage;
			var selectCity = uni.getStorageSync("selectCity");
			var dingw = uni.getStorageSync("locationCity")
			if(selectCity){
				var objdata={
					cityCode:selectCity.code,
					cityName:selectCity.city,
				}
				if(dingw.cityName==selectCity.city){
					objdata.lat=dingw.lat
					objdata.lng=dingw.lng
				}
				this.location=objdata
			}else{
				this.location = uni.getStorageSync("locationCity");
			}
			
			this.brand = opt.brand;
			
			this.getqueryShopList()

			this.fromChangeStore = opt.fromChangeStore;
			this.oldShopID = opt.oldShopID;
			
		},
		methods: {
			call(mobilePhone) {
				uni.makePhoneCall({
					phoneNumber: mobilePhone
				});
			},
			ckshop(item) {
				console.log(item)
				var that = this;

				if (that.fromChangeStore == 'true') {
					console.log('更换门店');
					// 从更换门店 进来 
					uni.setStorage({
						key: 'changeStore',
						data: item,
						success: function() {
							uni.navigateBack({

							})
						}
					});
				} else {
					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,
						comprehensive: 1,
						brand:this.brand,
					}
				} else {
					params = {
						
						cityCode: this.location.cityCode,
						comprehensive: 1,
						brand:this.brand,
					}
				}
				this.$http('worldKeepCar/worldHome/getWorldShopInfoList', params, 'GET').then(res => {
					uni.hideLoading();
					this.queryShopList = res.data

					// 处理 undefined和null转为空白字符串
					this.queryShopList.forEach((item, index) => {
						for (const key in item) {
							item[key] = this.$praseStrEmpty(item[key])
						}
					})

				})
			},


		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding: 20rpx 0;
	}

	.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;
		font-weight: bold;
		color: #FF4F00;
		height: 50rpx;
		line-height: 50rpx;
	}
	.shopScore11{
		font-size: 22rpx;
		color: #FF4F00;
		margin-right: 14rpx;
		
	}

	.shopScore2 {
		font-size: 22rpx;
		color: #666666;
		margin-right: 14rpx;
		padding: 8rpx 0;
	}

	.shopScore3 {
		font-size: 22rpx;
		color: #333333;
		padding-left: 20rpx;
	}

	.brandsBg {
		display: flex;
		align-items: center;
	}
	
	.brands {
		border-radius: 4rpx;
		padding: 0 5rpx;
		color: #CF9B6D;
		height: 28rpx;
		border: 1px solid #CF9B6D;
		margin-right: 5rpx;
		font-size: 20rpx;
		line-height: 28rpx;
		
	}
	
	.timeBg {
		display: flex;
		align-items: center;
		
	}
	
	.shopTime {
		color: #666666;
		font-size: 22rpx;
	}

	.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;
	}
	.grayBtn {
		width: 104rpx;
		height: 56rpx;
		background-color: #CCCCCC;
		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>