<div *ngIf="!inTimeFlag">
  <div class="panel panel-default">
    <ul class="list-group">
      <li class="list-group-item text-center" >
          <h4>不在报考时间范围内！</h4>
      </li>
    </ul>
  </div>
</div>



<div class="panel panel-default" *ngIf="inTimeFlag">
  <!--标题-->
  <div class="panel-title">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">报考管理</li>
        <li class="breadcrumb-item active" aria-current="page">现场报考</li>
      </ol>
    </nav>
  </div>

  <div class="panel-body ml-sm">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <div class="row mb-3 ml-1">
          <div class="col-lg-12">
            <form class="form-inline">

              <!-- <div class="input-group mr-1 input-group-sm">
                <label>专业：</label>
                <flex-select [allowClear]="true" [url]="MAJOR_LIST_URL" respDataPath="array" optionValueField="id"
                  optionTextField="major_name" [(ngModel)]="query.major_id" placeholder="请选择" [ngModelOptions]="{standalone: true}"
                  width="100" noResultsFound="无数据" (ngModelChange)="loadMajorPlan(query.major_id)">
                </flex-select>
              </div> -->

              <div class="input-group mr-1 input-group-sm">
                <label>准考证号：</label>
                <input name="ticket_no" [(ngModel)]="query.ticket_no" #eticketNo class="input-sm form-control"
                  type="text" placeholder="考生准考证" maxlength="64">
              </div>

              <div class="input-group mr-1 input-group-sm">
                <label>学生姓名：</label>
                <input name="std_name" [(ngModel)]="query.std_name" class="input-sm form-control" type="text"
                  placeholder="考生姓名" maxlength="64" readonly>
              </div>

              <div class="input-group mr-1 input-group-sm">
                <label>身份证号：</label>
                <input name="cert_no" [(ngModel)]="query.cert_no" class="input-sm form-control" type="text"
                  placeholder="考生身份证" maxlength="64" readonly>
              </div>

              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="findStd(query.ticket_no)">
                <i class="fa fa-search"></i> 查询考生</button>
                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1"
                (click)="printEnrol(query.ticket_no)">
                <i class="fa icon-printer"></i> 报考校对单</button>
            </form>
          </div>
        </div>
        <div class="row mb-3 ml-1">
          <div class="col-lg-12">
            <form class="form-inline">
              <div class="input-group mr-1 input-group-sm">
                <label>课程代码：</label>
                <input name="course_code" [(ngModel)]="query.course_code" #ecourseCode class="input-sm form-control"
                  type="text" placeholder="课程代码" maxlength="64">
              </div>
              <!-- <div class="input-group mr-1 input-group-sm">
                <label>课程名称：</label>
                <input name="course_name" [(ngModel)]="query.course_name" class="input-sm form-control" type="text"
                  placeholder="课程名称" maxlength="64" readonly>
              </div> -->
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1"
                (click)="findCourse(query.course_code)">
                <i class="fa fa-search"></i>录入报考课程</button>
               &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-danger" style="font-size: 1rem">
                 现场报考开始时间: <strong style="font-size: 1.25rem">{{timeArr.start_time}}</strong> ，结束时间：<strong style="font-size: 1.25rem">{{timeArr.end_time}}</strong></span>
            </form>
          </div>
        </div>

        <!--选择的专业本次开考的课程  -->
        <div [hidden]="courseFlag">
          <p class="font-weight-bold bg-success text-white">{{major.major_code}}-{{major.major_name}}开考课程详细如下:</p>
          <table class="table table-bordered">
            <tr *ngFor="let item of coursePlan">
              <td>{{item.time}}</td>
              <td><span
                  *ngFor="let course of item.courses">({{course.course_code}})-{{course.course_name}}&nbsp;&nbsp;</span>
              </td>
            </tr>
          </table>
        </div>


        <div class="row mb-3 ml-1">
          <!--左侧的表格-->
          <div class="col-lg-6 mt-3">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <!-- <th>
                    <div class="checkbox c-checkbox">
                      <label>
                        <input type="checkbox" (change)="framePager.checkedMasterToggle($event)" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </th> -->

                  <th align="center">准考证号</th>
                  <th>考生姓名</th>
                  <th>证件号码</th>
                  <th>报考课程</th>
                  <th align="center">考试时间</th>
                  <th>报考考区</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of framePager.getRecords(); let i = index">
                  <!-- <td>
                    <div class="checkbox c-checkbox input-group-sm">
                      <label>
                        <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked"
                          [(ngModel)]="item.isChecked" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </td> -->
                  <td align="center">{{item.ticket_no}}</td>
                  <td>{{item.std_name}}</td>
                  <td>{{item.cert_no}}</td>
                  <td>{{item.course_full_name}}</td>
                  <td align="center">{{item.full_exam_date}}</td>
                  <td>{{item.org_name}}</td>
                </tr>
              </tbody>
            </table>
            <frame-pager [url]="STD_LIST_URL" pageLimit="7" hideSearch="true" hasCheck="true" #framePager
              (preReqEvent)="search($event)"></frame-pager>
          </div>
          <!--右侧的科目选择-->
          <div class="col-lg-6 mt-3">
            <table class="table  table-bordered">
              <tr>
                <td>

                  <div class="row mt-2" *ngFor="let item of allPlans; let i =index">
                    <div class="col-lg-2" *ngIf="i==0" style="padding-right:2px;padding-left:2px;padding-top:6px;font-size:12px;">{{item.time}}</div>
                    <div class="col-lg-4" *ngIf="i==0" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="item.courses" optionValueField="id"
                        optionTextField="code_course_name" [(ngModel)]="items.course_id_1" placeholder="请选择报考课程"
                        [ngModelOptions]="{standalone: true}" width="100" noResultsFound="无数据"
                        (ngModelChange)="examChoose($event,1)">
                      </flex-select>
                    </div>
                    <div class="col-lg-1" *ngIf="i==0" style="padding-right:2px;padding-left:2px;"></div>
                    <div class="col-lg-3" *ngIf="i==0" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="examArea1" [(ngModel)]="items.org_id_1"
                        optionValueField="org_id" optionTextField="org_name" placeholder="请选择考区"
                        [ngModelOptions]="{standalone: true}" width="60" noResultsFound="无数据">
                      </flex-select>
                    </div>
                  </div>

                  <div class="row mt-2" *ngFor="let item of allPlans; let i =index">
                    <div class="col-lg-2" *ngIf="i==1" style="padding-right:2px;padding-left:2px;padding-top:6px;font-size:12px;">{{item.time}}</div>
                    <div class="col-lg-4" *ngIf="i==1" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="item.courses" optionValueField="id"
                        optionTextField="code_course_name" [(ngModel)]="items.course_id_2" placeholder="请选择报考课程"
                        [ngModelOptions]="{standalone: true}" width="100" noResultsFound="无数据"
                        (ngModelChange)="examChoose($event,2)">
                      </flex-select>
                    </div>
                    <div class="col-lg-1" *ngIf="i==1" style="padding-right:2px;padding-left:2px;"></div>
                    <div class="col-lg-3" *ngIf="i==1" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="examArea2" [(ngModel)]="items.org_id_2"
                        optionValueField="org_id" optionTextField="org_name" placeholder="请选择考区"
                        [ngModelOptions]="{standalone: true}" width="60" noResultsFound="无数据">
                      </flex-select>
                    </div>
                  </div>

                  <div class="row mt-2" *ngFor="let item of allPlans; let i =index">
                    <div class="col-lg-2" *ngIf="i==2" style="padding-right:2px;padding-left:2px;padding-top:6px;font-size:12px;">{{item.time}}</div>
                    <div class="col-lg-4" *ngIf="i==2" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="item.courses" optionValueField="id"
                        optionTextField="code_course_name" [(ngModel)]="items.course_id_3" placeholder="请选择报考课程"
                        [ngModelOptions]="{standalone: true}" width="100" noResultsFound="无数据"
                        (ngModelChange)="examChoose($event,3)">
                      </flex-select>
                    </div>
                    <div class="col-lg-1" *ngIf="i==2" style="padding-right:2px;padding-left:2px;"></div>
                    <div class="col-lg-3" *ngIf="i==2" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="examArea3" [(ngModel)]="items.org_id_3"
                        optionValueField="org_id" optionTextField="org_name" placeholder="请选择考区"
                        [ngModelOptions]="{standalone: true}" width="60" noResultsFound="无数据">
                      </flex-select>
                    </div>
                  </div>

                  <div class="row mt-2" *ngFor="let item of allPlans; let i =index">
                    <div class="col-lg-2" *ngIf="i==3" style="padding-right:2px;padding-left:2px;padding-top:6px;font-size:12px;">{{item.time}}</div>
                    <div class="col-lg-4" *ngIf="i==3" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="item.courses" optionValueField="id"
                        optionTextField="code_course_name" [(ngModel)]="items.course_id_4" placeholder="请选择报考课程"
                        [ngModelOptions]="{standalone: true}" width="100" noResultsFound="无数据"
                        (ngModelChange)="examChoose($event,4)">
                      </flex-select>
                    </div>
                    <div class="col-lg-1" *ngIf="i==3" style="padding-right:2px;padding-left:2px;"></div>
                    <div class="col-lg-3" *ngIf="i==3" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="examArea4" [(ngModel)]="items.org_id_4"
                        optionValueField="org_id" optionTextField="org_name" placeholder="请选择考区"
                        [ngModelOptions]="{standalone: true}" width="60" noResultsFound="无数据">
                      </flex-select>
                    </div>
                  </div>

                  <div class="row mt-2" *ngFor="let item of allPlans; let i =index">
                    <div class="col-lg-2" *ngIf="i==4" style="padding-right:2px;padding-left:2px;padding-top:6px;font-size:12px;">{{item.time}}</div>
                    <div class="col-lg-4" *ngIf="i==4" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="item.courses" optionValueField="id"
                        optionTextField="code_course_name" [(ngModel)]="items.course_id_5" placeholder="请选择报考课程"
                        [ngModelOptions]="{standalone: true}" width="100" noResultsFound="无数据"
                        (ngModelChange)="examChoose($event,5)">
                      </flex-select>
                    </div>
                    <div class="col-lg-1" *ngIf="i==4" style="padding-right:2px;padding-left:2px;"></div>
                    <div class="col-lg-3" *ngIf="i==4" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="examArea5" [(ngModel)]="items.org_id_5"
                        optionValueField="org_id" optionTextField="org_name" placeholder="请选择考区"
                        [ngModelOptions]="{standalone: true}" width="60" noResultsFound="无数据">
                      </flex-select>
                    </div>
                  </div>

                  <div class="row mt-2" *ngFor="let item of allPlans; let i =index">
                    <div class="col-lg-2" *ngIf="i==5" style="padding-right:2px;padding-left:2px;padding-top:6px;font-size:12px;">{{item.time}}</div>
                    <div class="col-lg-4" *ngIf="i==5" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="item.courses" optionValueField="id"
                        optionTextField="code_course_name" [(ngModel)]="items.course_id_6" placeholder="请选择报考课程"
                        [ngModelOptions]="{standalone: true}" width="100" noResultsFound="无数据"
                        (ngModelChange)="examChoose($event,4)">
                      </flex-select>
                    </div>
                    <div class="col-lg-1" *ngIf="i==5" style="padding-right:2px;padding-left:2px;"></div>
                    <div class="col-lg-3" *ngIf="i==5" style="padding-right:2px;padding-left:2px;">
                      <flex-select [allowClear]="true" [(items)]="examArea6" [(ngModel)]="items.org_id_6"
                        optionValueField="org_id" optionTextField="org_name" placeholder="请选择考区"
                        [ngModelOptions]="{standalone: true}" width="60" noResultsFound="无数据">
                      </flex-select>
                    </div>
                  </div>

                </td>
              </tr>
              <tr>
                  <div class="col-lg-12" style="text-align: right;">
                      <button id="btnExport" class="btn btn-primary mr-1 btn-lg" data-toggle="tooltip" data-placement="center"
                        (click)="saveEnrol()" title="报考">
                        <i class="fa plus"></i>保存报考数据</button> &nbsp;&nbsp;&nbsp;&nbsp;<br><br>
                        <h4><font color="red">注意：(00594)口语、(00602)口译与听力 收费70元</font></h4>
                    </div>
              </tr>
            </table>
          </div>
        </div>
        

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