<template>
  <div class="center">
    <div class="header_info">
      <p>
        订单编号: <span>{{ sn }}</span>
      </p>
      <p>
        付款金额:<span> ¥</span><span>{{ price }}</span>
      </p>
    </div>
    <div class="btn">
      <el-button
        type="primary"
        style="width: 100%; font-size: 18px"
        @click="goPay"
      >
        确认支付
      </el-button>
    </div>
    <!-- 隐藏的 iframe 用于触发微信支付 -->
    <iframe ref="weChatPayFrame" style="display: none"></iframe>
  </div>
</template>

<script>
import * as API_Setting from "@/api/setting";
export default {
  data() {
    return {
      scanSource: "未知扫码来源",
      sn: "",
      price: "",
      payUrl: "",
    };
  },
  methods: {
    goWx() {
      window.location.href = this.wxUrl;
    },
    goPay() {
      API_Setting.getPayUrl({
        order_id: this.$route.query.id,
        pay_type: this.scanSource,
        openid:this.$route.query.openid
      }).then((res) => {
        if (this.scanSource == "wx") {
          /*  alert(res);
          this.invokeWeChatPays(res); */
          this.invokeWeChatPay(res);
        } else {
          window.open(res);
        }
        /* document.write(res) */
        /*   const form = document.querySelector('form[name="punchout_form"]');
                  if (form) { openid:this.$route.query.openid
                      form.submit();
                  } */
      });
    },
    invokeWeChatPays(params) {
      const wxPayUrl = params;
      this.$refs.wxPayFrame.src = wxPayUrl;
    },
    invokeWeChatPay(params) {
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            () => this.onBridgeReady(params),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", () =>
            this.onBridgeReady(params)
          );
          document.attachEvent("onWeixinJSBridgeReady", () =>
            this.onBridgeReady(params)
          );
        }
      } else {
        this.onBridgeReady(params);
      }
    },
    onBridgeReady(params) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: params.appId, // 公众号名称，由商户传入
          timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数
          nonceStr: params.nonceStr, // 随机串
          package: params.package,
          signType: params.signType, // 微信签名方式：
          paySign: params.paySign, // 微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            alert("支付成功");
          } else {
            alert("支付失败");
          }
        }
      );
    },
    detectScanSource() {
      this.price = this.$route.query.price;
      this.sn = this.$route.query.sn;
      let ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.scanSource = "wx";
        if (this.$route.query.openid == undefined) {
          API_Setting.getOpenIdCode(this.$route.query.id, {
            ip: "https://erp.raycos.net/",
          }).then((res) => {
            alert(res);
            const currentUrl = window.location.href;
            window.location.href = `${res}&redirect_uri=${encodeURIComponent(
              currentUrl
            )}`;
          });
        }
      } else if (ua.match(/AlipayClient/i) == "alipayclient") {
        this.scanSource = "ali";
      } else {
        this.scanSource = "unknown";
      }
    },
  },
  mounted() {
    this.detectScanSource();
  },
};
</script>

<style scoped>
.center {
  width: 100%;
  padding: 15px;
}

.header_info {
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  background-color: #fff;
}

p {
  padding-top: 5px;
  padding-bottom: 5px;
}

.btn {
  width: 100%;
  margin-top: 80px;
}
</style>