<template>
	<view class="charge-detail">
		<u-navbar title="电站详情" rightIcon='../../static/common/white_left_arrrow.png' leftIconColor='#ffffff'
			leftIconSize='38rpx' autoBack="true" :fixed="true" :bgColor="bgColor" :titleStyle="{color: '#ffffff'}">
		</u-navbar>

		<view class="content">
			<!-- <view class="top-fixed" :style="{ height: paddingTop }"></view> -->

			<view class="top-bg">
				<image class="image-content" :src="shopDetails.storeLogo"></image>
			</view>

			<view class="content-detail">
				<view class="shop-desc">
					<view class="mg-bot-22" style="padding: 20rpx;border-radius: 18rpx;">
						<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
							<text class="fs36 light-black fw600 one-line-ellipsis">{{shopDetails.storeName}}</text>
						</view>
						<view class="fs24 light-gray">
							24小时 | 免费停车
						</view>
					</view>

					<view class="youhuiquan u-f u-f-fdc mg-bot-20">
						<view class="u-f u-f-jcsb u-f-aic mg-bot-22">
							<view class="fs28">
								<text class="mg-right-10 light-gray">距您当前</text>
								<text class="light-black mg-right-20">{{shopDetails.distance}}km</text>
							</view>
							<view class="go-map" @click="openMap(shopDetails)">
								<image class="planeImg" src="../../static/common/plane.png" mode=""></image>
							</view>
						</view>
						<view class="u-f u-f-jcfs u-f-aic">
							<text
								class="fs28 light-black mg-right-22 one-line-ellipsis">{{shopDetails.detailedAddress}}</text>
							<image class="small-gray-right-arrow" src="../.././static/common/sg_right_arrow.png"
								:mode="'widthFix'" />
						</view>
					</view>

					<view class="common-card">
						<!-- <view class="list mg-bot-24" v-for="i in 2" :key="i"> -->
						<view class="list mg-bot-24" v-for="(item,index) in shopDetails.periodTimeList" :key="index">
							<view class="u-f u-f-jcfs">
								<view class="oclock mg-right-8">
									<image class="alarmImg" src="../../static/common/alarm.png" mode=""></image>
								</view>
								<text class="light-black fs24">{{item.isCurrentTimePeriod?"当前时段":"下一时段"}}
									{{item.beginTime}}-{{item.endTime}}</text>
							</view>
							<view class="u-f u-f-aic u-f-jcfs mg-bot-20 mg-top-20">
								<view class="mg-right-22 u-f u-f-aic u-f-jcfs">
									<text class="fs28 main-color fw600">{{item.electricityBill}}</text>
									<text class="fs24 light-black">元/度</text>
								</view>
								<view class="fs24 mg-right-20 light-gray u-f u-f-aic u-f-jcfs">
									<text class="mg-right-8">电价</text>
									<text>{{item.price}}元/度</text>
								</view>
								<view class="fs24 light-gray u-f u-f-aic u-f-jcfs">
									<text class="mg-right-8">服务费</text>
									<text>{{item.serviceCharge}}元/度</text>
								</view>
							</view>
						</view>
					</view>
				</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: "",
				shopDetails: "",
				bgColor: 'rgba(0,0,0,0)'
			}
		},
		onLoad(opt) {
			console.log(opt, "充电详情");
			this.options = opt
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onShow() {
			this.getrefuelStoreDetailsData()
		},
		methods: {
			getrefuelStoreDetailsData() {
				this.$http.post('/api/client/index/rechargeStoreDetails', {
					lon: this.options.lon.trim(),
					lat: this.options.lat.trim(),
					storeId: this.options.id.trim(),
				}).then((res) => {
					this.shopDetails = res.data.data
					console.log(res.data.data);
				})
			},
			openMap(data) {
				console.log(data, '131');
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: '地点',
					address: data.address,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			handleClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			enterShopCar() {
				uni.navigateTo({
					url: '/pagesC/shop-car/shop-car'
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.charge-detail {
		.back-wrap {
			.white-back-icon {
				width: 30rpx;
				height: 30rpx;
				background-size: 50%;

				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.content {
			position: relative;

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

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

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

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

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

					.car-info-item {
						.left {
							.youhuiquan {
								color: #ffffff;
								width: 135rpx;
								height: 135rpx;
								background-color: #FF4502;
							}

							.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 {
						position: relative;
						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/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: 8rpx;
		height: 16rpx;
	}

	.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 {
		position: absolute;
		top: 20rpx;
		right: 40rpx;
		width: 52rpx;
		height: 52rpx;
		z-index: 9;

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

	.green-btn {
		padding: 6rpx 8rpx;
		color: #ffffff;
		font-size: 18rpx;
		background: #008636;
		border-radius: 5rpx;
		margin-right: 4rpx;
	}

	.oclock {
		width: 38rpx;
		height: 38rpx;
		// background: url(../.././static/common/small-olock.png) no-repeat center center;
		background-size: 100%;

		.alarmImg {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.youhuiquan {
		position: relative;
		padding: 18rpx 20rpx;
		background: #FFF4F0;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}
</style>