<div class="container">
  <div class="row">
    <div class="content-block">
      <ngx-loading [show]="loading"[config]="{fullScreenBackdrop: true}"></ngx-loading>
      <h2 class="title">行政區管理</h2>
      <button type="button" class="btn btn-sm btn-bar btn-primary" *ngIf="loginRole == setRole" routerLink="/set/set001-create-site"
        routerLinkActive="active">新增行政區站點</button>
      <div class="right">
        <input type="search" class="form-group" [(ngModel)]="this.tableQueryData.Term" placeholder="查詢行政區/站點">
        <button type="submit" class="btn btn-sm btn-bar btn-outline-primary" (click)="doSearch()">
          <i class="fa fa-search" aria-hidden="true"></i>
        </button>
        <button type="submit" class="btn btn-sm btn-outline-danger" (click)="clearSearch()">
          <i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
                <th (click)="order('Id')">
                    <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Id'"></i>
                    項次
                  </th>
              <th (click)="order('Country')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Country'"></i>
                城市
              </th>
              <th (click)="order('Area')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Area'"></i>
                行政區</th>
                <th (click)="order('SiteID')">
                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'SiteID'"></i>
                  站點ID</th>
              <th (click)="order('SiteName')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'SiteName'"></i>
                站點</th>
              <th (click)="order('EventType')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'EventType'"></i>
                事件類型</th>
              <th (click)="order('CompanyName')">
                    <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'CompanyName'"></i>
                    負責廠商</th>
                <th (click)="order('Laws')">
                    <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Laws'"></i>
                    法規</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody *ngIf="siteInformationPageList.length > 0">
            <tr *ngFor="let siteInformationData of siteInformationPageList">
                <td>{{siteInformationData.Id}}</td>
              <td>{{siteInformationData.Country}}</td>
              <td>{{siteInformationData.Area}}</td>
              <td>{{siteInformationData.SiteID}}</td>
              <td>{{siteInformationData.SiteName}}</td>
              <td>{{siteInformationData.EventType}}</td>
              <td>{{siteInformationData.CompanyName}}</td>
              <td>{{siteInformationData.Laws}}</td>
              <td>
                <button type="button" class="btn btn-sm btn-bar btn-outline-info" (click)="goDetail(siteInformationData)">
                  <i class="fa fa-eye" aria-hidden="true"></i> 詳情
                </button>
                <button type="button" class="btn btn-sm btn-bar btn-outline-warning" *ngIf="loginRole == setRole" (click)="goEdit(siteInformationData)">
                  <i class="fa fa-pencil" aria-hidden="true"></i> 編輯
                </button>
                <button type="button" class="btn btn-sm btn-bar btn-outline-danger" *ngIf="loginRole == setRole" (click)="deleteSiteInformationData(siteInformationData.Id)">
                  <i class="fa fa-trash" aria-hidden="true"></i> 刪除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="noData" *ngIf="siteInformationPageList.length == 0">
        暫無資料
      </div>
      <div *ngIf="siteInformationPageList.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>
