<div class="container">
  <div class="row">
    <div class="content-block">
      <ngx-loading [show]="loading" [config]="{fullScreenBackdrop: true}"></ngx-loading>
      <h2 class="title">API 表格清單</h2>
      <div class="card">
        <div class="card-header">
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-3">
              <div class="search-bar-out">
                表格名稱
              <div class="col">
                <select class="form-control" [(ngModel)]="tycgTableName" name="tycgTableName">
                  <option value="" selected="selected">請選擇表格名稱</option>
                  <option [ngValue]="tycgTableName.LogName" *ngFor="let tycgTableName of tycgTableNameList" >{{tycgTableName.APIName}}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-9">
            <button type="button" class="btn btn-primary"  (click)="doSearch()">
              查詢
              <i class="fa fa-search" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-warning"  (click)="doSearchExport()">
              匯出
              <i class=" fa fa-file " aria-hidden="true"></i>
            </button>
          </div>
          </div>
      <br>
          <div class="row">
            <div class="col">
              <div class="table-responsive" style="max-height:500px; overflow: auto;">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>
                        Id</th>
                      <th>
                        Time</th>
                      <th>
                        IP</th>
                        <th>
                          API</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let apiItem of apiDataList">
                      <td>{{apiItem.Id}}</td>
                      <td>{{apiItem.Time}}</td>
                      <td>{{apiItem.ip}}</td>
                      <td>{{apiItem.api}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="noData" *ngIf="apiDataList.length == 0">
                暫無資料
              </div>
              <div *ngIf="apiDataList.length > 0" class="pagination_center">
                <div class="pagination">
                  <span *ngFor="let page of pageLinks;">
                    <a *ngIf="page.pageNo!==this.tableQueryData.CurrentPage" (click)="onPageChange($event,page.pageNo)">{{page.text}}</a>
                    <a *ngIf="page.pageNo===this.tableQueryData.CurrentPage" class="active">{{page.text}}</a>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




