<template>
	<view>
		
		<chargingPileDetails ref="dd" v-show="!detail.homeApplyId"></chargingPileDetails>
		<chargingPileDetailsFamily ref="df" v-show="detail.homeApplyId" ></chargingPileDetailsFamily>
	</view>
</template>

<script>
	
	import * as API from "@/apis/chargeProcess.js"
	import * as api from "@/apis/site.js"
	import chargingPileDetails from '@/pages/searchPile/stationAndPile/charging/chargingPileDetails.vue'
	import chargingPileDetailsFamily from '@/pages/searchPile/stationAndPile/charging/chargingPileDetailsFamily.vue'
	
	export default {
		components: {
			chargingPileDetails,chargingPileDetailsFamily
		},
		data() {
			return {
				pageTitle:"充电枪详情",
				
				id: "",
				
				detail: {
					homeApplyId:"",
					
				},
				op:{}
			}
		},

		onLoad(op) {
			//this.startCarCharging()
			this.op=op
			if (op.sid) {
				this.sid = op.sid
					
					
			} else if (op.id) {
				this.id = op.id
		
		
			} else {
				uni.showToast({
					title: "请扫码充电"
				})
			}
		},
		onReady() {
			if(this.sid){
				this.getChargingStationDetail()
			}
			if(this.id){
				this.getPile()
			}
				
		},
		onShow() {
			if(this.detail.id){
				if(this.detail.homeApplyId){
					//this.pageTitle= "我的家桩充电详情"
					this.$refs['df'].onShowK()
				}else{
					this.$refs['dd'].onShowK()
				}
			}
			
		},
		methods: {
			getChargingStationDetail(bl) {
				
				var _self = this;
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			
				let data = {
					stationId: this.sid
				};
			
			
				api.getChargingStationDetail(data).then(function(res) {
					//uni.hideLoading()
			
					if (res && res.result && res.data) {
			
						let data = res.data.devices;
						console.log(data)
						_self.id=data[0].gunList[0].gunNo
						_self.op.id=_self.id
						_self.getPile()
					}
			
				})
			},
			getPile() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.chargingDeviceGunDetail({
					gunNo: this.id,
					jpcode: "jp_team51_charge_id:A_" + this.id
				}).then((res) => {

					uni.hideLoading()
					
					this.detail = res.data.device
					
					if(this.detail.homeApplyId){
						//this.pageTitle= "我的家桩充电详情"
						this.$refs['df'].init(this.op)
					}else{
						this.$refs['dd'].init(this.op)
					}
					

				}).catch(error => {
					console.log(error)
					uni.hideLoading()
					uni.showModal({
						title: "提示",
						content: "设备扫码异常",
						confirmText: "前往首页",
						showCancel: false,
						success: () => {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}
					})
					// uni.showToast({
					// 	title: error
					// })
				})
			},
			
		}

		
	}
</script>

<style lang="scss">
	.priceListBlMain {
		display: flex;
		justify-content: space-between;
		align-items: last baseline;
	}

	.discount-card {

		box-shadow: 0px 0px 8px 0px rgba(0, 65, 30, 0.1);
		border: 1px solid rgba(225, 236, 231, 1);

		border-radius: 8px;
		//background-color: rgba(55, 59, 80, 1);
		padding: 24rpx;
		margin-top: 24rpx;

		.name {
			//color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}

		.progress {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			//	color: rgba(219, 219, 219, 1);
			font-size: 24rpx;
			margin-bottom: 16rpx;
			margin-top: 24rpx;
		}

		::v-deep .u-active {
			background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
		}
	}
	.discount-card-4 {
		background:  #da241e !important;
		.unit{
			color:#fff !important;
		}
		.u-progress{
			    background-color:#cf4c42 !important;
				color: #fff;
		}
		.name{
			color: #ffd695!important;
			font-size: 36rpx;
			  font-family: "SimSun", Arial, sans-serif;  
			font-weight: 400;
			  text-shadow: 2px 1px 0px #800400 ;  
		
		}
		.progress{
				color: #fff;
		}
	}
	
	.temporaryCarNum {
		text-align: right;
		margin-bottom: 10px;
		margin: 0 40rpx;

		span {
			margin: 0 8rpx;
			color: #19be6b;
		}
	}

	.oldTextClassF {

		.tips {
			padding: 36rpx;

			.p {
				font-size: 42rpx !important;
			}

			.content {
				font-size: 34rpx !important;
			}
		}

		.bottom {

			.u-btn {

				font-size: 48rpx
			}
		}

		.text-1 {
			font-size: 56rpx !important;
		}

		.text-2 {
			font-size: 38rpx !important;
		}

		.charging-info {
			.name {
				font-size: 36rpx !important;

				.free {
					font-weight: bold;

					font-size: 36rpx !important;
				}
			}

			.address {
				font-size: 44rpx;
				font-weight: bold;
			}

			.price {
				font-weight: bold;
				font-size: 60rpx !important;

				.unit {
					font-weight: normal;
					font-size: 36rpx !important;
				}

			}

		}
	}


	page {
		background-color: #F6F8F8;
		padding-bottom: 100px;
	}

	.service {
		font-size: 24px;
		color: #101010;
		position: absolute;
		right: 16px;
	}

	.main2 {
		background-color: #fff;
		padding-left: 16px;

		.item {
			border-bottom: 1px solid #e5e7ea;
			padding: 16px 0;

			.title {
				line-height: 16px;
				color: rgba(119, 119, 119, 100);
				font-size: 16px;

				.more {
					font-size: 24px;
					color: #b3b3b3;
					float: right;
					margin-right: 8px;
				}
			}

			.content {
				line-height: 24px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				margin-top: 8px;
				padding-right: 30px;

			}
		}
	}

	.main {
		padding: 40rpx 40rpx 24rpx 40rpx;
		background-image: linear-gradient(#D6EEDC, #F6F8F8);

		.text-1 {
			color: rgba(0, 170, 90, 100);
			font-size: 48rpx;
			line-height: 33px;

		}

		.text-2 {
			color: rgba(102, 102, 102, 100);
			font-size: 32rpx;
			line-height: 22px;
		}

		.charging-info {
			background-color: #fff;
			margin: 0px auto;
			border-radius: 12px;
			padding: 20rpx 38rpx;

			.name {
				margin-top: 8rpx;
				color: #777777;
				font-size: 32rpx;

				.free {
					display: inline-block;
					//width: 72px;
					padding:4rpx 24rpx ;
					//height: 20px;
					line-height: 20px;
					border-radius: 50px;
					background-color: rgba(208, 246, 228, 100);
					color: rgba(0, 185, 98, 100);
					font-size: 28rpx;
					text-align: center;
					margin-left: 12px;
				}
				.workStatusText6{
					background-color: rgba(255, 214, 210, 1);
					color: rgba(255, 56, 56, 1);
				}

			}

			.price-3-card-view {
				display: flex;
				align-items: last baseline;

				.price-3-card {
					max-width: 240rpx;
					min-width: 220rpx;
					display: flex;
					background: linear-gradient(93.02deg, rgba(59, 182, 254, 1) 39.4%, rgba(0, 185, 98, 1) 92.96%);
					border-radius: 4px;
					height: 32rpx;
					min-height: 32rpx;
					margin-left: 32rpx;
					//	align-items: center;
					line-height: 32rpx;

					.num1 {
						img {
							// width: 88rpx;
							//width: 34px;
							height: 32rpx;
						}

						::v-deep .u-image {
							min-height: 32rpx;

						}
						font-size: 22rpx;
						background: rgb(48, 49, 51);
					}

					.num {
						padding: 0 6rpx 0 6rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 22rpx;
						display: flex;
						align-items: center;

					}
				}
				.price-3-card-yue{
					background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
					
				}
			}

			.price-2 {
				display: flex;
				align-items: baseline;

				.price-4 {
					color: rgba(0, 185, 98, 100);
					font-size: 56rpx;
					margin-top: 0rpx;
					display: flex;
					align-items: baseline;

					.unit {
						font-size: 32rpx;
						color: #666666;
						margin-left: 4px;
					}
				}

				.price-3 {
					font-size: 24rpx;
					color: #fff;
					margin-left: 8rpx;
					padding-right: 9rpx;
					background: #00B962;
					border-radius: 8rpx;

					.num1 {
						padding-left: 12rpx;
						border-radius: 8rpx 0 8rpx 8rpx;
						padding-right: 18rpx;
						background: #121212;
						-webkit-clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
						clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);

					}

				}
			}

			.price {
				color: rgba(0, 185, 98, 100);
				//font-size: 56rpx;
				margin: 8rpx 0;

				.span {
					font-size: 56rpx;
				}

				.unit {
					font-size: 32rpx;
					color: #666666;
					margin-left: 4px;
				}

			}

			.address {
				color: #333333;
				font-size: 40rpx;

				.explain {
					line-height: 22px;
					color: rgba(22, 119, 255, 100);
					font-size: 32rpx;
					float: right;
				}
			}
		}
	}

	.main-head {
		display: flex;
		justify-content: space-between;
	}

	.charge-img {

		width: 80px;
		overflow: hidden;
		height: 80px;

		// margin-right: 16rpx;
		img {
			width: 100%;
		}
	}
	.cost-explainMain{
		
		
		margin: 24rpx 40rpx 24rpx 40rpx;
				padding: 30rpx 40rpx;
				 background-color: #fff;
				
				// background-color: #fff;
				// margin: 0 40rpx;
				 border-radius: 12px;
				// padding: 38rpx 40rpx;
				// display: flex;
				
				 font-size: 36rpx;
				
			
				
				// 费用说明
				.cost-explain {
					
					margin-bottom: 12rpx;
					border-radius: 12px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.car-number {
						display: flex;
						  font-size: 32rpx;
					}
					
					img {
					
						vertical-align: middle;
					}
					.text {
						font-size: 36rpx;
						color: #101010;
						//width: 330rpx;
						white-space: pre;
					}
				
					.iconfont {
						color: #b3b3b3;
						font-size: 48rpx
					}
				}
				.cost-explain2{
					.car-number{
						font-size: 28rpx;
						color: #FF3D00;
					}
				}
	}
	

	.tips {
		background-color: #fff;
		padding: 40rpx;
		margin: 8rpx 40rpx 0 40rpx;
		border-radius: 12px;

		.p {
			line-height: 25px;
			color: #333333;
			font-size: 32rpx;
			font-weight: 550;
		}

		.content {
			margin-top: 16rpx;
			line-height: 22px;
			color: #666666;
			font-size: 28rpx;
		}
	}

	.bottom {

		width: 100%;
		padding: 28rpx 0;


		.u-btn {
			margin: 0 40rpx;
			line-height: 88rpx;
			height: 88rpx;
			font-size: 40rpx
		}
	}

	::v-deep .u-alert-desc {
		color: rgba(255, 115, 0, 100);
		font-size: 16px
	}

	// 入场车辆
	.carp {
		margin: 0 40rpx;
	}

	.carImg {
		margin: 0 40rpx;

		img {
			width: 100%;
		}
	}
	.carImg3 {
		margin: 0 40rpx;
		background: linear-gradient(32.4deg, rgba(59,182,254,1) 20.49%,rgba(0,185,98,1) 118.87%);
		border-radius: 8px;
	}
	.carImg3-yue {
			margin: 0 40rpx;
			background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
			border-radius: 8px;
		}
	.carImg2-yue {
			line-height: 20px;
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			padding:40rpx;
			//background: linear-gradient(88.81deg, rgba(219,199,167,1) 1.89%,rgba(194,154,93,1) 98%);
			background: url('../../../assets/img/9-4/antFill-crown.svg');
			background-repeat: repeat-y;
			background-position-x: 440rpx;
			.carImg-2{
				span{
					font-size: 48rpx;
					color:red;
					margin: 0 4rpx;
					font-weight: bold;
					padding:0rpx 4rpx;
				}
			}
			.carImg-3{
				margin-top:8rpx ;
				span{
					
					padding:8rpx 16rpx;
					border-radius: 12px;
					background-color: rgba(255, 255, 255, 1);
					text-align: center;
					color: #795626 ;
					font-size: 12px;
				}
			}
			
		}
	.carImg2 {
		line-height: 20px;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		padding:40rpx;
		background: url('../../../assets/img/9-4/6show.png');
		background-repeat: repeat-y;
		background-position-x: 440rpx;
		.carImg-2{
			span{
				font-size: 48rpx;
				color:red;
				margin: 0 4rpx;
				
				font-weight: bold;
				padding:0rpx 4rpx;
			}
		}
		.carImg-3{
			margin-top:8rpx ;
			span{
					
				padding:8rpx 16rpx;
				border-radius: 12px;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				color: rgba(0, 130, 69, 1);
				font-size: 12px;
			}
		}
		
	}

	.showOss2 {

		::v-deep .u-model,
		::v-deep .u-mode-center-box {
			background-color: transparent;
		}
	}


	.classtable {
		margin: 0rpx 40rpx;

		.td1 {
			width: 50rpx;
			padding: 12rpx 0;
			text-align: center;

			img {
				width: 48rpx;
				height: 48rpx;
			}

			font-size: 10px;
		}

		.td2 {
			padding-left: 16rpx;
			font-size: 12px;
			line-height: 24px;

			.dian {
				padding: 0 10rpx
			}
		}

	}

	.btnview {

		display: flex;
		flex-direction: column;
		align-items: center;

		.btnview1 {}

		.btnview2 {
			color: #999999;
			margin-top: 20rpx;
			padding-bottom: 48rpx;
		}
	}


	.sign-6 {
		//background: linear-gradient(89.4deg, rgba(255,61,0,1) 2.8%,rgba(255,134,0,1) 98.02%);
		background: linear-gradient(89.4deg, rgba(0, 164, 87, 1) 2.8%, rgba(0, 206, 141, 1) 98.02%);
		color: rgba(255, 255, 255, 1);
		padding: 0 10rpx;
	}
	.chat_hhh_time {
		display: flex;
		justify-content: space-between;
	}

	.chat_hhh {
		.chatShow {
			.showspan{
				    float: right;
					    color: #00b962;
			}
			margin-bottom: 280rpx;
			//height: 160px;
			visibility: hidden;
			//  width: 120px;
			padding: 4rpx 16rpx;


			text-align: initial;


			/* 定位 */
			position: absolute;
			z-index: 1;

			padding: 4rpx 16rpx;
			background-color: #fff;
			color: rgba(102, 102, 102, 1);
			border-radius: 3px;
			font-size: 24rpx;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);


		}

		.chatShowA {
			margin-left: -60rpx;
		}

		.chatShowB {
			margin-left: -160rpx;
		}

		.chatShowNo {
			visibility: hidden;
		}

		.chatShowOk {
			visibility: visible;
		}

		background: #f9f9f9;
		text-align: center;
		min-height: 160px;
		display: flex;
		font-size: 20rpx;

		.current1 {
			.chats2 {
				//border: 1px solid red;
			}
		}

		.current2 {
			.chats1 {
				border: 1px solid #333333;


				border-bottom: 0px;
			}

			.chats2 {
				border: 1px solid #333333;
				background: #26FF6B !important;

				border-top: 0px;
			}

		}

		.chatTime {
			min-width: 68rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			border: 1px solid #f9f9f9;
			
		
			.chats0 {
				// background-color: #ff8b17;
				// color: #ffecdd;
				display: flex;
				justify-content: center;

				flex-wrap: wrap;
				flex-direction: column;
			}
			
			.chats9 {
				opacity: 0;
				display: flex;
				justify-content: center;

				flex-wrap: wrap;
				flex-direction: column;
			}

			.chats1 {
				background: #dcdcdc;
				min-height: 30rpx
			}

			.chats2 {
				background: #80e0a6;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
	
	.quickMain{
		::v-deep .u-mode-center-box{
			background-color: transparent;
		}
		::v-deep .u-model{
			background-color: transparent;
		}
		.quickMain-slot-content{
			.quickMain-img{
				    position: relative;
				    top: 120rpx;
				    text-align: center;
				img{
					width: 160rpx;
					height: 240rpx;
				}
			}
			.quickMain-bodyMain{
				background-color:#fff;
				border-radius: 15px;
			}
			.quickMain-body{
				
				margin:0 56rpx ;
				color: rgba(51, 51, 51, 1);

				.quickMain-text1{
					font-size: 48rpx;
					text-align: center;
					padding: 132rpx 0 32rpx 0;
				}
				.quickMain-text2{
					margin-bottom: 20rpx ;
					//color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					img{
						width: 40rpx;
						//height: 120px;
					}
				}
				
			}
			
			
		}
	}
	
	
	.slogan-4 {
		z-index: 2;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		/* text-decoration: underline; */
	
	
		text-align: center;
		position: fixed;
		/* top: 40px; */
		bottom: 180px;
		right: 20px;
		height: 80rpx;
		width: 80rpx;
		line-height: 20px;
		font-size: 16px;
		background: linear-gradient(95deg, #FF9800, #FF5722);
		box-shadow: 0 4rpx 24rpx 0 #FF5722;
		//padding-top: 8px;
		color: #fff;
		border-radius: 25px;
	
	}
	
	
	.imageshake {
		position: relative;
		animation: shake 0.5s ease-in-out infinite;
	}
	
	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}
	
		25% {
			transform: rotate(8deg);
		}
	
		50% {
			transform: rotate(0deg);
		}
	
		75% {
			transform: rotate(-8deg);
		}
	
		100% {
			transform: rotate(0deg);
		}
	}
	.showOssK {
	
		::v-deep .u-model,
		::v-deep .u-mode-center-box {
			background-color: transparent;
		}
	}
	// .showOss {
	
	// 	::v-deep .u-model,
	// 	::v-deep .u-mode-center-box {
	// 		background-color: transparent;
	// 	}
	// }
	.swiper {
		height: 700rpx;
	
		.swiperitem {
			height: 700rpx;
		}
	}
	
	.useFreeCoupon{
		font-size: 24rpx;
		color:#FF3D00;
	}
	
	
	.sign {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		
		.sign-tag {
			
			height: 36rpx;
			line-height: 32rpx;
			border-radius: 8rpx;
			//background-color: rgba(255, 255, 255, 100);
			//color: rgba(255, 139, 0, 100);
			font-size: 10px;
			text-align: center;
			//border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 8rpx;
			margin-right: 8rpx;
			margin-bottom: 8rpx;
		}
	
		.sign-0 {
			background: linear-gradient(89.4deg, rgba(129, 97, 255, 1) 2.8%, rgba(169, 147, 255, 1) 98.02%);
			color: rgba(255, 255, 255, 1);
			//padding: 0 10rpx;
			//border: 1px solid rgba(255, 139, 0, 100);
		}
	
		.sign-5 {
			background: linear-gradient(89.4deg, rgba(255, 61, 0, 1) 2.8%, rgba(255, 134, 0, 1) 98.02%);
			color: rgba(255, 255, 255, 1);
			//padding: 0 10rpx;
		}
	
		.sign-1 {
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 139, 0, 100);
			border: 1px solid rgba(255, 139, 0, 100);
	
		}
	
		.sign-2 {
			background-color: rgba(255, 255, 255, 100);
			color: rgba(153, 153, 153, 100);
			border: 1px solid rgba(204, 204, 204, 100);
	
		}
	
		.sign-3 {
			background-color: rgba(255, 255, 255, 100);
			color: #8161FF;
			border: 1px solid #8161FF;
	
		}
	
		.sign-4 {
			background-color: rgba(255, 255, 255, 100);
			color: #00B962;
			border: 1px solid #00B962;
		}
	}
</style>
