ChargEco/Strides-SPAPP/app/pages/chargingV3/ChargingPage.js

/**
 * 新充电流程：充电主页
 * @邠心vbe on 2023/06/20
 */
import React, { Component } from 'react';
import { View } from 'react-native';
import app from '../../../app.json';
import apiCharge from '../../api/apiCharge';
import apiWallet from '../../api/apiWallet';
import Dialog from '../../components/Dialog';
import { ErrorDialog, LowCreditDialog } from '../chargeV2/InfoDialog';
import { PaymentDefault, PAYTYPE, toTopupPage } from '../payment/PaymentConfig';
import { PageList } from '../Router';
import StepAuth from './StepAuth';
import StepCharging from './StepCharging';
import StepStart from './StepStart';
import StepStop from './StepStop';
import PagerUtil from '../chargeV2/PagerUtil';
import DialogPayPerUse from '../chargingV2/DialogPayPerUse';
import utils from '../../utils/utils';

export default class ChargingPageV4 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isStoping: false,
      isCharging: false,
      isAuthentic: false,
      chargingPk: "",
      stationInfo: {},
      connectorInfo: {},
      errorCode: 'A9',
      errorMessage: '',
      lastUpdated: '',
      lowMessage: "",
      showLowDialog: false,
      showErrorDialog: false,
      showStationDialog: false,
      currentPerUse: "",
      currentPayment: PaymentDefault.DEFAULT.payType,
      currentPaytype: PaymentDefault.DEFAULT.payName,
      selectedVoucher: {},
      showDialogPayPerUse: false
    };
    this.isPageShow = true;
    this.waitStartCharging = false;
  }

  componentDidMount() {
    this.init();
    this.isPageShow = true;
    //console.log("参数", this.props.route.params);
    if (this.props.route.params.connectorId && this.props.route.params.chargeBoxId) {
      this.setState({
        stationInfo: this.props.route.params
      }, () => {
        //测试进入
        //this.testInit();
        //正常进入
        this.getConnectorInfo();
      })
    }
    this.props.navigation.addListener('focus', () => {
      //console.log("充电流程页面获取焦点" + this.isPageShow, this.state.currentPerUse);
      if (!this.isPageShow && this.state.currentPerUse == "Pending") {
        this.isPageShow = true;
        //console.log("继续充电流程");
        this.setState({
          currentPerUse: "Paid"
        })
        this.refreshChargeData();
      } else {
        this.isPageShow = true;
        //this.canShowLoginDialog();
      }
      if (PagerUtil.isSelectVoucher) {
        this.setState({
          selectedVoucher: PagerUtil.getSelectedVoucher()
        })
      }
    });
    this.props.navigation.addListener('blur', () => {
      this.isPageShow = false;
      //console.log("充电流程页面失去焦点");
    });
  }

  componentWillUnmount() {
    this.isPageShow = false;
  }

  testInit() {
    this.setState({
      isCharging: true,
      connectorInfo: {
        status: "Initiating"
      }
    }, () => {
      setTimeout(() => {
        this.getConnectorInfo();
      }, 2000);
    })
  }

  init() {
    this.setState({
      isStoping: false,
      isCharging: false,
      isAuthentic: false
    });
    this.waitAuthentic = false;
    this.waitStartCharging = false;
  }

  getConnectorInfo() {
    if (!this.isPageShow) return;
    //this.init();
    const params = {
      sitePk: this.state.stationInfo.id,
      chargeBoxId: this.state.stationInfo.chargeBoxId,
      connectorId: this.state.stationInfo.connectorId,
      paymentOption: this.state.currentPayment,
    }
    if (app.charge.paymentMethod && this.state.currentPayment?.code) {
      params.paymentMethod = this.state.currentPayment?.code
    }
    console.log("[ChargingPageV3]getConnectorInfo", params);
    apiCharge.getConnectorDetail(params).then(res => {
      if (res.data.status && !this.state.isStoping) {
        const state = {
          isStoping: false,
          isCharging: false,
          isAuthentic: false,
          connectorInfo: {}
        }
        state.connectorInfo = res.data;
        if (app.charge.paymentMethod && res.data.currentPaymentMethod) {
          //V3版获取当前支付方式
          state.currentPayment = {
            code: res.data.currentPaymentMethod
          }
        } else if (res.data.currentPaymentType && res.data.currentPaymentType == PAYTYPE.PAY_PER_USE) {
          //V2版获取当前支付方式
          state.currentPayment = PAYTYPE.PAY_PER_USE
        }
        if (res.data.vouchers && res.data.vouchers.length) {
          //获取已选择的优惠券
          state.selectedVoucher = res.data.vouchers[0];
        }
        console.log("状态", res.data.status);
        switch (res.data.status) {
          case 'Available': //可用的
            if (this.waitAuthentic) {
              state.isAuthentic = true;
              this.refreshChargeData(3000);
            } else {
              state.isAuthentic = false;
            }
            break;
          case 'Preparing': //已插入
            this.waitAuthentic = false;
            if (this.waitStartCharging) {
              state.isCharging = true;
              if (res.data.payPerUsePaymentStatus) {
                //等待PayPerUse支付-初始化充电
                if (res.data.payPerUsePaymentStatus == "PENDING" || res.data.payPerUsePaymentStatus == "PAID") {
                  this.refreshChargeData(3000);
                } else {
                  this.showErrorDialog('A4', $t('charging.errPayperusePayment') + res.data.payPerUsePaymentStatus);
                  state.isCharging = false;
                  state.isAuthentic = true;
                }
              } else {
                //普通充电-初始化充电
                this.refreshChargeData(3000);
              }
            } else {
              state.isAuthentic = true;
              //this.checkIsCharge();
            }
            break;
          case 'Charging': //正在充电
            state.isCharging = true;
            this.waitStartCharging = false;
            this.refreshChargeData(10000);
            break;
          case 'Initiating': //充电确认中
            state.isCharging = true;
            if (res.data.payPerUsePaymentStatus) {
              //等待PayPerUse支付-初始化充电
              if (res.data.payPerUsePaymentStatus == "PENDING" || res.data.payPerUsePaymentStatus == "PAID") {
                this.refreshChargeData();
              } else {
                this.showErrorDialog('A4', $t('charging.errPayperusePayment') + res.data.payPerUsePaymentStatus);
                state.isCharging = false;
                state.isAuthentic = false;
              }
            } else {
              //普通充电-初始化充电
              this.refreshChargeData();
            }
            break;
          case 'SuspendedEVSE':
            this.showErrorDialog('A5', $t('charging.errUnable2Charge'));
            break;
          case 'SuspendedEV': //已连接上但未充电
            state.isAuthentic = true;
            //this.refreshChargeData();
            break;
          case 'Reserved': //预定中
            this.showErrorDialog('A5', $t('charging.errUnable2Reserved'));
            break;
          case 'Finishing': //已完成
            if (res.data.chargingPk) {
              Dialog.showProgressDialog();
              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
                });
              }, 2000);
            } else {
              goBack();
            }
            break;
          default:
            this.showErrorDialog('A4', $t('charging.errNotChargeE0'));
            break;
        }
        this.setState(state)
      }
    }).catch(err => {
      Dialog.showResultDialog("An error occurred:\n" + err, "Retry", () => {
        this.getConnectorInfo();
      })
      //toastShort(err)
    })
  }

  refreshChargeData(time=2000) {
    if (this.isPageShow) {
      //console.log("[刷新获取充电信息]", time);
      setTimeout(() => {
        this.getConnectorInfo();
      }, time);
    }
  }

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

  onAuthenticate() {
    this.waitAuthentic = true;
    this.setState({
      isAuthentic: true
    }, () => {
      this.refreshChargeData()
    })
  }

  onStartCharge() {
    if (app.charge.paymentMethod) { //V3版本开始充电
      if (utils.isNotEmpty(this.state.stationInfo.payPerUseAmount) && this.state.currentPayment?.code.indexOf(PAYTYPE.PAY_PER_USE_CONTAIN) >= 0) {
        this.setState({
          showDialogPayPerUse: true
        });
      } else {
        this.onStartChargeV3();
      }
      return;
    }
    if (this.state.currentPayment == PAYTYPE.PAY_PER_USE) { //V2版本PayPerUse
      if (utils.isNotEmpty(this.state.stationInfo.payPerUseAmount)) {
        this.setState({
          showDialogPayPerUse: true
        });
      } else {
        this.onStartChargePerUse();
      }
      return;
    }
    this.setState({
      isCharging: true
    });
    this.waitStartCharging = true;
    apiCharge.startCharge(this.state.stationInfo).then(res => {
      console.log("[开始充电-onStartCharge]", res);
      setTimeout(() => {
        this.canAutoRefresh = true;
        this.refreshChargeData(500);
        //Dialog.dismissLoading();
        if (res.msg) {
          //Dialog.showResultDialog(res.msg)
          toastShort(res.msg)
        }
        //this.autoCheckIsCharge();
      }, 3000);
    }).catch(({err, code, data}) => {
      //toastShort(err);
      console.log("[开始充电错误]", err, code);
      //Dialog.dismissLoading();
      if (code == 5200) {
        this.showErrorDialog('none', "(" + data.transactionPk + ') ' + err);
      } else {
        this.showErrorDialog('A4', err);
      }
      this.setState({
        isCharging: false
      });
    });
  }

  backDialogPayPerUse(confirm) {
    this.setState({
      showDialogPayPerUse: false
    });
    if (confirm) {
      if (app.charge.paymentMethod) { //V3版本开始充电
        this.onStartChargeV3();
        return;
      }
      if (this.state.currentPayment == PAYTYPE.PAY_PER_USE) { //V2版本PayPerUse
        this.onStartChargePerUse();
        return;
      }
    }
  }

  onStartChargePerUse() {
    this.setState({
      isCharging: true
    });
    this.waitStartCharging = true;
    const params = {
      paymentOption: this.state.currentPayment,
      ...this.state.stationInfo
    }
    apiWallet.doPaymentV2(params).then(res => {
      if (res.data.webPaymentUrl) {
        this.setState({
          currentPerUse: "Pending"
        })
        startPage(PageList.paymentWeb, { amount: params.payAmount, url: res.data.webPaymentUrl, type: 'PayPerUse' });
      } else {
        toastShort('Error 0')
      }
    }).catch(({err}) => {
      this.showErrorDialog('A9', err);
      this.setState({
        isCharging: false
      });
    });
  }

  onStartChargeV3() {
    this.setState({
      isCharging: true
    });
    this.waitStartCharging = true;
    const params = {
      sitePk: this.state.stationInfo.id,
      chargeBoxId: this.state.stationInfo.chargeBoxId,
      connectorId: this.state.stationInfo.connectorId
    }
    if (this.state.currentPayment?.code) {
      params.paymentMethod = this.state.currentPayment?.code
    }
    if (app.v3.vouchers && this.state.selectedVoucher?.userVoucherId) {
      params.userVoucherIds = [this.state.selectedVoucher.userVoucherId]
    }
    console.log("[开始充电V3-params]", params);
    apiCharge.startChargeV3(params).then(res => {
      console.log("[开始充电V3-response]", res);
      if (res.data.webPaymentUrl) {
        this.setState({
          currentPerUse: "Pending"
        })
        startPage(PageList.paymentWeb, { amount: params.sitePk, url: res.data.webPaymentUrl, type: 'PayPerUse' });
      } else {
        setTimeout(() => {
          this.canAutoRefresh = true;
          this.refreshChargeData(500);
          if (res.msg) {
            toastShort(res.msg)
          }
        }, 3000);
      }
    }).catch(({err, code, data}) => {
      //toastShort(err);
      console.log("[开始充电V3-错误]", err, code);
      //Dialog.dismissLoading();
      if (code == 5175) {
        this.setState({
          lowMessage: err,
          showLowDialog: true
        });
      } else if (code == 5200) {
        this.showErrorDialog('none', "(" + data.transactionPk + ') ' + err);
      } else {
        this.showErrorDialog('A4', err);
      }
      this.setState({
        isCharging: false
      });
    });
  }

  onStopCharge() {
    Dialog.showDialog({
      title: $t('charging.titleStopCharging'),
      message: $t('charging.confirmStopCharging'),
      ok: $t('nav.confirm'),
      callback: ok => {
        if (ok == Dialog.BUTTON_OK) {
          this.stopCharge();
        }
      }
    });
  }

  stopCharge() {
    this.setState({
      isStoping: true
    })
    //Dialog.showProgressDialog();
    apiCharge.stopCharge().then(res => {
      if (res.data.chargingPk) {
        setTimeout(() => {
          //Dialog.dismissLoading();
          if (res.msg) {
            toastShort(res.msg)
          }
          this.setState({
            chargingPk: res.data.chargingPk,
            selectedVoucher: {}
            //isCharging: false,
            //isAuthentic: false
          });
          PagerUtil.setSelectedVoucher({});
          /*this.init();
          startPage(PageList.summary, { 
            chargingPk: res.data.chargingPk,
            id: this.state.stationInfo.id,
            name: this.state.stationInfo.name,
            address: this.state.stationInfo.address
          });*/
        }, 3000);
      } else {
        if (res.msg) {
          toastShort(res.msg)
        } else {
          toastShort($t('charging.errDetected'));
        }
        this.refreshChargeData(500);
      }
    }).catch((err) => {
      //Dialog.dismissLoading();
      toastShort(err);
      this.setState({
        isStart: false,
        isPending: false,
        isCharging: false,
        isStoping: false
      });
      //模拟进入结算页
      /*startPage(PageList.summary, {
        chargingPk: 1,
        id: this.state.stationInfo.id,
        name: this.state.stationInfo.name,
        address: this.state.stationInfo.address
      });*/
    });
  }

  showErrorDialog(code, msg) {
    this.setState({
      errorCode: code,
      showErrorDialog: true,
      errorMessage: ''+msg
    });
  }

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

  closeLowDialog(back) {
    this.setState({
      showLowDialog: false,
    })
    if (back) {
      toTopupPage();
    }
  }

  render() {
    return (
      <View style={ui.flex1}>
        { this.state.isStoping
        ? <StepStop
            chargingPk={this.state.chargingPk}
            stationInfo={this.state.stationInfo}
          />
        : ( this.state.isCharging 
          ? <StepCharging
              connectorInfo={this.state.connectorInfo}
              currentPayment={this.state.currentPayment}
              onStopCharge={() => this.onStopCharge()}
              selectedVoucher={this.state.selectedVoucher}
            />
          : ( this.state.isAuthentic
            ? <StepAuth
                status={this.state.connectorInfo?.status}
                connectorInfo={this.state.connectorInfo}
                currentPayment={this.state.currentPayment}
                onStartCharge={() => this.onStartCharge()}
                selectedVoucher={this.state.selectedVoucher}
                onPaymentMethodChanged={(type) => this.onPaymentMethodChanged(type)}
              />
            : <StepStart
                connectorInfo={this.state.connectorInfo}
                currentPayment={this.state.currentPayment}
                onAuthenticate={() => this.onAuthenticate()}
                onPaymentMethodChanged={(type) => this.onPaymentMethodChanged(type)}
              />
            )
          )
        }
        <ErrorDialog
          visible={this.state.showErrorDialog}
          code={this.state.errorCode}
          message={this.state.errorMessage}
          onClose={() => {
            this.closeError();
          }}/>
        <LowCreditDialog
          visible={this.state.showLowDialog}
          message={this.state.lowMessage}
          onClose={res => this.closeLowDialog(res)}/>
        <DialogPayPerUse
          visible={this.state.showDialogPayPerUse}
          amount={this.state.stationInfo.payPerUseAmount}
          onClose={confirm => this.backDialogPayPerUse(confirm)}/>
      </View>
    );
  }
}