@page "/report/fuelTransactionReport"
@attribute [ReuseTabsPage(Title = "油品交易报表")]


<style>
    .fuel-report-container {
        padding: 16px;
        background-color: #f5f7fa;
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
    }

    .filter-section {
        margin-bottom: 16px;
        padding: 16px !important;
        background: white;
        border: 1px solid #ebeef5;
        border-radius: 4px;
    }

    .filter-content .filter-row {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

        .filter-content .filter-row .filter-item {
            display: flex;
            align-items: center;
        }

            .filter-content .filter-row .filter-item .filter-label {
                margin-right: 8px;
                font-size: 14px;
                color: #606266;
                min-width: 32px;
            }

        .filter-content .filter-row .filter-actions {
            display: flex;
            gap: 8px;
            margin-left: auto;
        }

    .table-section {
        margin-top: 16px;
        padding: 16px;
        background: white;
        border: 1px solid #ebeef5;
        border-radius: 4px;
    }

    /* Div表格样式 */
    .div-table {
        display: flex;
        flex-direction: column;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        font-size: 14px;
    }

    .div-table-header {
        display: flex;
        background-color: #f5f7fa;
        font-weight: 600;
        color: #606266;
        border-bottom: 1px solid #ebeef5;
    }

    .div-table-row {
        display: flex;
        border-bottom: 1px solid #ebeef5;
    }

        .div-table-row:last-child {
            border-bottom: none;
        }

        .div-table-row:nth-child(even) {
            background-color: #fafafa;
        }

    .div-table-cell {
        padding: 12px 8px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cell-left-align {
        justify-content: flex-start;
        text-align: left;
    }

    .cell-right-align {
        justify-content: flex-end;
        text-align: right;
    }

    .highlight-cell {
        color: #1890ff !important;
        font-weight: 500;
    }

    /* 表单样式 */
    .filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .form-item {
        display: flex;
        align-items: center;
    }

        .form-item .form-label {
            margin-right: 8px;
            font-size: 14px;
            color: #606266;
            min-width: 80px;
            text-align: right;
        }

    .form-actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }

    /* 响应式设计 */
    @@media (max-width: 768px) {
        .fuel-report-container {
            padding: 12px;
        }

        .filter-section {
            padding: 12px !important;
        }

        .filter-form {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-item {
            width: 100%;
        }

        .form-actions {
            margin-left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 8px;
        }

        .div-table {
            overflow-x: auto;
        }

        .div-table-header,
        .div-table-row {
            min-width: 1200px;
        }

        .div-table-cell {
            padding: 8px 4px;
            font-size: 12px;
        }
    }
</style>

<div class="fuel-report-container">
    <!-- 筛选条件 -->
    <div class="filter-section">
        <div class="filter-form">
            <!-- 设备编号 -->
            <div class="form-item">
                <span class="form-label">设备编号</span>
                <Input @bind-Value="@DeviceId"
                       Placeholder="设备编号"
                       Style="width: 150px" />
            </div>

            <!-- 车牌号 -->
            <div class="form-item">
                <span class="form-label">车牌号</span>
                <Input @bind-Value="@PlateNumber"
                       Placeholder="设备编号"
                       Style="width: 150px" />
            </div>

            <!-- 油品 -->
            <div class="form-item">
                <span class="form-label">油品</span>
                <Select TItemValue="string" TItem="string"
                        DataSource="@OilTypeOptions"
                        @bind-Value="@OilType"
                        Style="width: 120px"
                        Placeholder="请选择"
                        AllowClear />
            </div>

            <!-- 支付方式 -->
            <div class="form-item">
                <span class="form-label">支付方式</span>
                <Select TItemValue="string" TItem="string"
                        DataSource="@PaymentMethodOptions"
                        @bind-Value="@PaymentMethod"
                        Style="width: 120px"
                        Placeholder="请选择"
                        AllowClear />
            </div>

            <!-- 支付状态 -->
            <div class="form-item">
                <span class="form-label">支付状态</span>
                <Select TItemValue="string" TItem="string"
                        DataSource="@PaymentStatusOptions"
                        @bind-Value="@PaymentStatus"
                        Style="width: 120px"
                        Placeholder="请选择"
                        AllowClear />
            </div>

            <!-- 订单状态 -->
            <div class="form-item">
                <span class="form-label">订单状态</span>
                <Select TItemValue="string" TItem="string"
                        DataSource="@OrderStatusOptions"
                        @bind-Value="@OrderStatus"
                        Style="width: 120px"
                        Placeholder="请选择"
                        AllowClear />
            </div>

            <!-- 司机 -->
            <div class="form-item">
                <span class="form-label">司机</span>
                <Input @bind-Value="@Driver"
                       Placeholder="司机"
                       Style="width: 150px" />
            </div>

            <!-- 订单编号 -->
            <div class="form-item">
                <span class="form-label">订单编号</span>
                <Input @bind-Value="@OrderNo"
                       Placeholder="订单编号"
                       Style="width: 150px" />
            </div>

            <!-- 会员手机号 -->
            <div class="form-item">
                <span class="form-label">会员手机号</span>
                <Input @bind-Value="@Mobile"
                       Placeholder="会员手机号"
                       Style="width: 150px" />
            </div>

            <!-- 交易时间 -->
            <div class="form-item">
                <span class="form-label">交易时间</span>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <DatePicker @bind-Value="@StartTime"
                                Format="yyyy-MM-dd"
                                Style="width: 110px" />
                    <span>至</span>
                    <DatePicker @bind-Value="@EndTime"
                                Format="yyyy-MM-dd"
                                Style="width: 110px"/>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="form-actions">
                <Button Type="@ButtonType.Primary" Icon="search" OnClick="HandleQuery">
                    查询
                </Button>
                <Button Icon="reload" OnClick="HandleReset">
                    重置
                </Button>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
        <Spin Spinning="@Loading">
            <div class="div-table">
                <!-- 表头 -->
                <div class="div-table-header">
                    <div class="div-table-cell cell-left-align" style="width: 8%;">设备编号</div>
                    <div class="div-table-cell cell-left-align" style="width: 8%;">车牌号</div>
                    <div class="div-table-cell cell-left-align" style="width: 10%;">交易时间</div>
                    <div class="div-table-cell cell-left-align" style="width: 6%;">油品</div>
                    <div class="div-table-cell cell-right-align" style="width: 6%;">单价</div>
                    <div class="div-table-cell cell-right-align" style="width: 6%;">升数</div>
                    <div class="div-table-cell cell-left-align" style="width: 8%;">支付方式</div>
                    <div class="div-table-cell cell-left-align" style="width: 6%;">司机</div>
                    <div class="div-table-cell cell-left-align" style="width: 10%;">订单编号</div>
                    <div class="div-table-cell cell-right-align highlight-cell" style="width: 8%;">应收款</div>
                    <div class="div-table-cell cell-left-align" style="width: 9%;">用户手机号</div>
                    <div class="div-table-cell cell-left-align" style="width: 7%;">用户名称</div>
                    <div class="div-table-cell cell-left-align" style="width: 8%;">微信昵称</div>
                    <div class="div-table-cell cell-left-align" style="width: 6%;">支付状态</div>
                    <div class="div-table-cell cell-left-align" style="width: 6%;">订单状态</div>
                </div>

                <!-- 表格内容 -->
                @if (TransactionData?.Any() == true)
                {
                    @foreach (var item in TransactionData)
                    {
                        <div class="div-table-row">
                            <div class="div-table-cell cell-left-align" style="width: 8%;">@item.DeviceId</div>
                            <div class="div-table-cell cell-left-align" style="width: 8%;">@item.PlateNumber</div>
                            <div class="div-table-cell cell-left-align" style="width: 10%;">@FormatDateTime(item.TransactionTime)</div>
                            <div class="div-table-cell cell-left-align" style="width: 6%;">@item.OilProductName</div>
                            <div class="div-table-cell cell-right-align" style="width: 6%;">@FormatCurrency(item.OilPrice)</div>
                            <div class="div-table-cell cell-right-align" style="width: 6%;">@FormatNumber(item.OilVolume)</div>
                            <div class="div-table-cell cell-left-align" style="width: 8%;">@item.PaymentMethod</div>
                            <div class="div-table-cell cell-left-align" style="width: 6%;">@item.DriverName</div>
                            <div class="div-table-cell cell-left-align" style="width: 10%;">@item.OrderNo</div>
                            <div class="div-table-cell cell-right-align highlight-cell" style="width: 8%;">@FormatCurrency(item.PayableAmount)</div>
                            <div class="div-table-cell cell-left-align" style="width: 9%;">@item.Mobile</div>
                            <div class="div-table-cell cell-left-align" style="width: 7%;">@item.UserName</div>
                            <div class="div-table-cell cell-left-align" style="width: 8%;">@item.WxName</div>
                            <div class="div-table-cell cell-left-align" style="width: 6%;">@item.PaymentStatus</div>
                            <div class="div-table-cell cell-left-align" style="width: 6%;">@FormatOrderStatus(item.OrderStatus)</div>
                        </div>
                    }
                }
                else if (!Loading)
                {
                    <div class="div-table-row">
                        <div class="div-table-cell" style="width: 100%; padding: 40px; text-align: center; color: #999;">
                            暂无数据
                        </div>
                    </div>
                }
            </div>

            <!-- 分页 -->
            @if (TotalCount > 0)
            {
                <div style="margin-top: 16px; text-align: right;">
                    <Pagination Total="@TotalCount"
                                PageSize="@PageSize"
                                Current="@CurrentPage"
                                OnChange="@HandlePageChange"
                                OnShowSizeChange="@HandlePageSizeChange"
                                ShowSizeChanger
                                ShowQuickJumper />
                </div>
            }
        </Spin>
    </div>
</div>