{% extends "base.html" %}
{% block title %}扫码支付 - 企微工程师{% endblock %}

{% block extra_head %}
<style>
body { background: #f5f5f5; }
.qr-page { max-width: 480px; margin: 0 auto; padding: 40px 16px; }
.qr-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.qr-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.qr-desc { color: #666; font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
.qr-img-wrap {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
    margin-bottom: 16px;
}
.qr-img-wrap img { width: 230px; height: 230px; display: block; }
.qr-tip {
    background: #fff8e1;
    border-radius: 12px;
    padding: 14px;
    font-size: 13px;
    color: #e65100;
    text-align: left;
    margin-bottom: 20px;
}
.qr-tip .bi { margin-right: 6px; }
.qr-tip li { margin-bottom: 4px; }

.price-line {
    font-size: 14px;
    color: #999;
    margin-bottom: 4px;
}
.price-line strong { font-size: 24px; color: #e53935; }

.status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    margin-top: 16px;
    font-size: 14px;
}
.status-bar.waiting { background: #fff3e0; color: #e65100; }
.status-bar.completed { background: #e8f5e9; color: #2e7d32; }
.spinner {
    width: 20px; height: 20px;
    border: 2px solid #ffe0b2;
    border-top-color: #e65100;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.back-link {
    display: block;
    margin-top: 16px;
    color: #999;
    font-size: 14px;
    text-decoration: none;
}
.back-link:hover { color: #666; }
</style>
<meta http-equiv="refresh" content="5">
{% endblock %}

{% block content %}
<div class="qr-page">
    <div class="qr-card">
        <div class="qr-title">微信扫码支付</div>
        <div class="qr-desc">请使用微信扫一扫完成支付</div>

        <div class="price-line">
            需支付：<strong>¥{{ '%.2f'|format(order.total_fee / 100)|replace('.00', '') }}</strong>
            <span class="text-muted" style="font-size:13px;">（{{ products[order.product_type].name if order.product_type in products else order.product_type }}）</span>
        </div>

        <div class="qr-img-wrap">
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=250x250&data={{ code_url | urlencode }}"
                 alt="支付二维码"
                 onerror="this.parentNode.innerHTML='<div style=\\\'padding:80px 0;color:#999;\\\'><i class=\\\'bi bi-qr-code\\\' style=\\\'font-size:48px;display:block;margin-bottom:10px;\\\'></i>二维码加载失败<br>订单号: {{ order.out_trade_no }}</div>'">
        </div>

        <div class="qr-tip">
            <ul class="mb-0" style="list-style:none;padding:0;">
                <li><i class="bi bi-phone"></i> 打开手机微信「扫一扫」</li>
                <li><i class="bi bi-qr-code"></i> 扫描屏幕上的二维码</li>
                <li><i class="bi bi-check-circle"></i> 支付完成后本页自动跳转</li>
            </ul>
        </div>

        {% if order.status == 'paid' %}
        <div class="status-bar completed">
            <i class="bi bi-check-circle-fill"></i> 支付成功！正在跳转...
        </div>
        <script>setTimeout(function(){ window.location.href='/wecom/order/{{ order.out_trade_no }}'; }, 1500);</script>
        {% else %}
        <div class="status-bar waiting">
            <div class="spinner"></div>
            等待扫码支付...
        </div>
        {% endif %}

        <a href="javascript:void(0)" class="back-link" onclick="location.reload()">
            <i class="bi bi-arrow-clockwise"></i> 刷新二维码状态
        </a>
    </div>
</div>
{% endblock %}
{% block extra_scripts %}{% endblock %}