<template>
	<view style="width: 100vw;height: 100vh;">
		<view v-if="pageData" class="Order_body flex column">
			<view class="Order_header">
				<view class="Order_header_type">{{ pageData.orderStatus | orderStatus}}</view>
				<view class="Order_header_tip">
					{{pageData.orderStatus|orderStatusText}}
				</view>
			</view>
			<view class="Order_content oneflex flex column ">
				<view class="Order_content_header">{{pageData.stationName}}</view>
				<view class="Order_content_information oneflex">
					<view class="Order_content_information_item flex">
						<view class="Order_content_information_item_label">订单编号：</view>
						<view class="Order_content_information_item_value oneflex value_text">{{pageData.id}}</view>
					</view>
					<view class="Order_content_information_item flex">
						<view class="Order_content_information_item_label">充电接口编号：</view>
						<view class="Order_content_information_item_value oneflex value_text">{{pageData.connectorId}}</view>
					</view>
					<view class="Order_content_information_item flex">
						<view class="Order_content_information_item_label">累计充电量：</view>
						<view class="Order_content_information_item_value oneflex value_text">{{ tool.getnum(pageData.totalPower) }}度</view>
					</view>
					<view class="Order_content_information_item flex">
						<view class="Order_content_information_item_label">预支付总金额：</view>
						<view class="Order_content_information_item_value oneflex value_text">{{ tool.getnum(pageData.payMoneyPre,3) }}元</view>
					</view>
					<view class="price_time_interval">
						<view class="price_time_interval_label">价格</view>
						<view class="time_interval flex">
							<view v-for="(item,index) in pageData.xchargeOrderDetailList" style="width: 100%;margin-bottom: 15rpx;" class="">
								<view class="flex ac">
									<text style="color: #333333;">{{item.detailStartTime.split(' ')[1] }}-{{item.detailEndTime.split(' ')[1]}}</text>
									<text
										class="time_interval_price oneflex">{{ tool.getnum( (  ((Number(item.serviceFee2customer)*1000)  +  (Number(item.electricityFee2customer) * 1000)) / 1000  ) ,3 )}} /度 
										<text class="bluetext">
											{{tool.getnum(item.detailPower)}}度 | {{
												tool.getnum((    ((Number(item.serviceMoney2customer)*1000) + (Number(item.electricityMoney2customer *1000) ))   / 1000 ),3)
												}}元
										</text>
									</text>
								</view>
								<view class="time_interval_bottom_price">电价 {{ tool.getnum(item.electricityFee2customer,3) }}元 /度|服务费 {{ tool.getnum(item.serviceFee2customer,3) }} 元/度</view>
							</view>
							
						</view>
					</view> 
					<view class="Order_content_information_item flex">
						<view class="Order_content_information_item_label">退款金额：</view>
						<view class="Order_content_information_item_value oneflex bluetext">{{ tool.getnum(pageData.refundMoneyAcc,3) }}元</view>
					</view>
					<view class="Order_content_information_item flex">
						<view class="Order_content_information_item_label">实付总金额：</view>
						<view class="Order_content_information_item_value oneflex red_text">{{ tool.getnum(pageData.payMoneyAcc,3) }}元</view>
					</view>
				</view> 
			</view>
		</view>
		<skeleton v-else></skeleton>
	</view>
</template>

<script>
	import order from '@/api/order.js'
	import skeleton from './skeleton.vue'
	export default {
		components:{
			skeleton
		},
		data() {
			return {
				pageData: null
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getDetails(e.id)
			}
		},
		filters: {
			orderStatusText(e) {
				switch (Number(e)) {
					case 1:
						return '启动中'
					case 2:
						return '正在充电'
					case 3:
						return '正在停止充电'
					case 4:
						return '您已完成充电'
					default:
						return '数据错误'
				}
			},
			orderStatus(e) {
				switch (Number(e)) {
					case 1:
						return '启动中'
					case 2:
						return '充电中'
					case 3:
						return '停止中'
					case 4:
						return '已结束'
					default:
						return '数据错误'
				}
			},
		}, 
		methods: {
			getDetails(id) {
				order.xchargeOrderInfo(id).then(res => {
					this.pageData = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>