<template>
	<view class="recharge">
		<view class="recharge_orderId">
			<view>
				订单号：{{ store.state.dataObj.orderNo }}
				<image src="/static/icon/ic-copy1.png" @click="copy(store.state.dataObj.orderNo)" mode="widthFix"></image>
			</view>
		</view>
		<view class="recharge_trn">
			<view class="recharge_trn_yuan">
				<image class="recharge_trn_yuan_img" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/bg_charging_turn.png" mode="widthFix"></image>
			</view>
			<image class="recharge_trn_hei" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-charging-black-circle.png" mode="widthFix"></image>
			<view class="recharge_trn_text">
				<view>￥{{ store.state.dataObj.currentAmount || 0 }}</view>
				<view>已用时长</view>
				<view>{{ store.state.dataObj.cumulativeTime || 0 }}min</view>
			</view>
			<view class="recharge_trn_car">
				<image class="recharge_trn_car_img" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-car-bg.png" mode="widthFix"></image>
				<image class="recharge_trn_car_img1" src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-car-bg1.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="recharge_list p30">
			<view class="recharge_list_view">
				<image src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-charged-power.png" mode="widthFix"></image>
				<view class="recharge_list_view_num">{{ store.state.dataObj.chargingDegree || 0 }}</view>
				<view class="recharge_list_view_name">已充电量(度)</view>
			</view>
			<view class="recharge_list_view">
				<image src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-charged-time.png" mode="widthFix"></image>
				<view class="recharge_list_view_num">{{ store.state.dataObj.cumulativeTime || 0 }}min</view>
				<view class="recharge_list_view_name">已充时长</view>
			</view>
			<view class="recharge_list_view">
				<image src="https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-real-time-charged-amount.png" mode="widthFix"></image>
				<view class="recharge_list_view_num">{{ store.state.dataObj.currentAmount || 0 }}</view>
				<view class="recharge_list_view_name">已充金额(元)</view>
			</view>
		</view>
		<view class="recharge_block p30">
			<view class="recharge_block_view">
				<view>{{ store.state.dataObj.outputVoltage || 0 }}</view>
				<view>实时电压(V)</view>
			</view>
			<view class="recharge_block_view">
				<view>{{ store.state.dataObj.outputCurrent || 0 }}</view>
				<view>实时电流(A)</view>
			</view>
			<view class="recharge_block_view">
				<view>{{ store.state.dataObj.power || 0 }}</view>
				<view>实时功率(KW)</view>
			</view>
		</view>
		<view class="recharge_note p30">
			<view>终端名称：{{ store.state.dataObj.gunNo }}</view>
			<view>终端编码：{{ store.state.dataObj.deviceNo || '' }}</view>
		</view>
		<view class="recharge_btn1" @click="end(1)">结束充电</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { stopCharging, realtimeInfo, ordersInfo } from '@/api/api.js';
import { copy } from '@/utils/fun.js';

import store from '@/store/index.js';
let transactionNo = ref('');

let type = ref('');

onLoad(async (options) => {
	transactionNo.value = options.transactionNo;
	if (options.type) {
		let _res = await realtimeInfo({
			transactionNo: options.transactionNo
		});
		store.commit('setDataObj', _res);
	}
});

const end = (e) => {
	uni.showModal({
		title: '提示',
		content: e == 1 ? '是否确认结束充电？' : '结束充电失败，请重试！',
		success: function (res) {
			if (res.confirm) {
				stopCharging({ transactionNo: transactionNo.value }).then((res) => {
					uni.showLoading({
						title: '停止充电中...'
					});
					store.commit('setSokStatus', 0);
					timeMap(transactionNo.value);
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};

const timeMap = (_res) => {
	var time = setTimeout(async () => {
		if (store.state.sokStatus != 1) {
			let _data = await ordersInfo({
				transactionNo: _res
			});
			store.commit('setDataObj', _data);
			if (_data.status == 3 || _data.status == 4) {
				uni.hideLoading();
				end(2);
			}
			if (_data.status == 5 || _data.status == 6) {
				uni.hideLoading();
				uni.navigateBack();
				store.commit('setSokStatus', 0);
			}
		}
	}, 30000);
};
</script>

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

<style scoped lang="scss">
.recharge {
	&_orderId {
		width: 1000rpx;
		margin-left: -125rpx;
		margin-top: -20rpx;
		height: 230rpx;
		background: url(https://zhongshuai-prod.oss-cn-beijing.aliyuncs.com/appImage/order/order-realtime-pile-number-bg.png) no-repeat 100% 100% / contain;
		color: #828282;
		text-align: center;
		padding-top: 30rpx;
		font-size: 26rpx;
		view {
			@include flex($space: center);
			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
			}
		}
	}

	&_trn {
		margin-top: -130rpx;
		@include flex($direction: column, $space: center);
		&_yuan {
			width: 500rpx;
			height: 500rpx;
			position: relative;
			&_img {
				width: 100%;
				height: 100%;
				animation: rotate 5s linear infinite;
			}
		}
		&_text {
			z-index: 9;
			@include flex($direction: column, $space: center);
			margin-top: -470rpx;
			view:nth-child(1) {
				color: #fff;
				font-weight: bold;
				font-size: 60rpx;
			}
			view:nth-child(2) {
				color: #11927c;
				font-size: 28rpx;
				margin: 25rpx 0 15rpx;
			}
			view:nth-child(3) {
				color: #24efe8;
				font-weight: bold;
				font-size: 36rpx;
				margin-bottom: 30rpx;
			}
		}
		&_hei {
			margin-top: -360rpx;
			width: 500rpx;
			height: 500rpx;
			z-index: 9;
		}
		&_car {
			z-index: 10;
			width: 450rpx;
			position: relative;
			&_img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			&_img1 {
				width: 100%;
				height: 100%;
			}
		}
	}
	&_list {
		@include flex($space: space-between);
		padding: 0 50rpx;
		&_view {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			@include flex($direction: column, $space: center);
			image {
				width: 75rpx;
				height: 75rpx;
			}

			&_num {
				color: #fff;
				font-weight: bold;
				font-size: 36rpx;
				margin: 10rpx 0;
			}
			&_name {
				color: #8b8b8b;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}
	&_block {
		margin-top: 50rpx;
		@include flex($space: space-between);
		&_view {
			width: 200rpx;
			padding: 10rpx;
			border-radius: 25rpx;
			background: linear-gradient(0deg, #0b1521, #193c65);
			font-size: 28rpx;
			@include flex($direction: column, $space: center);
			view:nth-child(1) {
				color: #fff;
			}
			view:nth-child(2) {
				color: #8b98a0;
			}
		}
	}

	&_note {
		margin-top: 30rpx;
		@include flex($space: space-between);
		color: #828282;
		font-size: 24rpx;
	}
	&_btn1 {
		width: 650rpx;
		height: 100rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: bold;
		@include flex($space: center);
		background-color: #1879fe;
		border-radius: 50rpx;
		color: #fff;
		margin-top: 150rpx;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>
