<div class="panel panel-default">
  <!--标题-->
  <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" [hidden]="editShowType=='only'">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <div class="row mb-3 ml-1" [hidden]="editShowType=='only'">
          <div class="col-lg-12">
            <form (ngSubmit)="listLayout()" class="form-inline">
              <div class="input-group mr-1 input-group-sm">
                <label>考试时间</label>
                <flex-select [allowClear]="true" [url]="EXAM_TIME_URL" respDataPath="array" optionValueField="id"
                  optionTextField="exam_year_month" [(ngModel)]="query.exam_time_id" (ngModelChange)="getPoint($event)"
                  placeholder="请选择" [ngModelOptions]="{standalone: true}" width="122" noResultsFound="无数据">
                </flex-select>
              </div>

              <div class="input-group mr-1 input-group-sm">
                <label>考点</label>
                <flex-select [allowClear]="true" [(items)]="pointList" [(ngModel)]="query.batch_id" optionValueField="id"
                  optionTextField="batch_name" placeholder="请选择" [ngModelOptions]="{standalone: true}" width="122"
                  noResultsFound="无数据">
                </flex-select>
              </div>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1">
                <i class="fa fa-search"></i> 查询</button>
            </form>
          </div>
        </div>

        <!-- 工具栏 -->
        <div class="row mb-2" [hidden]="editShowType=='only'">

          <div class="col-lg-12">

            <div class="pull-left">
              <div class="row">
                <div class="col-lg-2  bg-success text-white">
                  已编排考点
                </div>
                <div class="col-lg-3">
                </div>
                <div class="col-lg-4">
                  <button class="btn btn-primary mr-1 btn-sm" (click)="cancel()" data-toggle="tooltip" data-placement="left"
                    title="取消编排">
                    <i class="fa fa-times"> 取消编排</i>
                  </button>
                </div>
              </div>

            </div>
          </div>

        </div>

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="editShowType=='only'">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <th>考点</th>
                  <th>课程名称</th>
                  <th>报考总科次</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of layoutList; let i = index">
                  <td>{{item.batch_name}}</td>
                  <td>{{item.course_name}}</td>
                  <td>{{item.persons}}</td>
                </tr>
              </tbody>
            </table>
          </div>

        </div>

        <div class="row mb-5"></div>

        <!-- 工具栏 -->
        <div class="row mb-2" [hidden]="editShowType=='only'">

          <div class="col-lg-12">
            <div class="pull-left">
              <div class="row">
                <div class="col-lg-2  bg-danger text-white">
                  待编排课程
                </div>
                <div class="col-lg-3"></div>
                <div class="col-lg-4">
                  <button class="btn btn-primary mr-1 btn-sm" (click)="goPointDetail(roomModal,'modal-lg')" data-toggle="tooltip"
                    data-placement="left" title="编排">
                    <i class="fa fa-star">编排</i>
                  </button>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="editShowType=='only'">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <th width="30%">课程名称</th>
                  <th width="30%">报考总科次</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of noLayoutList; let i = index">
                  <td>{{item.course_name}}</td>
                  <td>{{item.persons}}</td>
                </tr>
              </tbody>
            </table>
          </div>

        </div>

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

<ng-template #roomModal>
  <div class="modal-content">
    <div class="modal-header info-success-qm">
      <div class="pull-left">
        <em class="fa-lg fas fa-edit "></em> 编排
      </div>

      <button type="button" class="close" (click)="hideModal()">×</button>
    </div>

    <div class="modal-body">
      <div [ngTemplateOutlet]="roomFormTemplate"></div>

    </div>
    <div class="modal-footer">
      <button class="btn btn-info" (click)="layout()">
        <i class="fa fa-info-circle"> </i> 开始编排
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>
  </div>
</ng-template>

<ng-template #roomFormTemplate>
  <div class="row">
    <table class="table table-sm table-striped table-hover table-bordered bg-white">
      <thead>
        <tr>
          <th>考点</th>
          <th>场次</th>
          <th>容量(人)</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of roomList">
          <td>{{item.batch_name}}</td>
          <td>第{{item.room_num}}场</td>
          <td>{{item.room_capacity}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</ng-template>