{% extends 'shop/base.html' %}

{% load static shoptags %}

{% block title %}支付成功{% endblock %}

{% block breadcrumb %}
<div class="container">
	<nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
		<ul>
			<li><a href="{% url 'shop:home' %}">首页</a></li>
			<li class="is-active"><a href="#" aria-current="page">支付成功</a></li>
		</ul>
	</nav>
</div>
{% endblock %}

{% block section %}
<div class="container">
    <div class="box is-radiusless is-marginless pl-6 pr-6" style="line-height: 30px;">
        <div class="is-flex is-flex-direction-column is-align-items-center mb-4">
            <figure class="image is-128x128">
                <img src="{% static 'img/payok.svg' %}">
            </figure>
            <h1 class=" is-size-3 ">支付成功</h1> 
        </div>
        <div class=" dropdown-divider"></div>
        <p>订单编号：{{ order.order_sn }}</p> 
        <p>实际支付：{{ order.total_price }}元</p>
        <p>收货信息：{{ order.address }}</p>
        <!-- <p>支付状态：{{ order.get_status_display }}</p> -->
        <!-- <p>支付方式：{{ order.get_paymethod_display }}</p> -->
        <!-- <p>支付时间：{{ order.pay_time }}</p> -->
        <div class=" dropdown-divider"></div>
        {% for sku in order.baykeshopordersku_set.all %}
        <div class="columns">
            <div class="column is-2 is-flex is-justify-content-center">
                <figure class="image is-128x128">
                    <img src="{{ sku.sku_json.img }}" alt="{{ sku.sku_json.title }}">
                </figure>
            </div>
            <div class="column is-flex is-flex-direction-column is-justify-content-center">
                <h1 class=" has-text-weight-bold">{{ sku.sku_json.title }}</h1>
                <div class="has-text-grey-light">
                    {% for op, value in sku.sku_json.specs.items %}
                    <span class="mr-3">{{ op }}:{{ value }}</span>
                    {% endfor %}
                </div>
            </div>
            <div class="column is-2 is-flex is-justify-content-center is-align-items-center">
                {{ sku.sku_json.price }} x {{ sku.count }}
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="box is-radiusless">
        <div class=" buttons is-justify-content-center">
        <a class=" button is-success" href="{% url 'shop:orders-detail' order.id %}">查看订单</a>
        <a class=" button is-black" href="{% url 'shop:home' %}">返回首页</a>
        </div>
    </div>
</div>
{% endblock %}