ChargEco/Strides-APP/app/pages/chargeV2/TabCharge.js

/**
 * 新版充电页面
 * @邠心vbe on 2023/02/06
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, ImageBackground, Image, ScrollView } 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, DashboardView, EnterStationDialog, TypeImage } from './Charging';
import Payment, { PaymentDefault, PAYTYPE } from '../wallet/Payment';
import { QRResult } from '../charge/QRScan';
import { ErrorDialog } from './InfoDialog';
import utils from '../../utils/utils';
import PagerUtil from './PagerUtil';
import { PaymentList } from './Payment';
import BadgeSelectItem from '../../components/BadgeSelectItem';

export default class TabCharge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      available: false,
      isPrivate: false,
      refreshId: 0,
      isStart: false,
      isPending: false,
      isCharging: false,
      isAuthentic: false,
      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;
    PagerUtil.addOnRefresh(this);
    this.onRefresh();
  }

  onRefresh() {
    console.log("Charge刷新", this.props.route.name);
    const info = PagerUtil.getStationInfo();
    this.setState({
      stationInfo: info
    }, () => {
      this.init();
      //console.log("站点信息", this.state.stationInfo);
      //this.checkIsCharge();
    });
  }

  init() {
    console.log("Charge刷新", "init");
    this.onMethodChanged();
    this.refreshAvailable();
    if (QRResult.haveResult()) {
      console.log("Charge刷新", "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) {
      console.log("Charge刷新", "isStart");
      this.checkIsCharge();
    } else {
      console.log("Charge刷新", "noStart");
      this.getConnectorInfo();
      //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();
    }
  }

  onPaymentMethodChanged(payment) {
    this.setState({
      currentPayment: payment
    })
  }

  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 (
      <BadgeSelectItem
        style={ChargeStyle.stationInfoView}
        checked={true}>
        {/* <ImageBackground
          style={{
            width: 42,
            height: 42
          }}
          source={require('../../images/charge/icon-station-no.png')}>
          <Text style={{
            left: 0,
            right: 0,
            bottom: 1,
            fontSize: 8,
            color: 'white',
            textAlign: 'center',
            position: 'absolute'
          }}>{this.state.connectorInfo.connectorId}</Text>
        </ImageBackground> */}
        <Image
          style={ChargeStyle.infoIcon}
          source={this.state.connectorInfo.chargeType.indexOf('AC') >= 0 ? TypeImage.AC : TypeImage.DC}/>
        <View style={ChargeStyle.infoGroup}>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={ChargeStyle.infoText}>{this.state.connectorInfo.chargeType}{this.state.connectorInfo.wattage}</Text>
          <Text style={ChargeStyle.infoTitle}>Type</Text>
        </View>
        <View style={ChargeStyle.infoGroup}>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={ChargeStyle.infoText}>{currency}{this.state.connectorInfo.rate}/{this.state.connectorInfo.rateType}</Text>
          <Text style={ChargeStyle.infoTitle}>Rate</Text>
        </View>
        <View style={ChargeStyle.infoGroup}>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={ChargeStyle.infoText}>{this.state.connectorInfo.wattage}kW{/*this.state.connectorInfo.rateType*/}</Text>
          <Text style={ChargeStyle.infoTitle}>Power</Text>
        </View>
        <View style={ChargeStyle.infoGroup}>
          { this.state.isCharging
          ? (this.state.isPending
            ? (
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
                  Preparing
                </Text>
              )
            : (
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
                  Charging
                </Text>
              )
            )
          : (this.state.connectorInfo.isCheckThrough
            ? (
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
                  Authenticated
                </Text>
              )
            : (
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  style={[ChargeStyle.infoStatus, ChargeStyle.statusError]}>
                  Not Connected
                </Text>
              )
            )
          }
          <Text style={ChargeStyle.infoTitle}>Status</Text>
        </View>
      </BadgeSelectItem>
    );
  }
  //扫码之前-站点信息Section-end

  //初始页面-扫码认证之前
  StepRateView() {
    return (
      <View>
        <View style={{minHeight: $vht(80)}}>
          <Text style={styles.gstText}>All rates Include 8% GST</Text>
          <Text style={styles.title}>AC Chargers ({this.state.stationInfo?.acConnector?.available ?? "0"} available)</Text>
          { this.state.stationInfo.acRates?.length > 0
            ? this.state.stationInfo.acRates.map((item, index) => {
                return (
                  <View key={index} style={ChargeStyle.stationInfoView}>
                    <Image
                      style={ChargeStyle.infoIcon}
                      source={TypeImage.AC}/>
                    <View style={ChargeStyle.infoGroup}>
                      <Text style={ChargeStyle.infoText}>{item.type}</Text>
                      <Text style={ChargeStyle.infoTitle}>Type</Text>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      <Text style={ChargeStyle.infoText}>{item.rates}</Text>
                      <Text style={ChargeStyle.infoTitle}>Rate</Text>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      <Text style={ChargeStyle.infoText}>{item.power}</Text>
                      <Text style={ChargeStyle.infoTitle}>Power</Text>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      { item?.connectorCount?.available > 0
                        ? <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>Available</Text>
                        : <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>Unavailable</Text>
                      }
                      <Text style={ChargeStyle.infoTitle}>Status</Text>
                    </View>
                  </View>
                );
              })
            : <Text style={ui.noData}>No Rates</Text>
          }
          <Text style={styles.title}>DC Chargers ({this.state.stationInfo?.dcConnector?.available ?? "0"} available)</Text>
          { this.state.stationInfo.dcRates?.length > 0
            ? this.state.stationInfo.dcRates.map((item, index) => {
                return (
                  <View key={index} style={ChargeStyle.stationInfoView}>
                    <Image
                      style={ChargeStyle.infoIcon}
                      source={TypeImage.DC}/>
                    <View style={ChargeStyle.infoGroup}>
                      <Text style={ChargeStyle.infoText}>{item.type}</Text>
                      <Text style={ChargeStyle.infoTitle}>Type</Text>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      <Text style={ChargeStyle.infoText}>{item.rates}</Text>
                      <Text style={ChargeStyle.infoTitle}>Rate</Text>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      <Text style={ChargeStyle.infoText}>{item.power}</Text>
                      <Text style={ChargeStyle.infoTitle}>Power</Text>
                    </View>
                    <View style={ChargeStyle.infoGroup}>
                      { item?.connectorCount?.available > 0
                        ? <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusAvailable]}>Available</Text>
                        : <Text style={[ChargeStyle.infoStatus, ChargeStyle.statusUnavailable]}>Unavailable</Text>
                      }
                      <Text style={ChargeStyle.infoTitle}>Status</Text>
                    </View>
                  </View>
                );
              })
            : <Text style={ui.noData}>No Rates</Text>
          }
          { this.state.isPrivate &&
            <View style={styles.privateView}> 
              <Text style={styles.privateText}>NOTE: The charging stations are for private usage.</Text>
            </View>
          }
        </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>
      </View>
    );
  }
  //初始页面-扫码认证之前-end

  //扫码认证之后-充电开始之前
  StepStartView() {
    return (
      <>
        <View style={{minHeight: $vht(80)}}>
          <DashboardView isCharging={this.state.isCharging}/>
          <Text style={styles.title}>Selected Charger</Text>
          {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> */}
          <Text style={styles.title}>Select Payment Method</Text>
          <PaymentList
            payType={this.state.currentPayment}
            payPerUse={this.state.curerntPerUser}
            onMethodChange={(type) => this.onPaymentMethodChanged(type)}
          />
          {/* <Payment 
            refreshId={this.state.refreshId}
            payType={this.state.currentPaytype}
            balance={this.state.curerntPerUser}
            isPayPerUse={this.state.currentPayment == PAYTYPE.PAY_PER_USE}
            onMethodChange={() => this.onMethodChange()}
          /> */}
        </View>
        <Button
          style={styles.buttonView}
          text='START CHARGING'
          elevation={1.5}
          onClick={() => this.startCharge()}/>
      </>
    );
  }
  //扫码认证之后-充电开始之前-end

  //正在充电页面
  StepChargeView() {
    return (
      <>
        <View style={{minHeight: $vht(80)}}>
          <DashboardView isCharging={this.state.isCharging} connectorInfo={this.state.connectorInfo}/>
          <Text style={styles.title}>Selected Charger</Text>
          {this.StationInfo()}

          {/* <BatteryView
            soc={this.state.connectorInfo.batteryPercent}
            isCharging={this.state.isCharging}
            isPending={this.state.isPending}
          /> */}
          
          <Text style={styles.title}>Select Payment Method</Text>
          <PaymentList
            isSelect={false}
            payType={this.state.currentPayment}
            payPerUse={this.state.curerntPerUser}
            onMethodChange={(type) => this.onPaymentMethodChanged(type)}
          />
          {/* <Payment 
            refreshId={this.state.refreshId}
            payType={this.state.currentPaytype}
            balance={this.state.curerntPerUser}
          /> */}
          { this.state.lastUpdated
            ? <Text style={styles.updateTip}>{'Last updated at ' + this.state.lastUpdated + '\nPull down to refresh'}</Text>
            : null
          }
        </View>
        <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);
  }

  getConnectorInfo() {
    console.log("getConnectorInfo", this.state.stationInfo.id);
    apiCharge.checkIsCharging({sitePk: this.state.stationInfo.id}).then(res => {
      this.setState({
        connectorInfo: res.data
      }, () => {
        this.checkChargeStatus();
      });
    }).catch(err => {
      
    });
  }

  //获取充电数据（百分比）
  checkIsCharge(showError) {
    const params = {
      sitePk: this.state.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);
      }
      PagerUtil.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) {
      this.checkIsCharge();
      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={styles.container}>
        { 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({
  container: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16
  },
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 16
  },
  gstText: {
    color: '#EF3340',
    fontSize: 16,
    paddingTop: 16,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  listView: {
    padding: 8,
  },
  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',
    paddingTop: 32,
    paddingBottom: 16
  },
  privateView: {
    height: $vht(25),
    alignItems: 'center',
    justifyContent: 'center'
  },
  privateText: {
    color: '#FA5759'
  }
})