ChargEco/Strides-APP/app/pages/chargingV3/StepCharging.js

/**
 * 新充电流程：正在充电模块
 * @邠心vbe on 2023/06/20
 */
import React, { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import app from '../../../app.json';
import Button, { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';
import { PaymentList } from '../chargeV2/Payment';
import PaymentListV2 from '../chargeV2/PaymentListV2';
import StatusImage from './StatusImage';
import ConnectorInfo from './ConnectorInfo';

const StepCharging = ({
  connectorInfo={},
  currentPayment,
  onStopCharge,
  selectedVoucher={}
}) => {
  const [isCharging, setCharging] = useState(false);
  const [loadingEmps, setEmps] = useState("");

  useEffect(() => {
    const isCharge = (connectorInfo.status == "Charging");
    setCharging(isCharge);
    if (!isCharge) {
      changeEmps();
    }
  }, [])

  useEffect(() => {
    const isCharge = (connectorInfo.status == "Charging");
    setCharging(isCharge);
    if (!isCharge) {
      setTimeout(() => {
        changeEmps();
      }, 500);
    }
  }, [connectorInfo,loadingEmps])

  const changeEmps = () => {
    let emp = loadingEmps;
    if (loadingEmps.length == 3) {
      emp = "";
    } else {
      emp += ".";
    }
    setEmps(emp);
  }

  return (
  isCharging
  ? <View style={ui.flex1}>
      <ScrollView
        style={ui.flex1}
        contentContainerStyle={$padding(16)}>
        <View style={ui.center}>
          <StatusImage
            isCharging={true}
            isLoading={true}
            soc={connectorInfo.batteryPercent}/>
          <TextView style={styles.stepTitle}>{$t('charging.statusCharging')}</TextView>
          <TextView style={styles.stepDesc}>{$t('charging.stepChargingDesc')}</TextView>
        </View>
        <ConnectorInfo
          isCharging={true}
          connectorInfo={connectorInfo}/>
        <View style={styles.bottomSelectView}>
          <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
          { app.charge.paymentMethod
          ? <PaymentListV2
              isSelect={false}
              payType={currentPayment}
              borderColor={textCancel}
              chargeBoxId={connectorInfo.chargeBoxId}
              style={styles.paymentView}/>
          : <PaymentList
              isSelect={false}
              payType={currentPayment}/>
          }
          { utils.isNotEmpty(selectedVoucher.userVoucherId) && <>
            <TextView style={styles.label}>{$t('voucher.vouchers')}</TextView>
            <View
              style={styles.paymentView}>
              <MaterialCommunityIcons
                name="ticket-percent-outline"
                size={32}
                color={textPrimary}/>
              <View style={styles.vouchersView}>
                <TextView
                  style={styles.voucherName}
                  numberOfLines={1}>
                  {selectedVoucher.voucherName}
                </TextView>
                <TextView
                  style={styles.voucherDesc}
                  numberOfLines={1}>
                  {selectedVoucher.voucherDesc}
                </TextView>
              </View>
            </View>
          </> }
          <View style={{height: 56}}></View>
        </View>
      </ScrollView>
      <Button
        style={styles.buttonView}
        text={$t('charging.btnStopCharging')}
        elevation={1.5}
        borderRadius={6}
        onClick={onStopCharge}/>
    </View>
  : <View style={ui.flex1}>
      <View style={styles.content}>
        <StatusImage
          isInitial={true}
          isLoading={true}/>
        <View style={ui.flexcc}>
          <TextView style={styles.stepTitle}>{$t('charging.stepInitializing')}</TextView>
          <TextView style={[styles.stepTitle, {width: 30, marginRight: -10}]}>{loadingEmps}</TextView>
        </View>
        <TextView style={styles.stepDesc}>{$t('charging.stepInitializingDesc')}</TextView>
      </View>
      {/* <View style={styles.bottomView}>
        <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
        { app.charge.paymentMethod
        ? <PaymentListV2
            isSelect={false}
            payType={currentPayment}/>
        : <PaymentList
            isSelect={false}
            payType={currentPayment}/>
        }
        <View style={styles.buttonView}></View>
      </View> */}
    </View>
  );
}

export default StepCharging;

const styles = StyleSheet.create({
  content: {
    flex: 1,
    padding: 16,
    alignItems: 'center'
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colorAccent
  },
  stepDesc: {
    color: textPrimary,
    fontSize: 16,
    textAlign: 'center',
    ...$padding(0, 32, 32)
  },
  infoCarded: {
    flex: 1,
    paddingTop: 12,
    paddingBottom: 12,
    borderRadius: 10,
    marginRight: 16,
    overflow: 'hidden',
    alignItems: 'center',
    ...ElevationObject(5),
    backgroundColor: colorLight
  },
  label: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8
  },
  bottomSelectView: {
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 16
  },
  bottomView: {
    left: 0,
    right: 0,
    bottom: 32,
    padding: 16,
    position: 'absolute'
  },
  paymentView: {
    ...$padding(10, 12),
    borderWidth: 1,
    borderRadius: 10,
    borderColor: textCancel,
    marginBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colorLight,
    justifyContent: 'space-between'
  },
  buttonView: {
    left: 16,
    right: 16,
    bottom: 24,
    position: 'absolute'
  },
  vouchersView: {
    flex: 1,
    paddingLeft: 8,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  selectText: {
    flex: 1,
    color: textSecondary,
    fontSize: 15,
    fontWeight: 'bold'
  },
  voucherName: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    paddingLeft: 8,
    fontWeight: 'bold'
  },
  voucherDesc: {
    flex: 1,
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 16
  }
})