<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">
                <div class="search-bar-out">
                  違規類型
                <div class="col">
                  <select [(ngModel)]="eventTypeId" (change)="onSelectEventTypeIdChange($event.target.value)">
                    <option value="" selected="selected">請選擇違規類型</option>
                    <option value="1">違規停車</option>
                    <option value="2">區間測速</option>
                    <option value="34">未依標線行駛_路口淨空_闖紅燈</option>
                    <option value="6">大貨車禁行</option>
                  </select>
                </div>
              </div>
          </div>
          <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;">
                站點 :
                <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.Area}}){{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" *ngIf="eventTypeId === '1'">
            <div class="col">
              <div class="table-responsive" style="max-height:500px; overflow: auto;">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>
                        時間</th>
                      <th>
                        汽車</th>
                      <th>
                        機車</th>
                      <th>
                        計程車</th>
                        <th>
                          公車</th>
                          <th>
                            無車牌</th>
                            <th>
                              有車牌</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let Item of ReportEventType1List">
                      <td>{{Item.DateTime}}</td>
                      <td>{{Item.CarCount}}</td>
                      <td>{{Item.MotorcycleCount}}</td>
                      <td>{{Item.TaxiCount}}</td>
                      <td>{{Item.BusCount}}</td>
                      <td>{{Item.HasNoNumber}}</td>
                      <td>{{Item.HasNumber}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="noData" *ngIf="ReportEventType1List.length == 0">
                暫無資料
              </div>
            </div>
          </div>
          <div class="row" *ngIf="eventTypeId === '2'">
            <div class="col">
              <div class="table-responsive" style="max-height:500px; overflow: auto;">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>
                        時速</th>
                      <th>
                        違規車輛</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let Item of ReportEventType2List">
                      <td>{{Item.Speed}}</td>
                      <td>{{Item.Count}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="noData" *ngIf="ReportEventType2List.length == 0">
                暫無資料
              </div>
            </div>
          </div>
          <div class="row" *ngIf="eventTypeId === '34'">
            <div class="col">
              <div class="table-responsive" style="max-height:500px; overflow: auto;">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>
                        汽車</th>
                      <th>
                        貨車</th>
                        <th>
                        大客車</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let Item of ReportEventType34List">
                      <td>{{Item.CarCount}}</td>
                      <td>{{Item.TruckCount}}</td>
                      <td>{{Item.CoachCount}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="noData" *ngIf="ReportEventType34List.length == 0">
                暫無資料
              </div>
            </div>
          </div>
          <div class="row" *ngIf="eventTypeId === '6'">
            <div class="col">
              <div class="table-responsive" style="max-height:500px; overflow: auto;">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>
                        噸數</th>
                      <th>
                        違規車輛</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let Item of ReportEventType6List">
                      <td>{{Item.Ton}}</td>
                      <td>{{Item.Count}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="noData" *ngIf="ReportEventType6List.length == 0">
                暫無資料
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>




