import "./AppPay.scss";
import Taro, { Component, useState, useCallback } from "@tarojs/taro";
import { View, Button, Navigator } from "@tarojs/components";
import { rechargeFromAppOrder } from "@/api/account";
import AES from "crypto-js/aes";
import Utf8 from "crypto-js/enc-utf8";
import ECBmode from "crypto-js/mode-ecb";
import PaddingPkcs7 from "crypto-js/pad-pkcs7";
import AppBackButton from "../../components/AppBackButton/AppBackButton";

type PageStateProps = {};
type PageDispatchProps = {};

type PageOwnProps = {};
type PageState = {
  errorMsg: string;
  showBack: boolean;
  showError: boolean;
};

type IProps = PageStateProps & PageOwnProps & PageDispatchProps;
interface AppPay {
  props: IProps;
  state: PageState;
}

class AppPay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showBack: false,
      showError: false,
      errorMsg: ""
    };
  }

  componentWillMount() {
    console.log("AppPayPathParams: ", this.$router.params);
    const pathParams = this.$router.params;
    const { clientIp, id, isFirstRecharge, customerId, token } = pathParams;
    let entity = {
      token,
      clientIp,
      id: Number(id),
      isFirstRecharge: Number(isFirstRecharge),
      customerId: Number(customerId),
      rechargeType: "10"
    };
    // wx.showModal({
    //   content: JSON.stringify(entity)
    // });
    rechargeFromAppOrder(entity)
      .then(res => {
        const { payStr } = res;
        console.log(res);
        if (payStr) {
          const payData = JSON.parse(payStr);
          console.log(payData);
          Taro.requestPayment({
            timeStamp: payData.timeStamp.toString(),
            nonceStr: payData.nonceStr,
            package: payData.package,
            signType: payData.signType,
            paySign: payData.paySign
          })
            .then(res => {
              console.log(res);
              Taro.showToast({
                title: "支付成功！",
                icon: "success",
                mask: true
              });
              this.setState({
                showBack: true,
                errorMsg: JSON.stringify({ code: 1, msg: res.errMsg })
              });
            })
            .catch(err => {
              Taro.showToast({
                title: err.msg || "发起支付失败",
                icon: "none"
              });
              this.setState({
                showError: true,
                errorMsg: JSON.stringify({ code: 0, msg: err.errMsg })
              });
            });
        }
      })
      .catch(err => {
        Taro.showToast({
          title: err.msg || "呼起失败！",
          icon: "none"
        });
        this.setState({
          showError: true,
          errorMsg: JSON.stringify({ code: 0, msg: err.msg })
        });
      });
  }

  goBackAppError() {
    Taro.showModal({
      title: "提示",
      content: "呼起APP失败,请手动回到APP"
    });
  }

  render() {
    const { showBack, showError, errorMsg } = this.state;

    return (
      <View className="AppPay">
        {showBack && (
          <View className="AppPay-info">
            支付成功
            <Navigator
              className="AppBackButton"
              target="miniProgram"
              open-type="exit"
            >
              <Button
                className="AppBackButton"
                open-type="launchApp"
                app-parameter={errorMsg}
                onError={this.goBackAppError}
              >
                返回
              </Button>
            </Navigator>
          </View>
        )}
        {showError && (
          <View className="AppPay-info">
            支付失败
            <Navigator
              className="AppBackButton"
              target="miniProgram"
              open-type="exit"
            >
              <Button
                open-type="launchApp"
                app-parameter={errorMsg}
                onError={this.goBackAppError}
              >
                返回
              </Button>
            </Navigator>
          </View>
        )}
      </View>
    );
  }
}
export default AppPay;
