@page "/cardManagement/corporateCard"
@page "/cardManagement/corporateCard/{customerId:int}"
@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;
    }

    /* 卡分配弹出框样式 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(2px);
    }

    .card-allocation-modal {
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        width: 1000px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        animation: modalSlideIn 0.3s ease;
    }

    .select-account-modal {
        background: white;
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        width: 500px;
        max-height: 70vh;
        display: flex;
        flex-direction: column;
        animation: modalSlideIn 0.3s ease;
    }

    .modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .modal-icon {
        font-size: 20px;
    }

    .modal-close-btn {
        background: none;
        border: none;
        font-size: 20px;
        color: #909399;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s;
    }

        .modal-close-btn:hover {
            background-color: #f5f7fa;
            color: #303133;
        }

    .modal-body {
        padding: 24px;
        flex: 1;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 16px 24px;
        border-top: 1px solid #ebeef5;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    /* 分配容器 */
    .allocation-container {
        display: flex;
        gap: 24px;
        height: 500px;
    }

    .left-section, .right-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        border: 1px solid #ebeef5;
        border-radius: 6px;
        overflow: hidden;
    }

    .section-header {
        padding: 16px;
        background: #f5f7fa;
        border-bottom: 1px solid #ebeef5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .section-header h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }

    /* 账户列表 */
    .account-list {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

    .account-item.selected {
        border-color: #409eff !important;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1) !important;
        background-color: rgba(64, 158, 255, 0.05) !important;
    }

    .account-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 8px;
        background: white;
        transition: all 0.2s;
        cursor: pointer;
    }


        .account-item:hover {
            border-color: #409eff;
            box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
        }

    .account-info {
        flex: 1;
    }

    .account-field {
        margin-bottom: 4px;
    }

        .account-field:last-child {
            margin-bottom: 0;
        }

    .field-label {
        color: #606266;
        font-size: 13px;
    }

    .field-value {
        color: #303133;
        font-weight: 500;
    }

    /* 空状态 */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 40px;
        text-align: center;
    }

    .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-text {
        font-size: 16px;
        color: #909399;
        margin-bottom: 8px;
    }

    .empty-subtext {
        font-size: 14px;
        color: #c0c4cc;
    }

    /* 卡限制表单 */
    .card-limit-form {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-row {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }

        .form-row:last-child {
            margin-bottom: 0;
        }

    .half-width {
        flex: 1;
    }

    .form-label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        color: #606266;
        font-weight: 500;
    }

    .form-input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 14px;
        color: #606266;
        transition: all 0.2s;
        box-sizing: border-box;
    }

        .form-input:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }

        .form-input[readonly] {
            background-color: #f5f7fa;
            color: #909399;
            cursor: not-allowed;
        }

    /* 复选框组 */
    .checkbox-group {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .checkbox-item {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }

        .checkbox-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

    .checkbox-label {
        font-size: 14px;
        color: #606266;
    }

    /* 选择账户弹出框 */
    .search-section {
        margin-bottom: 16px;
    }

    .search-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        font-size: 14px;
        color: #606266;
        transition: all 0.2s;
    }

        .search-input:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }

    .account-selection-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .account-selection-item.selected {
        border-color: #409eff !important;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1) !important;
        background-color: rgba(64, 158, 255, 0.05) !important;
    }

    .account-selection-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 8px;
        background: white;
        transition: all 0.2s;
        cursor: pointer;
    }

        .account-selection-item:hover {
            border-color: #409eff;
            background-color: #f5f7fa;
        }

    .account-selection-info {
        flex: 1;
    }

    .account-selection-field {
        margin-bottom: 4px;
    }

        .account-selection-field:last-child {
            margin-bottom: 0;
        }

    /* 按钮样式 */
    .btn {
        padding: 8px 20px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-secondary {
        background: white;
        color: #606266;
        border: 1px solid #dcdfe6;
    }

        .btn-secondary:hover {
            background: #f5f7fa;
            border-color: #c0c4cc;
        }

    .btn-primary {
        background: #409eff;
        color: white;
    }

        .btn-primary:hover {
            background: #66b1ff;
        }

    /* 动画 */
    @@keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 响应式设计 */
    @@media (max-width: 1100px) {
        .card-allocation-modal {
            width: 90%;
            height: 90vh;
        }

        .allocation-container {
            flex-direction: column;
            height: auto;
        }

        .left-section, .right-section {
            flex: none;
            height: 300px;
        }
    }

    @@media (max-width: 600px) {
        .select-account-modal {
            width: 90%;
        }

        .form-row {
            flex-direction: column;
            gap: 12px;
        }

        .half-width {
            width: 100%;
        }

        .checkbox-group {
            flex-direction: column;
            gap: 12px;
        }
    }

    /* 响应式设计 */
    @@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="CardNo"
                       Placeholder="卡号"
                       Style="width: 150px" />
            </div>


            <!-- 公司名称 -->
            <div class="form-item">
                <span class="form-label">公司名称</span>
                <Input @bind-Value="CompanyName"
                       Placeholder="公司名称"
                       Style="width: 150px" />
            </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: 10%;">站点</div>
                    <div class="div-table-cell cell-left-align" style="width: 15%;">公司名称</div>
                    <div class="div-table-cell cell-left-align" style="width: 15%;">卡号</div>
                    <div class="div-table-cell cell-left-align" style="width: 10%;">卡类型</div>
                    <div class="div-table-cell cell-left-align" style="width: 10%;">卡账余额</div>
                    <div class="div-table-cell cell-left-align" style="width: 15%;">发卡时间</div>
                    <div class="div-table-cell cell-left-align" style="width: 15%;">挂失时间</div>
                    <div class="div-table-cell cell-left-align" style="width: 10%;">状态</div>
                    <div class="div-table-cell cell-left-align" style="width: 10%;">操作</div>
                </div>

                <!-- 表格内容 -->
                @if (cardInfoDtos?.Any() == true)
                {
                    @foreach (var item in cardInfoDtos)
                    {
                        <div class="div-table-row">
                            <div class="div-table-cell cell-left-align" style="width: 10%;">@item.StationName</div>
                            <div class="div-table-cell cell-left-align" style="width: 15%;">@item.CompanyName</div>
                            <div class="div-table-cell cell-left-align" style="width: 15%;">@item.CardNo</div>
                            <div class="div-table-cell cell-left-align" style="width: 10%;">@item.CardType</div>
                            <div class="div-table-cell cell-left-align" style="width: 10%;">@item.AccountBalance</div>
                            <div class="div-table-cell cell-left-align" style="width: 15%;">@item.IssueTime</div>
                            <div class="div-table-cell cell-left-align" style="width: 15%;">@item.LossTime</div>
                            <div class="div-table-cell cell-left-align" style="width: 10%;">@item.Status</div>
                            <div class="div-table-cell cell-left-align" style="width: 10%;">
                                <button type="button" class="ant-btn ant-btn-link ant-btn-sm"
                                        @onclick="() => ShowCardAllocationModal(item)">
                                    卡分配
                                </button>
                            </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"
                                OnPageIndexChange="@OnPageChange"
                                OnPageSizeChange="@OnPageSizeChange"
                                ShowSizeChanger
                                ShowQuickJumper />
                </div>
            }
        </Spin>
    </div>
</div>

<!-- 卡分配弹出框 -->
@if (_showCardAllocationModal)
{
    <div class="modal-overlay">
        <div class="card-allocation-modal">
            <div class="modal-header">
                <div class="modal-title">
                    <span class="modal-icon">🔄</span>
                    卡分配 - @_selectedCard?.CardNo
                </div>
                <button type="button" class="modal-close-btn" @onclick="CloseCardAllocationModal">
                    <span class="close-icon">×</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="allocation-container">
                    <!-- 左侧：账户列表 -->
                    <div class="left-section">
                        <div class="section-header">
                            <h4>可分配账户</h4>
                            <button type="button" class="ant-btn ant-btn-primary ant-btn-sm"
                                    @onclick="ShowSelectAccountModal">
                                <span class="anticon anticon-plus"></span>
                                分配
                            </button>
                        </div>

                        <div class="account-list">
                            @if (_assignedAccounts?.Any() == true)
                            {
                                @foreach (var account in _assignedAccounts)
                                {
                                    <div class="account-item @(account.IsSelected ? "selected" : "")"
                                         @onclick="() => SelectAccountInList(account)">
                                        <div class="account-info">
                                            <div class="account-field">
                                                <span class="field-label">账户编号：</span>
                                                <span class="field-value">@account.AccountNo</span>
                                            </div>
                                            <div class="account-field">
                                                <span class="field-label">姓名：</span>
                                                <span class="field-value">@account.Name</span>
                                            </div>
                                            <div class="account-field">
                                                <span class="field-label">手机号：</span>
                                                <span class="field-value">@account.Phone</span>
                                            </div>
                                        </div>
                                        <button type="button"
                                                class="ant-btn ant-btn-link ant-btn-sm ant-btn-dangerous"
                                                @onclick:stopPropagation="true"
                                                @onclick="() => RemoveAccount(account)">
                                            删除
                                        </button>
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="empty-state">
                                    <div class="empty-icon">👤</div>
                                    <div class="empty-text">暂无分配的账户</div>
                                    <div class="empty-subtext">点击"分配"按钮添加账户</div>
                                </div>
                            }
                        </div>
                    </div>

                    <!-- 右侧：卡限制设置 -->
                    <div class="right-section">
                        <div class="section-header">
                            <h4>卡使用限制</h4>
                        </div>

                        <form class="card-limit-form">
                            <!-- 卡号（不可编辑） -->
                            <div class="form-group">
                                <label class="form-label">卡号</label>
                                <input type="text"
                                       class="form-input"
                                       value="@_selectedCard?.CardNo"
                                       readonly />
                            </div>

                            <!-- 可用时间范围 -->
                            <div class="form-row">
                                <div class="form-group half-width">
                                    <label class="form-label">可用开始时间</label>
                                    <input type="datetime-local"
                                           class="form-input"
                                           value="@FormatDateTime(_cardAllocation.AvailableStartTime)"
                                           @onchange="@(e => HandleDateTimeChange(e, "start"))" />
                                </div>
                                <div class="form-group half-width">
                                    <label class="form-label">可用结束时间</label>
                                    <input type="datetime-local"
                                           class="form-input"
                                           value="@FormatDateTime(_cardAllocation.AvailableEndTime)"
                                           @onchange="@(e => HandleDateTimeChange(e, "end"))" />
                                </div>
                            </div>

                            <!-- 允许的油品（多选） -->
                            <div class="form-group">
                                <label class="form-label">允许的油品</label>
                                <div class="checkbox-group">
                                    <label class="checkbox-item">
                                        <input type="checkbox"
                                               @bind="_oilTypes[0].Selected" />
                                        <span class="checkbox-label">0#</span>
                                    </label>
                                    <label class="checkbox-item">
                                        <input type="checkbox"
                                               @bind="_oilTypes[1].Selected" />
                                        <span class="checkbox-label">92#</span>
                                    </label>
                                    <label class="checkbox-item">
                                        <input type="checkbox"
                                               @bind="_oilTypes[2].Selected" />
                                        <span class="checkbox-label">95#</span>
                                    </label>
                                    <label class="checkbox-item">
                                        <input type="checkbox"
                                               @bind="_oilTypes[3].Selected" />
                                        <span class="checkbox-label">98#</span>
                                    </label>
                                </div>
                            </div>

                            <!-- 消费限制 -->
                            <div class="form-row">
                                <div class="form-group half-width">
                                    <label class="form-label">单次消费金额上限</label>
                                    <input type="number"
                                           class="form-input"
                                           step="0.01"
                                           min="0"
                                           @bind="_cardAllocation.SingleConsumptionLimit"
                                           @bind:event="oninput" />
                                </div>
                                <div class="form-group half-width">
                                    <label class="form-label">累计消费金额上限</label>
                                    <input type="number"
                                           class="form-input"
                                           step="0.01"
                                           min="0"
                                           @bind="_cardAllocation.TotalConsumptionLimit"
                                           @bind:event="oninput" />
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group half-width">
                                    <label class="form-label">累计消费次数上限</label>
                                    <input type="number"
                                           class="form-input"
                                           step="1"
                                           min="0"
                                           @bind="_cardAllocation.TotalConsumptionCountLimit"
                                           @bind:event="oninput" />
                                </div>
                                <div class="form-group half-width">
                                    <label class="form-label">每日允许加油次数</label>
                                    <input type="number"
                                           class="form-input"
                                           step="1"
                                           min="0"
                                           @bind="_cardAllocation.DailyRefuelCountLimit"
                                           @bind:event="oninput" />
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group half-width">
                                    <label class="form-label">每日消费金额上限</label>
                                    <input type="number"
                                           class="form-input"
                                           step="0.01"
                                           min="0"
                                           @bind="_cardAllocation.DailyConsumptionLimit"
                                           @bind:event="oninput" />
                                </div>
                            </div>

                            <!-- 经纬度 -->
                            <div class="form-row">
                                <div class="form-group half-width">
                                    <label class="form-label">经度</label>
                                    <input type="text"
                                           class="form-input"
                                           placeholder="请输入经度"
                                           @bind="_cardAllocation.Longitude"
                                           @bind:event="oninput" />
                                </div>
                                <div class="form-group half-width">
                                    <label class="form-label">纬度</label>
                                    <input type="text"
                                           class="form-input"
                                           placeholder="请输入纬度"
                                           @bind="_cardAllocation.Latitude"
                                           @bind:event="oninput" />
                                </div>
                            </div>

                            <!-- 允许使用的距离 -->
                            <div class="form-group">
                                <label class="form-label">允许使用的距离（公里）</label>
                                <input type="number"
                                       class="form-input"
                                       step="0.1"
                                       min="0"
                                       @bind="_cardAllocation.AllowedDistance"
                                       @bind:event="oninput" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="CloseCardAllocationModal">
                    取消
                </button>
                <button type="button" class="btn btn-primary" @onclick="SaveCardAllocation">
                    保存
                </button>
            </div>
        </div>
    </div>
}

<!-- 选择账户弹出框 -->
@if (_showSelectAccountModal)
{
    <div class="modal-overlay">
        <div class="select-account-modal">
            <div class="modal-header">
                <div class="modal-title">
                    <span class="modal-icon">👥</span>
                    选择账户
                </div>
                <button type="button" class="modal-close-btn" @onclick="CloseSelectAccountModal">
                    <span class="close-icon">×</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="search-section">
                    <input type="text"
                           class="search-input"
                           placeholder="搜索账户编号、姓名或手机号"
                           @bind="_accountSearchKeyword"
                           @bind:event="oninput" />
                </div>

                <div class="account-selection-list">
                    @if (_filteredAccounts?.Any() == true)
                    {
                        @foreach (var account in _filteredAccounts)
                        {
                            <div class="account-selection-item">
                                <div class="account-selection-info">
                                    <div class="account-selection-field">
                                        <span class="field-label">账户编号：</span>
                                        <span class="field-value">@account.AccountNo</span>
                                    </div>
                                    <div class="account-selection-field">
                                        <span class="field-label">姓名：</span>
                                        <span class="field-value">@account.Name</span>
                                    </div>
                                    <div class="account-selection-field">
                                        <span class="field-label">手机号：</span>
                                        <span class="field-value">@account.Phone</span>
                                    </div>
                                </div>
                                <button type="button" class="ant-btn ant-btn-link ant-btn-sm"
                                        @onclick="() => SelectAccount(account)">
                                    选择
                                </button>
                            </div>
                        }
                    }
                    else
                    {
                        <div class="empty-state">
                            <div class="empty-icon">🔍</div>
                            <div class="empty-text">未找到匹配的账户</div>
                        </div>
                    }
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="CloseSelectAccountModal">
                    取消
                </button>
            </div>
        </div>
    </div>
}