<template>
  <div class="order-error-wrap">
    <van-nav-bar
      title="支付结果"
      left-text=""
      left-arrow
      @click-left="handleAppButton"
      v-if="!isInHooliApp"
    ></van-nav-bar>
    <div class="wrap">
      <div class="done">
        <img src="../../assets/imgs/login.png" alt="">
        <h5>支付失败！</h5>
        <p>请尝试重新支付或咨询顾问</p>
        <div class="btn">
          <van-button type="default" @click="handleAppButton">重新支付</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderError",
  data() {
    return {
      env: "",
      isFinish: false,
      isInHooliApp: false
    };
  },
  created: function() {
    if (this.$util.checkIsHooliAndroid() || this.$util.checkIsHooliIos())
      this.isInHooliApp = true;
    if (this.$util.checkIsHooliAndroid()) {
      this.env = "android";
    } else if (this.$util.checkIsHooliIos()) {
      this.env = "ios";
    }
  },
  methods: {
    // 回传 APP / 返回
    handleAppButton() {
      if (this.isInHooliApp) {
        window.AppCallback = {};
        window.nativeToJavaScript = result => {
          try {
            if (result) {
              result = JSON.parse(decodeURIComponent(result));
              let { type, data } = result;
              type = parseInt(type);
              window.AppCallback[type] = data;
              switch (type) {
                case 8:
                  this.isFinish = true;
                  break;
                default:
                  break;
              }
            }
          } catch (e) {
            alert(JSON.stringify(e));
          }
        };
        let params = {
          type: 8,
          data: {
            pay_status: false,
            is_finish: this.isFinish
          }
        };
        params = encodeURIComponent(JSON.stringify(params));
        if (this.env === "android") {
          window.Android.javaScriptToNative(params);
        } else if (this.env === "ios") {
          window.webkit.messageHandlers.javaScriptToNative.postMessage(params);
        }
      } else {
        let lang = this.$store.state.langStr;
        this.$router.push({
          path: `/${lang}/cashier`
        });
      }
    }
  }
};
</script>

<style scoped lang='less'>
.order-error-wrap {
  background: #fff;
  min-height: 100vh;
  .wrap {
    padding: 15px 20px 0;
    .done {
      text-align: center;
      padding: 90px 0 0;
      img {
        width: 75px;
        height: 75px;
      }
      h5 {
        font-size: 18px;
        color: #333;
        line-height: 30px;
        margin: 20px 0 0;
        font-weight: 400;
      }
      p {
        font-size: 13px;
        color: #999;
        line-height: 30px;
        margin: 0 0 30px;
        font-weight: 400;
      }
      .btn {
        button {
          width: 200px;
          height: 45px;
          font-size: 18px;
          background: #fff;
          border-radius: 23px;
          color: #ff523d;
          font-weight: 400;
          border-color: #ff523d;
        }
      }
    }
  }
}
</style>
