<template>
	<view class="content">
		<view class="cu-card article">
			<view class="cu-item shadow">
				<view class="padding-sm justify-between">
					<view
						:class="{'payState' : detail.list.payStatus== 1 ,'non-payment' : detail.list.payStatus== 0 ,'refunded': detail.list.payStatus== 2}">
						{{[$t('index.non_payment'),$t('index.Paid_for'),$t('index.Payment_failure')][detail.list.payStatus==null?'':detail.list.payStatus]}}
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card article">
			<view class="cu-item shadow">
				<view class="flex justify-between flex-wrap padding-sm">
					<view class="name">{{detail.list.stationName==null?'--':detail.list.stationName}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between flex-wrap list-view">
					<view class="staName">{{$t('index.Field_station_coding')}} </view>
					<view class="staNum">{{detail.list.stationNo==null?'--':detail.list.stationNo}}</view>
				</view>
				<view class="flex justify-between flex-wrap list-view">
					<view class="staName"> {{$t('index.Change_order_number')}}</view>
					<view class="staNum">{{detail.list.orderNo==null?'--':detail.list.orderNo}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between flex-wrap list-view">
					<view class="staName">{{$t('index.Order_time')}}</view>
					<view class="staNum">{{detail.list.createTime==null?'--':detail.list.createTime}}</view>
				</view>
				<view class="flex justify-between  list-view">
					<view class="staName">{{$t('index.License_number')}} </view>
					<view class="staNum">{{detail.list.staSwapRecord==null?'--':detail.list.staSwapRecord.cn}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view">
					<view class="staName">{{$t('index.Vehicle_vin2')}}</view>
					<view class="staNum">{{detail.list.staSwapRecord==null?'--':detail.list.staSwapRecord.vin}}</view>
				</view>
				<view class="flex justify-between  list-view">
					<view class="staName">{{$t('index.time_power_change')}}</view>
					<view class="staNum">{{detail.list.staSwapRecord==null?'--':detail.list.staSwapRecord.wt}}{{$t('index.seconds')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view">
					<view class="staName"> {{$t('index.Battery_charge_capacity')}}</view>
					<view class="staNum">{{detail.list.chargeEnergy==null?'0':detail.list.chargeEnergy}}kW·h</view>
				</view>
				<view class="flex justify-between  list-view">
					<view class="staName">{{$t('index.Platform_service_fee')}}</view>
					<view class="staNum">{{detail.list.platformTotalFee==null?'0':detail.list.platformTotalFee}}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex justify-between list-view">
					<view class="staName">{{$t('index.Battery_service_charge')}}</view>
					<view class="staNum">{{detail.list.batTotalFee==null?'0':detail.list.batTotalFee}}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view">
					<view class="staName">{{$t('index.Change_service_charge')}}</view>
					<view class="staNum">{{detail.list.serviceTotalFee==null?'0':detail.list.serviceTotalFee}}{{$t('index.yuan')}}</view>
				</view>
				<!--  -->
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Peak_electricity_price')}}</view>
					<view class="staNum">{{ detail.list.jprice==null?'0':detail.list.jprice }}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Charge_capacity_peak')}}</view>
					<view class="staNum">{{ detail.list.jelec==null?'0':detail.list.jelec }}kW·h</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Total_peak_time')}}</view>
					<view class="staNum">{{ detail.list.jfee==null?'0':detail.list.jfee }}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Peak_electricity')}}</view>
					<view class="staNum">{{ detail.list.fprice==null?'0':detail.list.fprice }}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Peak_charge_capacity')}}</view>
					<view class="staNum">{{ detail.list.felec==null?'0':detail.list.felec }}kW·h</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Total_peak_cost')}}</view>
					<view class="staNum">{{ detail.list.ffee ==null?'0':detail.list.ffee}}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Usual_electricity_price')}}</view>
					<view class="staNum">{{ detail.list.pprice==null?'0':detail.list.pprice }}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Charge_battery_ordinary')}}</view>
					<view class="staNum">{{ detail.list.pelec ==null?'0':detail.list.pelec}}kW·h</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.total_rdinary_period')}}</view>
					<view class="staNum">{{ detail.list.pfee ==null?'0':detail.list.pfee}}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Grain_electricity')}}</view>
					<view class="staNum">{{ detail.list.gprice ==null?'0':detail.list.gprice}}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Charging_power_cereal')}}</view>
					<view class="staNum">{{ detail.list.gelec==null?'0':detail.list.gelec }}kW·h</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Tota_cereal_period')}}</view>
					<view class="staNum">{{ detail.list.gfee ==null?'0':detail.list.gfee}}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.total_charging_model')}}</view>
					<view class="staNum">{{ detail.list.billingTotalFee==null?'0':detail.list.billingTotalFee }}{{$t('index.yuan')}}</view>
				</view>
				<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
					<view class="staName">{{$t('index.Total_grid_electricity_model')}}</view>
					<view class="staNum">{{ detail.list.elecTotalFee ==null?'0':detail.list.elecTotalFee}}{{$t('index.yuan')}}</view>
				</view>
				<!--  -->
				<view class="flex solid-bottom padding-bottom-sm padding-lr-sm justify-between flex-wrap list-view">
					<view class="staName">{{$t('index.Note_Information')}}</view>
					<view class="staNum">{{detail.list.remark==null?'--':detail.list.remark}}</view>
				</view>
				<view class="flex padding-sm justify-between flex-wrap">
					<view class="titleName">{{$t('index.Total_cost')}}</view>
					<view class="money text-price">{{detail.list.totalFee==null?'0':detail.list.totalFee}}{{$t('index.yuan')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";

	import {
		useCounterStore
	} from '@/stores/counter.js';
	import { useI18n } from 'vue-i18n'//zz
	   const { t } = useI18n()//zz
	const isDetail = useCounterStore()


	const detail = reactive({
		list: []
	})

	onLoad((options) => {
		var station = JSON.parse(options.details);
		detail.list = station
		console.log(detail.list, t('index.Order_Details'));
	})
	onShow(() => {
		isDetail.value = true
	})
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background: #F7F8FA;
	}

	.cu-card.article>.cu-item {
		padding-bottom: 0rpx;
	}

	.payState {
		color: #4C91FF;
		font-size: 39rpx;
	}

	.non-payment {
		color: #FF7B0E;
		font-size: 39rpx;
	}

	.refunded {
		color: #F23E2C;
		font-size: 39rpx;
	}

	.name {
		color: #333;
		font-size: 39rpx;
		font-weight: 400;
	}

	.titleName {
		color: #808080;
		font-size: 28rpx;
		font-weight: 400;
	}

	.staName {
		color: #808080;
		font-size: 28rpx;
		font-weight: 400;
	}

	.staNum {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
	}

	.money {
		color: #4C91FF;
		font-size: 32rpx;
		font-weight: 600;
	}

	.list-view {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}
</style>