{% extends "base.html" %}
{% block title %}支付处理中 - 企微工程师{% endblock %}

{% block extra_head %}
<style>
body { background: #f5f5f5; }
.jsapi-page { max-width: 420px; margin: 0 auto; padding: 80px 16px; }
.jsapi-card {
    background: #fff;
    border-radius: 20px;
    padding: 50px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.spinner {
    width: 48px; height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #07c160;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.jsapi-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.jsapi-desc { color: #666; font-size: 14px; }
.pay-fail { display: none; margin-top: 20px; }
.pay-fail .fail-icon { font-size: 48px; color: #e53935; margin-bottom: 12px; }
.error-msg { color: #e53935; font-size: 14px; margin: 8px 0; }
.retry-btn {
    display: inline-block;
    padding: 10px 24px;
    border: none;
    border-radius: 12px;
    background: #07c160;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
}
</style>
{% endblock %}

{% block content %}
<div class="jsapi-page">
    <div class="jsapi-card">
        <div class="spinner"></div>
        <div class="jsapi-title">正在调起微信支付...</div>
        <div class="jsapi-desc">请在微信支付弹窗中完成付款</div>

        <div class="pay-fail" id="payFail">
            <div class="fail-icon"><i class="bi bi-x-circle-fill"></i></div>
            <div class="jsapi-title">支付未完成</div>
            <div class="error-msg" id="errorMsg">支付被取消</div>
            <a href="/wecom/order/{{ order_no }}" class="retry-btn">查看订单状态</a>
        </div>
    </div>
</div>

<script>
// JSAPI 支付参数
var jsParams = {{ js_params | tojson }};
var orderNo = '{{ order_no }}';

function onBridgeReady() {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        appId: jsParams.appId,
        timeStamp: jsParams.timeStamp,
        nonceStr: jsParams.nonceStr,
        package: jsParams.package,
        signType: jsParams.signType,
        paySign: jsParams.paySign
    }, function(res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // 支付成功，跳转订单页
            window.location.href = '/wecom/order/' + orderNo;
        } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            document.getElementById('payFail').style.display = 'block';
            document.querySelector('.spinner').style.display = 'none';
            document.querySelector('.jsapi-title').textContent = '支付已取消';
            document.querySelector('.jsapi-desc').textContent = '您已取消支付，如有需要请重新下单';
        } else {
            document.getElementById('payFail').style.display = 'block';
            document.getElementById('errorMsg').textContent = res.err_msg || '支付失败，请重试';
            document.querySelector('.spinner').style.display = 'none';
            document.querySelector('.jsapi-title').textContent = '支付失败';
        }
    });
}

if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}
</script>
{% endblock %}
{% block extra_scripts %}{% endblock %}