<template>
	<view class="oil-detail">
		<u-navbar
			title="自助洗车详情"
			leftIconColor='#ffffff'
			leftIconSize='38rpx'
			autoBack="true"
			:fixed="true"
			:bgColor="bgColor"
			:titleStyle="{color: '#ffffff'}"
		>
		</u-navbar>
		<!-- 自定义导航栏结束 -->
		<view class="content">
			<view class="top-bg">
				<image class="image-content" :lazy-load="true" :mode="'scaleToFill'" :src="pageDetail.storeLogo"></image>
			</view>

			<view class="content-detail">
				<view class="shop-desc">
					<view class="mg-bot-34">
						<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
							<text class="fs36 light-black fw600 one-line-ellipsis">{{pageDetail.storeName}}</text>
							<!-- <image class="go-map" @click.stop="skipCityMap(shopDetail)" src="../../static/common/plane.png" mode=""></image> -->
						</view>
						
						<view class="u-f u-f-jcfs u-f-aic mg-bot-20">
							<text class="sign mg-right-8" v-for="(item, index) in pageDetail.storeLabelList" :key="index">{{item}}</text>
						</view>
						
						<view class="address-info mg-bot-20">
							<view class="u-f u-f-jcsb u-f-aic">
								<view>
									<view class="u-f u-f-jcfs u-f-aic fs24 mg-bot-10">
										<text class="mg-right-8 light-gray">距离</text>
										<text class="light-black">{{pageDetail.distance ? pageDetail.distance : 0}}km</text>
									</view>
									<view class="one-line-ellipsis">
										<text class="light-gray fs24">{{pageDetail.address}}</text>
									</view>
								</view>
								<view @click.stop="skipCityMap(pageDetail)"><image src="../.././static/common/plane.png" class="goplane"></image></view>
							</view>
						</view>
						
						<view class="white-bg-wrap" style="margin-bottom: 93rpx;">
							<view class="u-f mg-bot-18">
								<image class="mg-right-8" src="../.././static/common/alarm.png" style="width: 38rpx;height: 38rpx;"></image>
								<text class="light-black fs24">价格</text>
							</view>
							<view class="u-f u-f-jcfs u-f-aic u-f-jcsb u-f-fww" style="padding: 0 20rpx;">
								<view class="item-part u-f u-f-aic mg-bot-24">
									<text class="fs28 light-black">清水价格：</text><text class="fw600 fs28 main-color">{{pageDetail.cleanWaterPrice}}</text><text class="fs24 light-black">元/分；</text>
								</view>
								<view class="item-part u-f u-f-aic mg-bot-24">
									<text class="fs28 light-black">泡沫价格：</text><text class="fw600 fs28 main-color">{{pageDetail.foamPrice}}</text><text class="fs24 light-black">元/分；</text>
								</view>
								<view class="item-part u-f u-f-aic mg-bot-24">
									<text class="fs28 light-black">吸尘价格：</text><text class="fw600 fs28 main-color">{{pageDetail.vacuumCleanPrice}}</text><text class="fs24 light-black">元/分；</text>
								</view>
								<view class="item-part u-f u-f-aic mg-bot-24">
									<text class="fs28 light-black">洗手价格：</text><text class="fw600 fs28 main-color">{{pageDetail.washHandsPrice}}</text><text class="fs24 light-black">元/分；</text>
								</view>
								<view class="item-part u-f u-f-aic">
									<text class="fs28 light-black">消毒价格：</text><text class="fw600 fs28 main-color">{{pageDetail.disinfectPrice}}</text><text class="fs24 light-black">元/分；</text>
								</view>
								<view class="item-part u-f u-f-aic">
									<text class="fs28 light-black">镀膜价格：</text><text class="fw600 fs28 main-color">{{pageDetail.coatingPrice}}</text><text class="fs24 light-black">元/分；</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="u-f u-f-aic u-f-jcc" @click="goToSelfQuickBuy">
				<view class="line-gradient-btn" style="width: calc(100% - 48rpx)">扫码洗车</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				paddingTop: 0,
				options: "",
				pageSize: 10,
				pageNum: 1,
				groupPurchaseList: [],
				bgColor: 'rgba(0,0,0,0)',
				storeId: 0,
				lon: 0,
				lat: 0,
				pageDetail: {}
			}
		},
		onLoad(opt) {
			this.storeId = opt.storeId
			this.lon = this.User.curcity.lng || opt.lon,
			this.lat = this.User.curcity.lat || opt.lat
			this.getSelfCarWashDetails()
		},
		onShow() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
			// this.getRefuelStoreDetailsData()
			// this.getRefuelGoodsListData()
		},
		methods: {
			async getSelfCarWashDetails() {
				let data = {
					"lon": this.lon,
					"lat": this.lat,
					"storeId": this.storeId
				}
					
				let res = await this.$http.post('/api/client/index/selfCarWashDetails', data, {token: true, checkToekn: true})
				let resData = res.data.data
				this.pageDetail = resData
				console.log('getSelfCarWashDetails', resData)
			},
			async createBill(item) {
				let data = {
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat,
					"storeId": item.storeId,
					"type": 1, // 1-商品 2-会员权益 3-团购商品 4-积分商品 5-优惠券 6-投诉
					"goodsId": item.goodsId,
					"goodsNum": 1
				}
					
				// 创建订单
				let res = await this.$http.post('/api/client/order/createOrder', data, {token: true, checkToekn: true})
				let resData = res.data.data
				let key = resData.key
				let orderId = resData.orderId
				let storeId = resData.storeId

				this.User.navigate({ url: '/pagesD/quick-buy-oil/quick-buy-oil?id='+key+'&orderId='+orderId+'&storeId='+storeId}, "navigateTo", true)
			},
			handleScanCodeCarWash(key) {
			// 	let data = {
			// 		key: key
			// 	}
					
			// 	// 扫码洗车
			// 	let res = await this.$http.get('/api/client/order/scanCodeCarWash', data, {token: true, checkToekn: true})
			// 	let resData = res.data.data
			// 	console.log("handleScanCodeCarWash", resData)
			
			// 	this.User.navigate({ url: '/pagesD/self-quick-buy/self-quick-buy?data='+ encodeURIComponent(JSON.stringify(resData))}, "navigateTo", true)
			
			this.User.navigate({ url: '/pagesD/self-quick-buy/self-quick-buy?key='+key }, "navigateTo", true)
			
			},
			enterShopCar() {
				uni.navigateTo({
					url: '/pagesC/shop-car/shop-car'
				})
			},
			handleClickInput() {
				uni.navigateBack({
					delta: 1
				})
			},
			// getRefuelGoodsListData() {
			// 	this.$http.post('/api/client/index/refuelGoodsList', {
			// 		pageNum: this.pageNum,
			// 		pageSize: this.pageSize,
			// 		storeId: this.options.id,
			// 		typeId: "",
			// 	}).then((res) => {
			// 		this.groupPurchaseList = res.data.data.rows
			// 	})
			// },
			// getRefuelStoreDetailsData() {
			// 	this.$http.post('/api/client/index/refuelStoreDetails', {
			// 		lon: this.options.lon.trim(),
			// 		lat: this.options.lat.trim(),
			// 		storeId: this.options.id.trim(),
			// 	}).then((res) => {
			// 		this.shopDetail = res.data.data
			// 	})
			// },
			skipCityMap(data) {
				console.log(data, "打开地图");
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goToOilQuanDetail(item) {
				let url = '/pagesF/oil-quan-detail/oil-quan-detail?storeId='+item.storeId+'&goodsId='+item.goodsId
				uni.navigateTo({
					url: url
				})
			},
			goToSelfQuickBuy() {
				let that = this
				uni.scanCode({
					success: function (res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						
						console.log('res', res)
						let path = res.path || '';
						
						if (path) {
							let pathArr = path.split('?')
							let wxPath = pathArr[0]
							let keyStr = pathArr[1]
				
							let keyArr = keyStr.split('=')
							let key = keyArr[1]
				
							if (wxPath === "/pagesD/self-quick-buy/self-quick-buy") {
								that.handleScanCodeCarWash(key)
							} else {
								uni.showToast({
									title: "设备识别码有误，请重新扫码",
									icon: "none",
									duration: 500
								})
							}
						} else {
							uni.showToast({
								title: "设备识别码有误，请重新扫码",
								icon: "none",
								duration: 500
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.oil-detail {
		.back-wrap {
			.white-back-icon {
				width: 30rpx;
				height: 30rpx;
				background: url(../.././static/shop/white-left-arrow.png) no-repeat center center;
				background-size: 50%;
			}
		}

		.content {
			position: relative;

			.top-fixed {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background-color: green;
				z-index: 3;
				overflow: hidden;
			}

			.top-bg {
				width: 100%;
				height: 509rpx;

				.image-content {
					width: 100%;
					height: 100%;
				}
			}

			.content-detail {
				position: relative;
				margin-top: -50rpx;
				padding: 26rpx 20rpx 20rpx 34rpx;
				background-color: #F9F9F9;
				border-radius: 40rpx 40rpx 0 0;

				.common-card {
					padding: 20rpx;
					border-radius: 18rpx;
					background-color: #ffffff;

					.car-info-item {
						.left {
							.image-wrap {
								width: 135rpx;
								height: 135rpx;
								background-color: #999999;
							}

							.name {
								.car-name {
									color: #333333;
								}

								.price {
									color: #FF4502;
								}
							}
						}

						.right {
							view {
								.bug {
									padding: 10rpx 24rpx;
									background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
									border-radius: 26rpx 26rpx 26rpx 26rpx;
									color: #ffffff;
								}
							}

							.total-sell {
								color: #999999;
							}
						}
					}

					view {
						view {
							.share-icon {
								width: 30rpx;
								height: 30rpx;
								// background: url(../.././static/maintenance/share.png) no-repeat center center;
								background-size: 100%;
							}
						}
					}

					.youhuiquan {
						padding: 18rpx 20rpx;
						background: #FFF4F0;
						border-radius: 9rpx 9rpx 9rpx 9rpx;
					}

					.ue-user {
						.avatar {
							width: 78rpx;
							height: 78rpx;
						}

						.user-desc {
							.evaluate-wrap {
								.evaluate {
									.star-icon {
										width: 32rpx;
										height: 32rpx;
										// background: url(../.././static/common/star.png) no-repeat center center;
										background-size: 100%;
									}

									.star-num {
										color: #F2CB51;
									}
								}
							}
						}
					}

					.ue-content {
						.image-list {
							.image-item {
								width: calc(25% - 12rpx);

								image {
									width: 100%;
								}
							}
						}
					}

					.good-detail {
						.big-title {
							.left {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/maintenance/left_rect.png) no-repeat center center;
								background-size: 100%;
							}

							.right {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/maintenance/right_rect.png) no-repeat center center;
								background-size: 100%;
							}
						}

						.gantanhao {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
		}

		.fix-bot {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10rpx 24rpx;
			background-color: #ffffff;
		}
	}

	.big-gray-right-arrow {
		width: 26rpx;
		height: 26rpx;
		// background: url(../.././static/maintenance/black_right-arrow.png) no-repeat center center;
		background-size: 50%;
	}

	.send-icon {
		width: 56rpx;
		height: 56rpx;
		// background: url(../.././static/maintenance/send.png) no-repeat center center;
		background-size: 100%;
	}

	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		// background: url(../.././static/common/gray_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.collect {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/maintenance/collect.png) no-repeat center center;
		background-size: 100%;
	}

	.serve-person {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/maintenance/say.png) no-repeat center center;
		background-size: 100%;
	}

	.default-line-btn {
		color: #333333;
		font-size: 22rpx;
		border-radius: 40rpx;
		padding: 30rpx 46rpx;
		text-align: center;
		background-color: transparent;
		border: 1rpx solid #707070;
	}

	.main-btn {
		color: #ffffff;
		font-size: 22rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 30rpx 100rpx;
	}

	.go-map {
		width: 52rpx;
		height: 52rpx;
		// background: url(../.././static/common/go_map.png) no-repeat center center;
		background-size: 100%;
	}

	.green-btn {
		padding: 6rpx 8rpx;
		color: #ffffff;
		font-size: 18rpx;
		background: #008636;
		border-radius: 5rpx;
		margin-right: 4rpx;
	}
	
	.address-info {
		padding: 22rpx;
		background: #FFF4F0;
		border-radius: 9rpx;
	}
	
	.item-part {
		width: calc(50% - 10rpx);
		margin-right: 10rpx;
		&:nth-child(2n) {
			margin-right: 0;
		}
	}
</style>