ChargEco/Strides-APP/app/pages/charge/Charge.js

/**
 *  充电页面
 * @邠心vbe on 2021/04/12
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, ImageBackground, Image, TextInput } from 'react-native';
import apiCharge from '../../api/apiCharge';
import Button from '../../components/Button';
import Dialog from '../../components/Dialog';
import { PageList } from '../Router';
import { BatteryView, ChargeStyle, circleSize, EnterStationDialog, TypeImage } from './Charging';
import Payment from '../wallet/Payment';
import { QRResult } from './QRScan';
import { ErrorDialog } from './InfoDialog';
import utils from '../../utils/utils';
import TextView from '../../components/TextView';
import { PaymentDefault, PAYTYPE } from '../payment/PaymentConfig';

export default class Charge extends Component {

  constructor(props) {
    super(props);
    this.state = {
      available: false,
      isPrivate: false,
      refreshId: 0,
      isStart: false,
      isPending: false,
      isCharging: false,
      isAuthentic: false,
      rateList: [],
      selectRate: '',
      connectorInfo: {},
      stationInfo: {},
      lastUpdated: '',
      errorCode: 'A9',
      errorMessage: '',
      showErrorDialog: false,
      showStationDialog: false,
      curerntPerUser: undefined,
      //currentPayment: PAYTYPE.CREDIT_WALLET,
      //currentPaytype: "Credit Wallet",
      currentPayment: PaymentDefault.DEFAULT.payType,
      currentPaytype: PaymentDefault.DEFAULT.payName
    };
    this.changeMethod = false;
    this.canAutoRefresh = false;
    this.inputStationId = '';
  }

  componentDidMount() {
    this.canAutoRefresh = true;
    if (this.props.stationInfo) {
      this.setState({
        rateList: this.props.stationInfo.rateList ?? [],
        stationInfo: this.props.stationInfo
      }, () => {
        this.refreshAvailable();
        this.checkIsCharge();
      });
    }
  }

  componentDidUpdate() {
    if (this.props.visible && this.props.refreshId != this.state.refreshId) {
      this.onMethodChanged();
      this.setState({
        refreshId: this.props.refreshId,
        rateList: this.props.stationInfo.rateList ?? [],
        stationInfo: this.props.stationInfo
      }, () => this.refreshAvailable());
      if (QRResult.haveResult()) {
        const info = QRResult.getResult()
        console.log('QRResult', info);
        this.setState({
          isAuthentic: true,
          connectorInfo: info
          //soc: info.chargeType == 'AC' ? 0 : 'In Charging'
        });
        this.checkChargeStatus();
      } else if (this.state.isStart) {
        this.checkIsCharge();
      } else {
        this.checkChargeStatus();
      }
    }
  }

  componentWillUnmount() {
    this.canAutoRefresh = false;
  }

  //刷新可用充电接口
  refreshAvailable() {
    const info = this.state.stationInfo
    const all = info?.allConnector;
    if (info.siteType == 'Private') {
      this.setState({
        isPrivate: true
      })
    }
    if (all) {
      this.setState({
        available: !all.available > 0
      });
    }
  }

  enterStatioinId() {
    if (QRResult.haveResult()) {
      const info = QRResult.getResult()
      console.log('EnterResult', info);
      this.setState({
        isAuthentic: true,
        connectorInfo: info
        //soc: info.chargeType == 'AC' ? 0 : 'In Charging'
      });
      this.checkChargeStatus();
    }
  }

  onMethodChange() {
    this.changeMethod = true;
    startPage(PageList.paymentMethod, {info: this.state.connectorInfo, type: this.state.currentPayment});
  }

  onMethodChanged() {
    if (this.changeMethod) {
      this.changeMethod = false;
      if (global.paymentOption?.title) {
        this.setState({
          curerntPerUser: global.paymentOption.amount,
          currentPayment: global.paymentOption.value,
          currentPaytype: global.paymentOption.title
        }, () => {
          global.paymentOption= {}
        })
      }
    }
  }

  //扫码之前-站点信息Section
  StationInfo() {
    return (
      <View style={styles.listView}>
        <View style={ChargeStyle.stationInfoView}>
          <ImageBackground
            style={{
              width: 42,
              height: 42
            }}
            source={require('../../images/charge/icon-station-no.png')}>
            <TextView style={{
              left: 0,
              right: 0,
              bottom: 1,
              fontSize: 8,
              textAlign: 'center',
              position: 'absolute'
            }}>{this.state.connectorInfo.connectorId}</TextView>
          </ImageBackground>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Type</TextView>
            <TextView style={ChargeStyle.infoText}>{this.state.connectorInfo.chargeType}{this.state.connectorInfo.wattage}</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Power</TextView>
            <TextView style={ChargeStyle.infoText}>{this.state.connectorInfo.wattage}kW{/*this.state.connectorInfo.rateType*/}</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Rate</TextView>
            <TextView style={ChargeStyle.infoText}>{currency}{this.state.connectorInfo.rate}/{this.state.connectorInfo.rateType}</TextView>
          </View>
          { this.state.connectorInfo.isCheckThrough
          ? <View style={ChargeStyle.infoGroup}>
              <MaterialIcons name='check-circle' size={18} color='#90DB0A'/>
              <TextView style={ChargeStyle.authText}>Authenticated</TextView>
            </View>
          : <View style={ChargeStyle.infoGroup}>
              <MaterialCommunityIcons name='close-circle' size={18} color='#FF6666'/>
              <TextView style={ChargeStyle.authText}>Not Connected</TextView>
            </View>
          }
        </View>
      </View>
    );
  }
  //扫码之前-站点信息Section-end

  //扫码之后-选择的站点信息Section
  UseStationInfo() {
    return (
      <View style={[styles.listView, { marginTop: 16}]}>
        <View style={ChargeStyle.stationInfoView}>
          <ImageBackground
            style={{
              width: 42,
              height: 42
            }}
            source={require('../../images/charge/icon-station-no.png')}>
            <TextView style={{
              left: 0,
              right: 0,
              bottom: 1,
              fontSize: 8,
              color: textPrimary,
              textAlign: 'center',
              position: 'absolute'
            }}>{this.state.connectorInfo.connectorId}</TextView>
          </ImageBackground>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Type</TextView>
            <TextView style={ChargeStyle.infoText}>{this.state.connectorInfo.chargeType}{this.state.connectorInfo.wattage}</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Power</TextView>
            <TextView style={ChargeStyle.infoText}>{this.state.connectorInfo.wattage}kW</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Rate</TextView>
            <TextView style={ChargeStyle.infoText}>{currency}{this.state.connectorInfo.rate}/{this.state.connectorInfo.rateType}</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={styles.inUse}>In Use</TextView>
          </View>
        </View>
        <View style={[ChargeStyle.stationInfoView, ChargeStyle.itemDivide]}>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Time Elapsed</TextView>
            <TextView style={ChargeStyle.infoText}>{this.state.connectorInfo.timeElapsed?.toFixed(0) ?? 0} Minutes</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Total kWh Delivered</TextView>
            <TextView style={ChargeStyle.infoText}>{this.state.connectorInfo.totalKWhDelivered ?? 0} kWh</TextView>
          </View>
          <View style={ChargeStyle.infoGroup}>
            <TextView style={ChargeStyle.infoTitle}>Total Charges</TextView>
            <TextView style={ChargeStyle.infoText}>{currency} {this.state.connectorInfo.totalCharges?.toFixed(2) ?? '0.0'}</TextView>
          </View>
        </View>
      </View>
    );
  }
  //扫码之后-选择的站点信息Section-end

  //初始页面-扫码认证之前
  StepRateView() {
    return (
      <>
        <TextView style={styles.title}>Rates</TextView>
        <View style={styles.listView}>
          { this.state.rateList.length > 0
            ? this.state.rateList.map((item, index) => {
                return (
                  <View key={index} style={[ChargeStyle.stationInfoView, index > 0 ? ChargeStyle.itemDivide : {}]}>
                    <Image
                      style={ChargeStyle.infoIcon}
                      source={item.type?.indexOf('AC') >= 0 ? TypeImage.AC : TypeImage.DC}/>
                    <View style={ChargeStyle.infoGroup}>
                      <TextView style={ChargeStyle.infoTitle}>Type</TextView>
                      <TextView style={ChargeStyle.infoText}>{item.type}</TextView>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      <TextView style={ChargeStyle.infoTitle}>Power</TextView>
                      <TextView style={ChargeStyle.infoText}>{item.power}</TextView>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      <TextView style={ChargeStyle.infoTitle}>Rate</TextView>
                      <TextView style={ChargeStyle.infoText}>{item.rates}</TextView>
                    </View>
                    { item?.connectorCount?.available > 0
                      ? <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>Available</TextView>
                      : <TextView style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>Unavailable</TextView>
                    }
                  </View>
                );
              })
            : <Text style={ui.noData}>No Rates</Text>
          }
        </View>
        <View style={styles.privateView}> 
          { this.state.isPrivate &&
            <Text style={styles.privateText}>NOTE: The charging stations are for private usage.</Text>
          }
        </View>
        <Payment refreshId={this.state.refreshId}/>
        <View style={styles.buttonGroup}>
          <Button
            style={styles.buttonLeft}
            text='Scan QR'
            //disabled={this.state.available}
            onClick={() => {
              startPage(PageList.scanqr, {actionDetail: false, id: this.state.stationInfo.id});
            }}/>
          <Button
            style={styles.buttonRight}
            text='Enter Station ID'
            //disabled={this.state.available}
            onClick={() => {
              this.setState({
                showStationDialog: true
              })
            }}/>
        </View>
      </>
    );
  }
  //初始页面-扫码认证之前-end

  //扫码认证之后-充电开始之前
  StepStartView() {
    return (
      <>
        <TextView style={styles.title}>Your Selection</TextView>
        {this.StationInfo()}
        <View style={ui.center}>
          <ImageBackground
            style={styles.batteryBorder}
            source={require('../../images/charge/ic-charge-circle.png')}>
            <Text style={{
              color: textPrimary,
              fontSize: 16,
              lineHeight: 22,
              textAlign: 'center'
            }}>
              Press<Text style={{padding: 10, fontWeight: 'bold'}}> Start </Text>to begin Charging
            </Text>
          </ImageBackground>
        </View>
        <Payment 
          refreshId={this.state.refreshId}
          payType={this.state.currentPaytype}
          balance={this.state.curerntPerUser}
          isPayPerUse={this.state.currentPayment == PAYTYPE.PAY_PER_USE}
          onMethodChange={() => this.onMethodChange()}
        />
        
        <Button
          style={styles.buttonView}
          text='Start'
          elevation={1.5}
          onClick={() => this.startCharge()}/>
      </>
    );
  }
  //扫码认证之后-充电开始之前-end

  //正在充电页面
  StepChargeView() {
    return (
      <>
        {this.UseStationInfo()}

        <BatteryView
          soc={this.state.connectorInfo.batteryPercent}
          isCharging={this.state.isCharging}
          isPending={this.state.isPending}
        />

        { this.state.lastUpdated
          ? <Text style={styles.updateTip}>{'Last updated at ' + this.state.lastUpdated + '\nPull down to refresh'}</Text>
          : null
        }

        <Payment 
          refreshId={this.state.refreshId}
          payType={this.state.currentPaytype}
          balance={this.state.curerntPerUser}
        />
        
        <Button
          style={styles.buttonView}
          disabled={this.state.isPending}
          text={this.state.isCharging ? 'Stop Charging' : 'Complete'}
          elevation={1.5}
          onClick={() => {
            if (this.state.isCharging) {
              Dialog.showDialog({
                title: 'Stop Charging',
                message: 'Are you sure stop charging?',
                callback: ok => {
                  if (ok == Dialog.BUTTON_OK) {
                    this.stopCharge();
                  }
                }
              });
            } else {
              this.stopCharge();
            }
          }}/>
      </>
    );
  }
  //正在充电页面-end

  //自动刷新
  autoCheckIsCharge() {
    if (this.canAutoRefresh) {
      this.checkIsCharge();
    }
  }

  //自动刷新状态
  autoCheckChargeStatus() {
    setTimeout(() => {
      if (this.canAutoRefresh) {
        this.checkChargeStatus();
      }
    }, 10000);
  }

  //获取充电数据（百分比）
  checkIsCharge(showError) {
    const params = {
      sitePk: this.props.stationInfo.id
    }
    apiCharge.checkIsCharging(params).then(res => {
      this.setState({
        isStart: true,
        isCharging: true,
        isAuthentic: true,
        connectorInfo: res.data,
        lastUpdated: utils.getNowHHmm()
      });
      if (this.canAutoRefresh) {
        setTimeout(() => {
          this.autoCheckIsCharge();
        }, 30000);
      }
      if (!this.props.visible && this.props.onCharge)
        this.props.onCharge()
    }).catch((err) => {
      //TODO 模拟测试
      this.setState({
        isStart: false,
        isCharging: false
      });
      setTimeout(() => {
        this.autoCheckIsCharge();
      }, 30000);
      if (showError) {
        this.setState({
          errorCode: 'A4',
          showErrorDialog: true,
          errorMessage: 'Your vehicle doesn’t seem to be charging. Please check your vehicle.'
        });
      }
    });
  }

  //获取充电桩对应接口的状态
  checkChargeStatus() {
    //TODO 模拟测试
    /*this.setState({
      isStart: true,
      isCharging: true,
      isAuthentic: true
    });
    return;*/
    const params = {
      connectorId: this.state.connectorInfo.connectorId,
      chargeBoxId: this.state.connectorInfo.chargeBoxId,
    }
    if (!params.chargeBoxId || !params.connectorId) {
      return;
    }
    apiCharge.getCurrentStatus(params).then(res => {
      if (res.data.status) {
        switch (res.data.status) {
          case 'Available': //可用的
            this.state.connectorInfo.isCheckThrough = false;
            this.setState({
              isStart: false,
              isPending: false,
              isCharging: false,
              connectorInfo: this.state.connectorInfo
            });
            break;
          case 'Preparing': //已插入
            this.state.connectorInfo.isCheckThrough = true;
            this.setState({
              isStart: false,
              isPending: false,
              isCharging: false,
              available: true,
              connectorInfo: this.state.connectorInfo
            });
            //this.checkIsCharge();
            break;
          case 'Charging': //正在充电
            this.canAutoRefresh = true;
            this.state.connectorInfo.isCheckThrough = true;
            this.setState({
              isPending: false,
              connectorInfo: this.state.connectorInfo
            });
            this.checkIsCharge();
            break;
          case 'Initiating': //充电确认中
            this.canAutoRefresh = true;
            this.state.connectorInfo.isCheckThrough = true;
            this.setState({
              isStart: true,
              isPending: true,
              isCharging: true,
              isAuthentic: true,
              connectorInfo: this.state.connectorInfo
            });
            this.autoCheckChargeStatus();
            break;
          case 'SuspendedEVSE':
            this.setState({
              errorCode: 'A5',
              showErrorDialog: true,
              errorMessage: 'The charging station is unable to charge your vehicle.Please reauthenticate.'
            });
            break;
          case 'SuspendedEV': //已连接上但未充电
            this.checkIsCharge(true);
            break;
          case 'Reserved': //预定中
            this.setState({
              errorCode: 'A5',
              showErrorDialog: true,
              errorMessage: 'The charging station is reserved and unable to charge your vehicle.'
            });
            break;
          case 'Finishing': //已完成
            this.setState({
              isStart: true,
              isPending: false,
              isCharging: false
            });
            break;
          default:
            this.setState({
              isStart: false,
              isPending: false,
              isCharging: false
            });
            this.setState({
              errorCode: 'A4',
              showErrorDialog: true,
              errorMessage: 'Your vehicle doesn’t seem to be charging. Please check your vehicle. (E0)'
            });
            break;
        }
      }
    }).catch((err) => {
      toastShort(err)
      this.setState({
        errorCode: 'A9',
        showErrorDialog: true,
        errorMessage: 'There seems to be an authentication error! Please try again'
      });
    })
  }

  //开始充电api
  startCharge() {
    if (this.state.connectorInfo.isCheckThrough) {
      Dialog.showProgressDialog();
      const params = {
        chargeBoxId: this.state.connectorInfo.chargeBoxId,
        connectorId: this.state.connectorInfo.connectorId
      }
      apiCharge.startCharge(params).then(res => {
        this.setState({
          isStart: true,
          isPending: true,
          isCharging: true
        });
        this.canAutoRefresh = true;
        this.autoCheckChargeStatus();
        /*setTimeout(() => {
          this.autoCheckIsCharge();
        }, 30000);*/
        Dialog.dismissLoading();
      }).catch((err) => {
        //toastShort(err);
        Dialog.dismissLoading();
        this.setState({
          errorCode: 'A4',
          showErrorDialog: true,
          errorMessage: ''+err
        });
      });
    } else {
      this.setState({
        errorCode: 'A1',
        showErrorDialog: true,
        errorMessage: 'Your vehicle is not connected to the charging station. Please check the connector.'
      });
    }
  }

  //停止充电api
  stopCharge() {
    this.canAutoRefresh = false;
    Dialog.showProgressDialog();
    apiCharge.stopCharge().then(res => {
      if (res.data.chargingPk) {
        setTimeout(() => {
          Dialog.dismissLoading();
          this.setState({
            isStart: false,
            isPending: false,
            isCharging: false
          });
          startPage(PageList.summary, { 
            chargingPk: res.data.chargingPk,
            id: this.state.stationInfo.id,
            name: this.state.stationInfo.name,
            address: this.state.stationInfo.address
          });
        }, 3000);
      } else {
        Dialog.dismissLoading();
        toastShort('An error detected, please retry.')
      }
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err);
      this.setState({
        isStart: false,
        isPending: false,
        isCharging: false
      });
      //模拟进入结算页
      /*startPage(PageList.summary, {
        chargingPk: 1,
        id: this.state.stationInfo.id,
        name: this.state.stationInfo.name,
        address: this.state.stationInfo.address
      });*/
    });
  }

  closeError() {
    this.setState({
      showErrorDialog: false,
      showStationDialog: false
    });
  }

  render() {
    return (
      <View style={{
          paddingLeft: 16,
          paddingRight: 16,
          ...this.props.style
        }}>
        { this.state.isAuthentic //是否扫码认证
          ? this.state.isStart   //是否开始充电
            ? this.StepChargeView()
            : this.StepStartView()
          : this.StepRateView()
        }
        <ErrorDialog
          visible={this.state.showErrorDialog}
          code={this.state.errorCode}
          message={this.state.errorMessage}
          onClose={() => {
            this.closeError();
          }}
        />
        <EnterStationDialog
          visible={this.state.showStationDialog}
          stationId={this.state.stationInfo.id}
          onConfirm={() => this.enterStatioinId()}
          onClose={() => this.closeError()}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 16
  },
  listView: {
    padding: 8,
    borderRadius: 8,
    backgroundColor: '#F5F5F5'
  },
  batteryBorder: {
    margin: 30,
    padding: 32,
    width: circleSize,
    height: circleSize,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonView: {
    marginTop: 16,
    marginBottom: 32
  },
  buttonGroup: {
    marginTop: 16,
    marginBottom: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  buttonLeft: {
    flex: 1,
    elevation: 1.5,
  },
  buttonRight: {
    flex: 1,
    marginLeft: 16,
    elevation: 1.5
  },
  inUse: {
    color: '#fff',
    fontSize: 12,
    paddingTop: 4,
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 4,
    borderRadius: 4,
    backgroundColor: '#FF7A00'
  },
  updateTip: {
    color: '#aaa',
    fontSize: 10,
    textAlign: 'center',
    paddingBottom: 16
  },
  privateView: {
    height: $vht(25),
    alignItems: 'center',
    justifyContent: 'center'
  },
  privateText: {
    color: '#FA5759'
  }
})