{% extends "../main.html" %}
{% block title %}交易信息{% end %}
{% block  css %}
<style>
    .search{margin-bottom:10px;}
.search input {
    font-size:12px;
    border-radius: 0;
}
#order-table thead tr, #table-roles thead tr , #table-permission thead tr{background:whitesmoke;}
#order-table tbody tr, #table-permission tbody tr{
    border-bottom:1px solid #f9f9f9;
}
#order-table tbody tr td, .pagination-detail, .pagination, #add-role-modal-right, .modal-footer>button,
.select2-container, #permission-modal-right, #table-permission tbody tr td{
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
}
.select2-container{
    display: block;
    width: 100% !important;
}
.select-roles-card-body, .select-permission-card-body{
    border: 1px solid #ececec;
    height: 364px;
    overflow-y:auto;
    padding:.7rem 1.25rem .5rem 1.25rem;
}
.opertions{margin-right:10px;}
.alert-info{
    color: #555;
    background-color: #eaeaea;
    border-color: #eaeaea;
    border-radius: 0;
    font-size:12px;
    -webkit-font-smoothing: antialiased;
}
.alert-info b{
    font-weight:700;
    font-size:14px;
}
.alert-info .user-message{
    margin-bottom:10px;
}
.alert-info .user-notic{
    margin-top:10px;
}
.page-title{width:100%;}
.headers{padding-bottom:0;}
.contents{padding-top:0;}
#add_user, #batch_del_site{
    margin-right:10px;
    font-size:12px;
    border-radius: 0;
    font-weight:400;
}
#per-toolbar input , #per-toolbar span{
    border-radius: 0;
    font-size: 12px !important;
}
.notie-background-success{
    background-color:#57BF57;
}
.notie-background-error{
    background-color:#E1715B;
}
.notie-background-warning{
    background-color:#D6A14D;
}
#add-roles-body{width:870px;}
.muted{color:#b30202;}
.modal-header{border-bottom: 1px solid #f3f3f3;}
.modal-footer{border-top: 1px solid #f3f3f3;justify-content:left;}
.modal-footer button {
    border-radius: 0;
    float:left;
}
#table-roles tbody tr td {
    padding:0.6rem;
}
#add-role-modal-right .search, #permission-modal-right .search {
    width:100%;
}
#table-roles thead tr th{
    border:1px solid rgba(160, 175, 185, 0.15);
}
.select-roles .closes{float:right;}
.select-roles{padding:5px 5px 1px 10px; border-radius: 10px; border:1px solid #a7a7a7;cursor:pointer;}
.select-roles:hover{background:white;color:black;}
.cur-select-roles{
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#add-roles-body .pagination-detail, #add-permission-body .pagination-detail {display:none;}
#add-permission-body{width:1024px;overflow: hidden;}
#add-permission-body .bootstrap-table{
    overflow-y: auto;
    height: 471px;
}
.select-users{padding:5px 5px 1px 10px; border-radius: 10px; border:1px solid #a7a7a7;cursor:pointer;}
.select-users .closes{float:right;}
.cur-select-users, .cur-select-permission{
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cur-select-permission{
    width:230px !important;
}
.select-users:hover{background:white;color:black;}
.page-list {display:none;}
#order-table tbody tr td{
    overflow: hidden; 
    text-overflow:ellipsis;  
    white-space: nowrap;
    table-layout:fixed;
}
table{table-layout:fixed;}
</style>
{% end %}
{% block content %}
<div class="page-hero page-container " id="page-hero">
    <div class="padding d-flex">
        <div class="page-title">
            <h2 class="text-md text-highlight">交易信息</h2>
            <small class="text-muted">实时交易购买订单记录信息</small>
        </div>
        <div class="flex">
            <div class="alert alert-warning" role="alert" id="alert-div" style="display: none;">
                <i data-feather="alert-circle"></i>
                <span class="mx-2" id="alert-msg"></span>
            </div>
        </div>
        <div>

        </div>
    </div>
</div>

<div class="page-content page-container" id="page-content">
    <div class="padding contents">
        
        {% module xsrf_form_html() %}
        <table id="order-table" class="table table-theme v-middle" data-plugin="bootstrapTable" data-toolbar="#toolbar"
            data-detail-view="false" data-mobile-responsive="true">
            <thead>
                <tr>
                    <th data-width="15%" colspan="1" data-field="bus-order">订单号</th>
                    <th data-width="25%" colspan="1" data-field="bus-product">产品</th>
                    <th data-width="10%" colspan="1" data-field="bus-type">类型</th>
                    <th data-width="10%" colspan="1" data-field="bus-status">状态</th>
                    <th data-width="15%" colspan="1" data-field="bus-money">实付金额</th>
                    <th data-width="15%" colspan="1" data-field="bus-paytime">支付/开通时间</th>
                    <th colspan="1" data-field="opertions"><span class="d-none d-sm-block">操作</span></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{% end %}
{% block js %}
<script src="/static/libs/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.js"></script>
<script src="/static/libs/notie/dist/notie.min.js"></script>
<script>
    $(document).ready(function () {
        $('#order-table').bootstrapTable({
            url: "/order",
            method: 'POST',
            //toolbar: '#toolbar',
            striped: true,
            cache: false,
            pagination: true,
            sortable: false,
            sortOrder: "desc",
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            strictSearch: true,
            showColumns: false,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            //height: 500,
            uniqueId: "ID",
            showToggle: false,
            cardView: false,
            detailView: false,
            queryParams: function (params) {
                // 发送到后端的参数
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名  
                    sortOrder: params.order, //排位命令（desc，asc） 
                    _xsrf: $("[name='_xsrf']").val()
                };
                return temp;
            },
            onLoadSuccess: function (res) {
                //console.log(res);
            },
            onLoadError: function () {
                console.log("数据加载失败!");
            },
            columns: [
            {
                field: 'bus-order',
                title: '订单号',
                align: 'left'
            },{
                field: 'bus-product',
                title: '产品',
                align: 'left'
            }, {
                field: 'bus-type',
                title: '类型',
                align: 'center'
            }, {
                field: 'bus-status',
                title: '状态',
                align: 'left'
            }, {
                field: 'bus-money',
                title: '实付金额',
                align: 'left',
                formatter: function (value, row, index) {
                    var result = "<span class='text-dark'>￥"+row['bus-money']+"</span>";
                    return result
                }
            }, {
                field: 'bus-paytime',
                title: '支付/开通时间',
                align: 'left'
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left'
            }],
        });
    });
</script>
{% end %}