<div class="content-heading  justify-content-between">
    <div>考场批量抽取 <a href="#" *ngIf="groupName" style="cursor:pointer">【{{groupName}}】</a>
    </div>
    <div class="float-right" *ngIf="currentStep === 'Extracting'">
        <div class="row">
            <div class="ml-3" >
                <input type="text"  class="form-control" placeholder="输入准考证号进行搜索"  [(ngModel)]="checkin.ticket_no"  (keyup.enter)="requestExtractStd()" />
            </div>
            <div class="wd-xl ml-4">
                <ngx-select [items]="batchArr" [(ngModel)]="checkin.extract_batch" (ngModelChange)="requestExtractStd()"
                    [autoClearSearch]="true" optionValueField="extract_batch" optionTextField="batch_name">
                </ngx-select>
            </div>
            <div class="btn-group mb-1 mr-1 ml-3" dropdown>
                <button class="btn dropdown-toggle btn-secondary btn-lg" type="button" dropdownToggle>辅助功能
                    <span class="caret"></span>
                </button>
                <div *dropdownMenu class="dropdown-menu modal-lg" role="menu">
                    <a class="dropdown-item" href="#" (click)="goInit()">选择分组</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" (click)="allExtract()">一键抽取</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" (click)="export()">导出</a>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 选择日期和分组 -->
<div class="card card-default" *ngIf="currentStep === 'Init'">
    <div class="card-body">
        <div class="form-horizontal" method="get">
            <fieldset>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label text-right">请选择考点信息</label>
                    <div class="col-lg-9">
                        <div class="">
                            <ngx-select [items]="agentArray" [(ngModel)]="checkin.agent_id"
                                (ngModelChange)="requestDateArray()" [autoClearSearch]="true"
                                optionValueField="ly_agent_id" optionTextField="ly_agent_name"></ngx-select>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset *ngIf="checkin.agent_id !== undefined">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label text-right">请选择考试日期</label>
                    <div class="col-lg-9">
                        <div>

                            <ngx-select [items]="dateArray" [(ngModel)]="checkin.exam_date"
                                (ngModelChange)="requestGroupArray()" [autoClearSearch]="true"
                                optionValueField="exam_date" optionTextField="exam_date"></ngx-select>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <div class="form-group row mb">
                    <label class="col-lg-3 col-form-label text-right">开考时段范围</label>
                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col-md-6">
                                <input class="form-control" type="text" [(ngModel)]="checkin.start_time" maxlength="5"
                                    id="startTime" />
                            </div>
                            <div class="col-md-6">
                                <input class="form-control" type="text" [(ngModel)]="checkin.end_time" maxlength="5"
                                    id="endTime" />
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset *ngIf="groupArray.length > 0 ">
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label text-right">请选择面试分组</label>
                    <div class="col-lg-9">
                        <div class="d-flex align-items-center mb-3">
                            <ngx-select [items]="groupArray" [(ngModel)]="checkin.ly_group_id" style="width:100%"
                                optionValueField="ly_group_id" optionTextField="group_name"></ngx-select>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset *ngIf="groupArray.length > 0">
                <div class="d-flex justify-content-center">
                    <button class="btn btn-primary" type="button" (click)="startExtract()">开始抽考场</button>
                </div>
            </fieldset>
        </div>

    </div>
</div>

<div *ngIf="currentStep == 'Extracting'">
    <table class="table table-striped table-hover table-bordered">
        <thead>
            <tr>
                <th class="text-center">批次</th>
                <th class="text-center">检录序号</th>
                <th class="text-center">考生姓名</th>
                <th class="text-center">身份证号</th>
                <th class="text-center">准考证号</th>
                <th class="text-center">抽取序号</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let std of stdArr">
                <td class="text-center">第{{std.extract_batch}}批次</td>
                <td class="text-center">{{std.real_checkin_seq}}号</td>
                <td class="text-center">{{std.std_name}}</td>
                <td class="text-center">{{std.cert_id}}</td>
                <td class="text-center">{{std.ticket_no}}</td>
                <!-- {{std.ly_room_index}}考场 -->
                <td class="text-center">{{std.extract_seq}}号</td>
            </tr>
        </tbody>
    </table>
</div>