import { View, Text, ScrollView, Image, StyleSheet, Pressable } from 'react-native';
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path, Rect } from 'react-native-svg';
import NormalButton from '../global/normal_button';
import SlideInImage from '../global/slideInImage';
import { router } from 'expo-router';
const BatteryLogoSvg = () => (
);
const DownArrowSvg = () => (
);
const UpArrowSvg = () => (
);
const TimeClockLogoSvg = () => (
);
const TickLogoSvg = () => (
);
const BatteryIconSvg = () => (
);
const LightingLogoSvg = () => (
);
const ChargingFinishPageFromTabComponent = () => {
//1 make this component receives a parameter, and receive format order id .
//2 make a use effect to fetch data using the format id.
//3 change below details
const [isMoreInfoButtonPressed, setIsMoreInfoButtonPressed] = React.useState(false);
function calculateDurationInMinutes(startTimeString: string, endTimeString: string): number {
const startTime = new Date(startTimeString);
const endTime = new Date(endTimeString);
// Calculate the difference in milliseconds
const durationMs = endTime.getTime() - startTime.getTime();
// Convert milliseconds to minutes
const durationMinutes = Math.round(durationMs / (1000 * 60));
return durationMinutes;
}
const durationInMinutes = calculateDurationInMinutes(chargingData.actual_end_time, chargingData.actual_start_time);
return (
完成充電
{chargingData.car.car_brand.name} {chargingData.car.car_type.name}
已充電
{`${chargingData.Soc}%`}
{/* actualEnd_time - actual start time */}
充電歷時
{/* 39 */}
{durationInMinutes}
mins
{isMoreInfoButtonPressed ? (
<>
充電功率
{chargingData.connector.Power / 1000}kW
實際功率
{/* 30.0kW */}
{chargingData.connector.Power / 1000}kW
{
setIsMoreInfoButtonPressed(!isMoreInfoButtonPressed);
}}
style={{ padding: 2 }}
>
收起
) : (
{
setIsMoreInfoButtonPressed(!isMoreInfoButtonPressed);
}}
style={{ padding: 2 }}
>
更多資訊
)}
收費概要
充電費用
HK$ {chargingData.total_fee}
{chargingData.total_power === null
? '充滿停機'
: `按每度電結算: ${chargingData.total_power} kWh`}
{chargingData.withdraw_fee === 0 ? (
''
) : (
退還充電按金
HK$ ${chargingData.withdraw}
)}
總計
HK$ ${chargingData.total_fee - chargingData.withdraw_fee}
付款資訊
訂單編號
CXZ-16336958
付款方式
預付銀包
返回主頁}
onPress={() => {
router.push('mainPage');
}}
/>
);
};
export default ChargingFinishPageFromTabComponent;
const styles = StyleSheet.create({
grayColor: {
color: '#888888'
},
greenColor: {
color: '#02677D'
}
});