<div class="content-heading  justify-content-between">
    <div>报考预约容量管理</div>
    <div class="float-right">
      <div class="row">

        <div class="mr-2 ml-3">
          <select class="form-control mt-1" [(ngModel)]="appointment.agent_id"  (change)="requestAspect()">
            <option [value]="v.agent_id" *ngFor="let v of agentArr">{{v.agent_name}}</option>
          </select>
        </div>

        <div class="mr-2 ml-3" *ngIf="appointment.agent_id">
          <select class="form-control mt-1" [(ngModel)]="appointment.aspect_id" (change) = "requestAppointment()">
            <option value="">全部</option>
            <option [value]="v.aspect_id" *ngFor="let v of aspectArr" >{{v.aspect_name}}</option>
          </select>
        </div>

        <!-- <div class="btn-group mb-1 mr-1" 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)="showModal()">新增招考方向容量</a>
            <div class="dropdown-divider"></div>
          </div>
        </div> -->
      </div>
    </div>
  </div>

  <div class="card card-default" *ngFor="let v of ajax.getArray(); let i = index">
    <div class="row card-header justify-content-between bg-gray">
      <div class="row ml-2 text-1-2">
        <span class="table-button" [ngClass]="{'text-success':v.appointments.length>0,'text-primary':v.appointments.length===0}">
          【{{v.agent_name}}】-{{v.aspect_name}}
        </span>
      </div>

      <div class="float-right mr-5">
        <div class="btn-group btn-group-sm 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)="editAppointment(v)">编辑容量</a>
            <div class="dropdown-divider"></div>
          </div>
        </div>
      </div>

    </div>

    <table class="table table-striped table-hover table-bordered">
      <tbody>
        <tr align="center">
          <th>#</th>
          <th>预约日期</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>容量</th>
        </tr>
        <tr *ngFor="let item of v.appointments; let j = index" align="center">
          <td>{{j+1}}</td>
          <td>{{item.appointment_date | date: 'yyyy-MM-dd'}}</td>
          <td>{{item.start_time}}</td>
          <td>{{item.end_time}}</td>
          <td>{{item.appointment_capacity}}人</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  
  
  <frame-ajax #ajax [url]="'conf/agent/aspect/appointment/all.htm'" [ajaxDataType]="'array'" [autoRequest]="true"
  [requestData]="{aspect_id: appointment.aspect_id, agent_id: appointment.agent_id}"></frame-ajax>