<div class="container">

  <div class="row">
    <div class="content-block">
      <ngx-loading [show]="loading" [config]="{fullScreenBackdrop: true}"></ngx-loading>
      <h2 class="title">設備故障統計表</h2>
      <div class="card">
        <div class="card-header">
        </div>
        <div class="card-body">
          <div class="row" style="margin-top: 50px;" *ngFor="let rownums of siteList; let i = index">
            <div class="col-4" *ngFor="let rows of rownums; let j = index">
              <div  style="max-height:300px; overflow: auto;">
                站點 : {{rows[0].Area}}
                <div style="margin-left: 10px; margin-right: 10px;">
                  <input class="check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="all{{i}}{{j}}" [(ngModel)] = "rows.allIsChecked" (change)="selectALL(rows.allIsChecked, rows[0], i, j)" >
                  <label class="check-label" for="all{{i}}{{j}}">
                    全選
                  </label>
            </div>
                  <div style="margin-left: 10px; margin-right: 10px;" *ngFor="let row of rows">
                      <input class="check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="flexCheckDefault{{row.Id}}" [(ngModel)] = "row.isChecked" value= {{row.Id}} >
                      <label class="check-label" for="flexCheckDefault{{row.Id}}">
                        {{row.SiteName}}
                      </label>
                </div>
                </div>
            </div>
          </div>
        </div>
          <br>
          <div class="row">
            <div class="col" style="margin-left: 20px;">
              <div class="search-bar-out">
                查詢日期
                <div class="col-sm search-bar">
                  <div class="row">
                    <div class="col-6">
                      <my-date-picker name="startDate" [options]="myDatePickerOptions" [(ngModel)]="this.startDT" required></my-date-picker>
                    </div>
                  </div>
                </div>
                至
                <div class="col-sm search-bar">
                  <div class="row">
                    <div class="col-6">
                      <my-date-picker name="endDate" [options]="myDatePickerOptions" [(ngModel)]="this.endDT" required></my-date-picker>
                    </div>
                  </div>
                </div>
            </div>
            </div>
          </div>
          <div class="row">
            <div class="col" style="margin-left: 20px;">
              <div class="search-bar-out">
                查詢時間(0~24)
                <div class="col-sm search-bar">
                  <div class="row">
                    <div class="col-6">
                      <input type="number" min="0" max="24" id="appt" name="appt" required [(ngModel)]="this.startDT1" right>
                      至
                      <input type="number" min="0" max="24" id="appt" name="appt" required [(ngModel)]="this.endDT1" right>
                    </div>
                  </div>
                </div>

                <div class="col-sm search-bar">
                  <div class="row">
                    <div class="col-6">
                      <!-- <input type="number" min="0" max="24" id="appt" name="appt" required [(ngModel)]="this.endDT1" right> -->
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-5">

          </div>
          <div class="col-7">
            <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>
                        時間</th>
                      <th>
                        站點ID</th>
                      <th>
                        站點名稱</th>
                      <th>
                        廠商代碼</th>
                        <th>
                          設備類型</th>
                          <th>
                            設備ID</th>
                            <th>
                              訊息</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let malfunction of ReportMalfunctionList">
                      <td>{{malfunction.Time}}</td>
                      <td>{{malfunction.SiteId}}</td>
                      <td>{{malfunction.SiteName}}</td>
                      <td>{{malfunction.CompanyCode}}</td>
                      <td>{{malfunction.DeviceType}}</td>
                      <td>{{malfunction.DeviceID}}</td>
                      <td>{{malfunction.Message}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="noData" *ngIf="ReportMalfunctionList.length == 0">
                暫無資料
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>




