<div class="container">
    <div class="row">
    <div class="content-block">
      <ngx-loading [show]="loading" [config]="{fullScreenBackdrop: true}"></ngx-loading>
      <h2 class="title">開單</h2>

      <tabset>
        <tab heading="違規停車" (select)="tabSelected($event)">
          <div class="tab-pane">

            <div class="row">
              <div class="col-7">
                <div class="row">
                  <div class="col">
                    <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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.startDT1" right>
                          </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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.endDT1" right>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                </div>

                <div class="row">
                  <div class="col">

                    <div class="search-bar-out">
                      站點
                      <div class="col">
                        <select [(ngModel)]="punishQueryData.site">
                          <option value="ALL" selected="selected">ALL</option>
                          <option *ngFor="let siteInformation of siteInformationList"  [value]="siteInformation.SiteID">({{siteInformation.Area}}){{siteInformation.SiteName}}</option>
                        </select>
                      </div>

                      狀態
                    <div class="col">
                      <select [(ngModel)]="punishQueryData.status">
                        <option value="ALL" selected="selected">ALL</option>
                        <option value="未開單">未開單</option>
                        <option value="已退回">已退回</option>
                        <option value="裁決中">裁決中</option>
                        <option value="已開罰">已開罰</option>
                        <option value="不開單">不開單</option>
                      </select>
                    </div>
                  </div>

                  </div>

                </div>

                <div class="row" style="margin-top: 0.5rem;">
                  <div class="col">

                    <div class="search-bar-out">
                      違停時間
                      <div class="col">
                        <select [(ngModel)]="punishQueryData.time">
                          <option value="ALL" selected="selected">不限</option>
                          <option value="1">一分鐘</option>
                          <option value="3">三分鐘</option>
                        </select>
                      </div>

                  </div>

                  </div>

                </div>

                <div class="row">
                  <div class="col-9">

                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-primary"  (click)="doSearch('1', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '0')">
                      查詢
                      <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>


                <div class="row" style="margin-bottom: 5px;">
                  <div class="col">

                    <div class="search-bar-out">

                      <div class="col-6">

                        <button type="button" class="btn btn-warning"  (click)="getPunishEventExport('1', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '1')">
                          匯出明細
                          <i class=" fa fa-file " aria-hidden="true"></i>
                        </button>

                      </div>

                      <div class="col-3">


                      </div>
                      <div class="col-3">


                      </div>

                  </div>

                  </div>

                </div>

                <div class="row">

                  <div class="col">
                    <div class="table-responsive" style="max-height:500px; overflow: auto;">
                      <font size="4" face="Courier New" >
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th style="white-space: nowrap">操作</th>
                              <th (click)="order('ItemNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Title'"></i>
                                  序號
                                </th>
                                <th (click)="order('LightNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                                  站點
                                </th>
                            <th (click)="order('LightNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                              車牌
                            </th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              狀態</th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              車種</th>
                              <th (click)="order('VillageNo')" style="white-space: nowrap">
                                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                起始時間</th>
                                <th (click)="order('VillageNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                  結束時間</th>
                            <th style="white-space: nowrap">備註</th>

                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let punishEvent of punishEventList" [ngClass]="{'checkboxselect': punishEvent.isChecked}">
                            <td style="white-space: nowrap">
                              <button type="button" class="btn btn-sm btn-bar btn-outline-dark" data-toggle="modal" (click)="editModalShow('1', punishEvent, editModal)">
                                <i class="fa fa-pencil" aria-hidden="true"></i> 編輯
                              </button>
                              <button type="button" class="btn btn-sm btn-bar btn-outline-success" data-toggle="modal" (click)="viewModalShow('1', punishEvent, viewModal)">
                                <i class="fa fa-eye" aria-hidden="true"></i> 檢視
                              </button>
                            </td>
                            <td style="white-space: nowrap">
                              <div class="form-check form-check-inline" style="margin-right: auto; margin-left: 10px;">
                                <input class="form-check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="inlineCheckbox1{{punishEvent.Id}}" [(ngModel)] = "punishEvent.isChecked" value={{punishEvent.Id}} (change)="selectPunishEvent(punishEvent)">
                                <label style="margin-left: 1rem;" for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Id}}</label>
                              </div>
                            </td>
                            <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.SiteName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Number}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Status}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.VehicleName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.InTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.OutTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Ps}}</label></td>
                        </tr>
                        </tbody>
                      </table>
                    </font>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-5 right" *ngIf="displayReadyPunishEvent">
                <div class="row">
                  <div class="col-12">
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="camera()">
                      <i class="fa fa-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="video()">
                      <i class="fa fa-video-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="print()">
                      <i class="fa fa-print" aria-hidden="true"></i>
                    </button>
                  </div>

                </div>
<br>
                <div class="row align-items-center">
                  <div class="col-4">
                    <div class="search-bar-out">
                      事件序號
                      <div class="col">
                        <h6>{{readyPunishEvent.Id}}</h6>
                      </div>
                  </div>
                  </div>
                  <div class="col-8">
                    <div class="search-bar-out">
                      違規法條
                      <div class="col">
                        <select [(ngModel)]="LawsCodeData">
                          <option [ngValue]="laws.lawsCode" *ngFor="let laws of readyPunishEvent.Laws" >{{laws.lawsCode}}</option>
                        </select>
                      </div>
                  </div>
                  </div>
                </div>
                <br>
                <div class="row align-items-center">
                  <div class="col-3">
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1"  (click)="doCheckPunish('1', readyPunishEvent.Id, LawsCodeData)">
                      確認開單
                      <i class="fa fa-check" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length > 1"  (click)="doMuticheckPunish(this.selectPunishEventList)">
                      批次確認
                      <i class="fa fa-list" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1" (click)="doCancel('1', readyPunishEvent.Id)">
                      取消開單
                      <i class="fa fa-reply" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" data-toggle="modal" *ngIf="this.selectPunishEventList.length == 1" (click)="warningModalShow('1', readyPunishEvent, warningModal)">
                      不開單
                      <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <br>
                <div class="row">
                  <div class="col-12" id="printDiv">
                    <div class="text-center" *ngFor="let pic of readyPunishEvent.IMGList">
                      <img src="{{pic}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div>
                    <!-- <div class="text-center" *ngFor="let video of readyPunishEvent.Video">
                      <img src="{{video}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tab>
        <tab heading="區間測速" (select)="tabSelected($event)">
          <div class="tab-pane">
            <div class="row">
              <div class="col-7">
                <div class="row">
                  <div class="col">
                    <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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.startDT1" right>
                          </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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.endDT1" right>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="search-bar-out">
                      站點
                      <div class="col">
                        <select [(ngModel)]="punishQueryData.site">
                          <option value="ALL" selected="selected">ALL</option>
                          <option *ngFor="let siteInformation of siteInformationList"  [value]="siteInformation.SiteID">({{siteInformation.Area}}){{siteInformation.SiteName}}</option>
                        </select>
                      </div>

                      狀態
                    <div class="col">
                      <select [(ngModel)]="punishQueryData.status">
                        <option value="ALL" selected="selected">ALL</option>
                        <option value="未開單">未開單</option>
                        <option value="已退回">已退回</option>
                        <option value="裁決中">裁決中</option>
                        <option value="已開罰">已開罰</option>
                        <option value="不開單">不開單</option>
                      </select>
                    </div>
                  </div>
                  <div class="row" style="margin-top: 0.5rem;">
                    <div class="col-6">
                      <div class="search-bar-out">
                        速度(km/h)

                        <div class="col">
                          <input type="text" style="width: 150px;" class="form-control" id="title" name="title" [(ngModel)]="punishQueryData.speed" placeholder="速度">
                        </div>
                    </div>
                    </div>
                    <div class="col-6"></div>
                  </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-9">
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-primary"  (click)="doSearch('2', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '0')">
                      查詢
                      <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <div class="row" style="margin-bottom: 5px;">
                  <div class="col">
                    <div class="search-bar-out">
                      <div class="col-6">
                        <button type="button" class="btn btn-warning"  (click)="getPunishEventExport('2', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '1')">
                          匯出明細
                          <i class=" fa fa-file " aria-hidden="true"></i>
                        </button>

                      </div>
                      <div class="col-3">

                      </div>
                      <div class="col-3">
                      </div>
                  </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="table-responsive" style="max-height:500px; overflow: auto;">
                      <font size="4" face="Courier New" >
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th style="white-space: nowrap">操作</th>
                              <th (click)="order('ItemNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Title'"></i>
                                  序號
                                </th>
                                <th (click)="order('LightNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                                  站點
                                </th>
                            <th (click)="order('LightNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                              車牌
                            </th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              狀態</th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              車種</th>
                              <th (click)="order('VillageNo')" style="white-space: nowrap">
                                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                速度</th>
                              <th (click)="order('VillageNo')" style="white-space: nowrap">
                                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                起始時間</th>
                                <th (click)="order('VillageNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                  結束時間</th>
                            <th style="white-space: nowrap">備註</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let punishEvent of punishEventList" [ngClass]="{'checkboxselect': punishEvent.isChecked}">
                            <td style="white-space: nowrap">
                              <button type="button" class="btn btn-sm btn-bar btn-outline-dark" data-toggle="modal" (click)="editModalShow('2', punishEvent, editModal)">
                                <i class="fa fa-pencil" aria-hidden="true"></i> 編輯
                              </button>
                              <button type="button" class="btn btn-sm btn-bar btn-outline-success" data-toggle="modal" (click)="viewModalShow('2', punishEvent, viewModal)">
                                <i class="fa fa-eye" aria-hidden="true"></i> 檢視
                              </button>
                            </td>
                            <td style="white-space: nowrap">
                              <div class="form-check form-check-inline" style="margin-right: auto; margin-left: 10px;">
                                <input class="form-check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="inlineCheckbox1{{punishEvent.Id}}" [(ngModel)] = "punishEvent.isChecked" value={{punishEvent.Id}} (change)="selectPunishEvent(punishEvent)">
                                <label style="margin-left: 1rem;" for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Id}}</label>
                              </div>
                            </td>
                            <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.SiteName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Number}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Status}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.VehicleName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Speed}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.InTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.OutTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Ps}}</label></td>
                        </tr>
                        </tbody>
                      </table>
                    </font>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-5 right" *ngIf="displayReadyPunishEvent">
                <div class="row">
                  <div class="col-12">
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="camera()">
                      <i class="fa fa-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="video()">
                      <i class="fa fa-video-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="print()">
                      <i class="fa fa-print" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
<br>
                <div class="row align-items-center">
                  <div class="col-4">
                    <div class="search-bar-out">
                      事件序號
                      <div class="col">
                        <h6>{{readyPunishEvent.Id}}</h6>
                      </div>
                  </div>
                  </div>
                  <div class="col-8">
                    <div class="search-bar-out">
                      違規法條
                      <div class="col">
                        <select [(ngModel)]="LawsCodeData">
                          <option [ngValue]="laws.lawsCode" *ngFor="let laws of readyPunishEvent.Laws" >{{laws.lawsCode}}</option>
                        </select>
                      </div>
                  </div>
                  </div>
                </div>
                <br>
                <div class="row align-items-center">
                  <div class="col-3">
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1"  (click)="doCheckPunish('2', readyPunishEvent.Id, LawsCodeData)">
                      確認開單
                      <i class="fa fa-check" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length > 1"  (click)="doMuticheckPunish(this.selectPunishEventList)">
                      批次確認
                      <i class="fa fa-list" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1"  (click)="doCancel('2', readyPunishEvent.Id)">
                      取消開單
                      <i class="fa fa-reply" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" data-toggle="modal" *ngIf="this.selectPunishEventList.length == 1" (click)="warningModalShow('2', readyPunishEvent, warningModal)">
                      不開單
                      <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <br>
                <div class="row">
                  <div class="col-12" id="printDiv">
                    <div class="text-center" *ngFor="let pic of readyPunishEvent.IMGList">
                      <img src="{{pic}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div>
                    <!-- <div class="text-center" *ngFor="let video of readyPunishEvent.Video">
                      <img src="{{video}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tab>
        <tab heading="未依標線行駛_路口淨空_闖紅燈" (select)="tabSelected($event)">
          <div class="tab-pane">
            <div class="row">
              <div class="col-7">
                <div class="row">
                  <div class="col">
                    <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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.startDT1" right>
                          </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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.endDT1" right>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="search-bar-out">
                      站點
                      <div class="col">
                        <select [(ngModel)]="punishQueryData.site">
                          <option value="ALL" selected="selected">ALL</option>
                          <option *ngFor="let siteInformation of siteInformationList"  [value]="siteInformation.SiteID">({{siteInformation.Area}}){{siteInformation.SiteName}}</option>
                        </select>
                      </div>

                      狀態
                    <div class="col">
                      <select [(ngModel)]="punishQueryData.status">
                        <option value="ALL" selected="selected">ALL</option>
                        <option value="未開單">未開單</option>
                        <option value="已退回">已退回</option>
                        <option value="裁決中">裁決中</option>
                        <option value="已開罰">已開罰</option>
                        <option value="不開單">不開單</option>
                      </select>
                    </div>
                  </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-9">
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-primary"  (click)="doSearch('3', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '0')">
                      查詢
                      <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <div class="row" style="margin-bottom: 5px;">
                  <div class="col">
                    <div class="search-bar-out">
                      <div class="col-6">
                        <button type="button" class="btn btn-warning"  (click)="getPunishEventExport('3', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '1')">
                          匯出明細
                          <i class=" fa fa-file " aria-hidden="true"></i>
                        </button>
                      </div>
                      <div class="col-3">

                      </div>
                      <div class="col-3">
                      </div>
                  </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="table-responsive" style="max-height:500px; overflow: auto;">
                      <font size="4" face="Courier New" >
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th style="white-space: nowrap">操作</th>
                              <th (click)="order('ItemNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Title'"></i>
                                  序號
                                </th>
                                <th (click)="order('LightNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                                  站點
                                </th>
                            <th (click)="order('LightNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                              車牌
                            </th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              狀態</th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              車種</th>
                              <th (click)="order('VillageNo')" style="white-space: nowrap">
                                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                起始時間</th>
                                <th (click)="order('VillageNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                  結束時間</th>
                            <th style="white-space: nowrap">備註</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let punishEvent of punishEventList" [ngClass]="{'checkboxselect': punishEvent.isChecked}">
                            <td style="white-space: nowrap">
                              <!-- <button type="button" class="btn btn-sm btn-bar btn-outline-info" (click)="goPunishEvent(punishEvent)">
                                <i class="fa fa-check" aria-hidden="true"></i> 開單
                              </button> -->
                              <button type="button" class="btn btn-sm btn-bar btn-outline-dark" data-toggle="modal" (click)="editModalShow('3', punishEvent, editModal)">
                                <i class="fa fa-pencil" aria-hidden="true"></i> 編輯
                              </button>
                              <button type="button" class="btn btn-sm btn-bar btn-outline-success" data-toggle="modal" (click)="viewModalShow('3', punishEvent, viewModal)">
                                <i class="fa fa-eye" aria-hidden="true"></i> 檢視
                              </button>
                            </td>
                            <td style="white-space: nowrap">
                              <div class="form-check form-check-inline" style="margin-right: auto; margin-left: 10px;">
                                <input class="form-check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="inlineCheckbox1{{punishEvent.Id}}" [(ngModel)] = "punishEvent.isChecked" value={{punishEvent.Id}} (change)="selectPunishEvent(punishEvent)">
                                <label style="margin-left: 1rem;" for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Id}}</label>
                              </div>
                            </td>
                            <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.SiteName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Number}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Status}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.VehicleName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.InTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.OutTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Ps}}</label></td>
                        </tr>
                        </tbody>
                      </table>
                    </font>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-5 right" *ngIf="displayReadyPunishEvent">
                <div class="row">
                  <div class="col-12">
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="camera()">
                      <i class="fa fa-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="video()">
                      <i class="fa fa-video-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="print()">
                      <i class="fa fa-print" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
<br>
                <div class="row align-items-center">
                  <div class="col-4">
                    <div class="search-bar-out">
                      事件序號
                      <div class="col">
                        <h6>{{readyPunishEvent.Id}}</h6>
                      </div>
                  </div>
                  </div>
                  <div class="col-8">
                    <div class="search-bar-out">
                      違規法條
                      <div class="col">
                        <select [(ngModel)]="LawsCodeData">
                          <option [ngValue]="laws.lawsCode" *ngFor="let laws of readyPunishEvent.Laws" >{{laws.lawsCode}}</option>
                        </select>
                      </div>
                  </div>
                  </div>
                </div>
                <br>
                <div class="row align-items-center">
                  <div class="col-3">
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1"  (click)="doCheckPunish('3', readyPunishEvent.Id, LawsCodeData)">
                      確認開單
                      <i class="fa fa-check" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length > 1"  (click)="doMuticheckPunish(this.selectPunishEventList)">
                      批次確認
                      <i class="fa fa-list" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1"  (click)="doCancel('3', readyPunishEvent.Id)">
                      取消開單
                      <i class="fa fa-reply" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" data-toggle="modal" *ngIf="this.selectPunishEventList.length == 1" (click)="warningModalShow('3', readyPunishEvent, warningModal)">
                      不開單
                      <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <br>
                <div class="row">
                  <div class="col-12" id="printDiv">
                    <div class="text-center" *ngFor="let pic of readyPunishEvent.IMGList">
                      <img src="{{pic}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div>
                    <!-- <div class="text-center" *ngFor="let video of readyPunishEvent.Video">
                      <img src="{{video}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tab>
<!--        <tab heading="未保持路口淨空" (select)="tabSelected($event)">-->
<!--          <div class="tab-pane">-->
<!--            <div class="row">-->
<!--              <div class="col-7">-->
<!--                <div class="row">-->
<!--                  <div class="col">-->
<!--                    <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 class="col-6">-->
<!--                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.startDT1" right>-->
<!--                          </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 class="col-6">-->
<!--                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.endDT1" right>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                </div>-->
<!--                <div class="row">-->
<!--                  <div class="col">-->
<!--                    <div class="search-bar-out">-->
<!--                      站點-->
<!--                      <div class="col">-->
<!--                        <select [(ngModel)]="punishQueryData.site">-->
<!--                          <option value="ALL" selected="selected">ALL</option>-->
<!--                          <option *ngFor="let siteInformation of siteInformationList"  [value]="siteInformation.SiteID">({{siteInformation.Area}}){{siteInformation.SiteName}}</option>-->
<!--                        </select>-->
<!--                      </div>-->

<!--                      狀態-->
<!--                    <div class="col">-->
<!--                      <select [(ngModel)]="punishQueryData.status">-->
<!--                        <option value="ALL" selected="selected">ALL</option>-->
<!--                        <option value="未開單">未開單</option>-->
<!--                        <option value="已退回">已退回</option>-->
<!--                        <option value="裁決中">裁決中</option>-->
<!--                        <option value="已開罰">已開罰</option>-->
<!--                        <option value="不開單">不開單</option>-->
<!--                      </select>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="row">-->
<!--                  <div class="col-9">-->

<!--                  </div>-->
<!--                  <div class="col-3">-->
<!--                    <button type="button" class="btn btn-primary"  (click)="doSearch('4', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '0')">-->
<!--                      查詢-->
<!--                      <i class="fa fa-search" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="row" style="margin-bottom: 5px;">-->
<!--                  <div class="col">-->
<!--                    <div class="search-bar-out">-->
<!--                      <div class="col-6">-->
<!--                        <button type="button" class="btn btn-success"  (click)="doMuticheckPunish(this.selectPunishEventList)">-->
<!--                          批次確認-->
<!--                          <i class="fa fa-list" aria-hidden="true"></i>-->
<!--                        </button>-->
<!--                      </div>-->
<!--                      <div class="col-3">-->
<!--                        <button type="button" class="btn btn-warning"  (click)="getPunishEventExport('4', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '1')">-->
<!--                          匯出明細-->
<!--                          <i class=" fa fa-file " aria-hidden="true"></i>-->
<!--                        </button>-->
<!--                      </div>-->
<!--                      <div class="col-3">-->

<!--                      </div>-->
<!--                  </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="row">-->
<!--                  <div class="col">-->
<!--                    <div class="table-responsive" style="max-height:500px; overflow: auto;">-->
<!--                      <font size="4" face="Courier New" >-->
<!--                      <table class="table table-hover">-->
<!--                        <thead>-->
<!--                          <tr>-->
<!--                            <th style="white-space: nowrap">操作</th>-->
<!--                              <th (click)="order('ItemNo')" style="white-space: nowrap">-->
<!--                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Title'"></i>-->
<!--                                  序號-->
<!--                                </th>-->
<!--                                <th (click)="order('LightNo')" style="white-space: nowrap">-->
<!--                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>-->
<!--                                  站點-->
<!--                                </th>-->
<!--                            <th (click)="order('LightNo')" style="white-space: nowrap">-->
<!--                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>-->
<!--                              車牌-->
<!--                            </th>-->
<!--                            <th (click)="order('VillageNo')" style="white-space: nowrap">-->
<!--                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>-->
<!--                              狀態</th>-->
<!--                            <th (click)="order('VillageNo')" style="white-space: nowrap">-->
<!--                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>-->
<!--                              車種</th>-->
<!--                              <th (click)="order('VillageNo')" style="white-space: nowrap">-->
<!--                                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>-->
<!--                                起始時間</th>-->
<!--                                <th (click)="order('VillageNo')" style="white-space: nowrap">-->
<!--                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>-->
<!--                                  結束時間</th>-->
<!--                            <th style="white-space: nowrap">備註</th>-->

<!--                          </tr>-->
<!--                        </thead>-->
<!--                        <tbody>-->
<!--                          <tr *ngFor="let punishEvent of punishEventList" [ngClass]="{'checkboxselect': punishEvent.isChecked}">-->
<!--                            <td style="white-space: nowrap">-->
<!--                              <button type="button" class="btn btn-sm btn-bar btn-outline-dark" data-toggle="modal" (click)="editModalShow('4', punishEvent, editModal)">-->
<!--                                <i class="fa fa-pencil" aria-hidden="true"></i> 編輯-->
<!--                              </button>-->
<!--                              <button type="button" class="btn btn-sm btn-bar btn-outline-success" data-toggle="modal" (click)="viewModalShow('4', punishEvent, viewModal)">-->
<!--                                <i class="fa fa-eye" aria-hidden="true"></i> 檢視-->
<!--                              </button>-->
<!--                            </td>-->
<!--                            <td style="white-space: nowrap">-->
<!--                              <div class="form-check form-check-inline" style="margin-right: auto; margin-left: 10px;">-->
<!--                                <input class="form-check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="inlineCheckbox1{{punishEvent.Id}}" [(ngModel)] = "punishEvent.isChecked" value={{punishEvent.Id}} (change)="selectPunishEvent(punishEvent)">-->
<!--                                <label style="margin-left: 1rem;" for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Id}}</label>-->
<!--                              </div>-->
<!--                            </td>-->
<!--                            <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.SiteName}}</label></td>-->
<!--                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Number}}</label></td>-->
<!--                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Status}}</label></td>-->
<!--                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.VehicleName}}</label></td>-->
<!--                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.InTime}}</label></td>-->
<!--                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.OutTime}}</label></td>-->
<!--                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Ps}}</label></td>-->
<!--                        </tr>-->
<!--                        </tbody>-->
<!--                      </table>-->
<!--                    </font>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="col-5 right" *ngIf="displayReadyPunishEvent">-->
<!--                <div class="row">-->
<!--                  <div class="col-12">-->
<!--                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="camera()">-->
<!--                      <i class="fa fa-camera" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="video()">-->
<!--                      <i class="fa fa-video-camera" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="print()">-->
<!--                      <i class="fa fa-print" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                </div>-->
<!--<br>-->
<!--                <div class="row align-items-center">-->
<!--                  <div class="col-4">-->
<!--                    <div class="search-bar-out">-->
<!--                      事件序號-->
<!--                      <div class="col">-->
<!--                        <h6>{{readyPunishEvent.Id}}</h6>-->
<!--                      </div>-->
<!--                  </div>-->
<!--                  </div>-->
<!--                  <div class="col-8">-->
<!--                    <div class="search-bar-out">-->
<!--                      違規法條-->
<!--                      <div class="col">-->
<!--                        <select [(ngModel)]="LawsCodeData">-->
<!--                          <option [ngValue]="laws.lawsCode" *ngFor="let laws of readyPunishEvent.Laws" >{{laws.lawsCode}}</option>-->
<!--                        </select>-->
<!--                      </div>-->
<!--                  </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <br>-->
<!--                <div class="row align-items-center">-->
<!--                  <div class="col-3">-->

<!--                  </div>-->
<!--                  <div class="col-3">-->
<!--                    <button type="button" class="btn btn-success"  (click)="doCheckPunish('4', readyPunishEvent.Id, LawsCodeData)">-->
<!--                      確認開單-->
<!--                      <i class="fa fa-check" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                  <div class="col-3">-->
<!--                    <button type="button" class="btn btn-success"  (click)="doCancel('4', readyPunishEvent.Id)">-->
<!--                      取消開單-->
<!--                      <i class="fa fa-reply" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                  <div class="col-3">-->
<!--                    <button type="button" class="btn btn-success" data-toggle="modal" (click)="warningModalShow('4', readyPunishEvent, warningModal)">-->
<!--                      不開單-->
<!--                      <i class="fa fa-times" aria-hidden="true"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <br>-->
<!--                <div class="row">-->
<!--                  <div class="col-12" id="printDiv">-->
<!--                    <div class="text-center" *ngFor="let pic of readyPunishEvent.IMGList">-->
<!--                      <img src="{{pic}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">-->
<!--                    </div>-->
<!--                    <div class="text-center" *ngFor="let video of readyPunishEvent.Video">-->
<!--                      <img src="{{video}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </tab>-->
        <tab heading="大貨車禁行" (select)="tabSelected($event)">
          <div class="tab-pane">
            <div class="row">
              <div class="col-7">
                <div class="row">
                  <div class="col">
                    <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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.startDT1" right>
                          </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 class="col-6">
                            <input type="time" id="appt" name="appt" required [(ngModel)]="this.endDT1" right>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="search-bar-out">
                      站點
                      <div class="col">
                        <select [(ngModel)]="punishQueryData.site">
                          <option value="ALL" selected="selected">ALL</option>
                          <option *ngFor="let siteInformation of siteInformationList"  [value]="siteInformation.SiteID">({{siteInformation.Area}}){{siteInformation.SiteName}}</option>
                        </select>
                      </div>

                      狀態
                    <div class="col">
                      <select [(ngModel)]="punishQueryData.status">
                        <option value="ALL" selected="selected">ALL</option>
                        <option value="未開單">未開單</option>
                        <option value="已退回">已退回</option>
                        <option value="裁決中">裁決中</option>
                        <option value="已開罰">已開罰</option>
                        <option value="不開單">不開單</option>
                      </select>
                    </div>
                  </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-9">

                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-primary"  (click)="doSearch('6', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '0')">
                      查詢
                      <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <div class="row" style="margin-bottom: 5px;">
                  <div class="col">
                    <div class="search-bar-out">
                      <div class="col-6">
                        <button type="button" class="btn btn-warning"  (click)="getPunishEventExport('6', punishQueryData.site, punishQueryData.status, punishQueryData.time, punishQueryData.speed, '1')">
                          匯出明細
                          <i class=" fa fa-file " aria-hidden="true"></i>
                        </button>
                      </div>
                      <div class="col-3">

                      </div>
                      <div class="col-3">
                      </div>
                  </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="table-responsive" style="max-height:500px; overflow: auto;">
                      <font size="4" face="Courier New" >
                      <table class="table table-hover">
                        <thead>
                          <tr>
                            <th style="white-space: nowrap">操作</th>
                              <th (click)="order('ItemNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Title'"></i>
                                  序號
                                </th>
                                <th (click)="order('LightNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                                  站點
                                </th>
                            <th (click)="order('LightNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'Content'"></i>
                              車牌
                            </th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              狀態</th>
                            <th (click)="order('VillageNo')" style="white-space: nowrap">
                              <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                              車種</th>
                              <th (click)="order('VillageNo')" style="white-space: nowrap">
                                <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                起始時間</th>
                                <th (click)="order('VillageNo')" style="white-space: nowrap">
                                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAsc, 'desc icon-arrow-down-circle': !IsAsc}" *ngIf="this.item === 'StartOn'"></i>
                                  結束時間</th>
                            <th style="white-space: nowrap">備註</th>

                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let punishEvent of punishEventList" [ngClass]="{'checkboxselect': punishEvent.isChecked}">
                            <td style="white-space: nowrap">
                              <button type="button" class="btn btn-sm btn-bar btn-outline-dark" data-toggle="modal" (click)="editModalShow('6', punishEvent, editModal)">
                                <i class="fa fa-pencil" aria-hidden="true"></i> 編輯
                              </button>
                              <button type="button" class="btn btn-sm btn-bar btn-outline-success" data-toggle="modal" (click)="viewModalShow('6', punishEvent, viewModal)">
                                <i class="fa fa-eye" aria-hidden="true"></i> 檢視
                              </button>
                            </td>
                            <td style="white-space: nowrap">
                              <div class="form-check form-check-inline" style="margin-right: auto; margin-left: 10px;">
                                <input class="form-check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="inlineCheckbox1{{punishEvent.Id}}" [(ngModel)] = "punishEvent.isChecked" value={{punishEvent.Id}} (change)="selectPunishEvent(punishEvent)">
                                <label style="margin-left: 1rem;" for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Id}}</label>
                              </div>
                            </td>
                            <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.SiteName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Number}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Status}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.VehicleName}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.InTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.OutTime}}</label></td>
                          <td style="white-space: nowrap"><label for="inlineCheckbox1{{punishEvent.Id}}">{{punishEvent.Ps}}</label></td>
                        </tr>
                        </tbody>
                      </table>
                    </font>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-5 right" *ngIf="displayReadyPunishEvent">
                <div class="row">
                  <div class="col-12">
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="camera()">
                      <i class="fa fa-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="video()">
                      <i class="fa fa-video-camera" aria-hidden="true"></i>
                    </button>
                    <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="print()">
                      <i class="fa fa-print" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
<br>
                <div class="row align-items-center">
                  <div class="col-4">
                    <div class="search-bar-out">
                      事件序號
                      <div class="col">
                        <h6>{{readyPunishEvent.Id}}</h6>
                      </div>
                  </div>
                  </div>
                  <div class="col-8">
                    <div class="search-bar-out">
                      違規法條
                      <div class="col">
                        <select [(ngModel)]="LawsCodeData">
                          <option [ngValue]="laws.lawsCode" *ngFor="let laws of readyPunishEvent.Laws" >{{laws.lawsCode}}</option>
                        </select>
                      </div>
                  </div>
                  </div>
                </div>
                <br>
                <div class="row align-items-center">
                  <div class="col-3">

                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1" (click)="doCheckPunish('6', readyPunishEvent.Id, LawsCodeData)">
                      確認開單
                      <i class="fa fa-check" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length > 1"  (click)="doMuticheckPunish(this.selectPunishEventList)">
                      批次確認
                      <i class="fa fa-list" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" *ngIf="this.selectPunishEventList.length == 1"  (click)="doCancel('6', readyPunishEvent.Id)">
                      取消開單
                      <i class="fa fa-reply" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="col-3">
                    <button type="button" class="btn btn-success" data-toggle="modal" *ngIf="this.selectPunishEventList.length == 1" (click)="warningModalShow('6', readyPunishEvent, warningModal)">
                      不開單
                      <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <br>
                <div class="row">
                  <div class="col-12" id="printDiv">
                    <div class="text-center" *ngFor="let pic of readyPunishEvent.IMGList">
                      <img src="{{pic}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div>
                    <!-- <div class="text-center" *ngFor="let video of readyPunishEvent.Video">
                      <img src="{{video}}" class="img-fluid" style="border:2px #ccc solid;padding:10px;" alt="...">
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tab>
      </tabset>
<br>
    </div>
  </div>
</div>



<!-- Modal -->
<div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-danger" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">不開單</h4>
        <button type="button" class="close" (click)="warningModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col">
            <div class="search-bar-out">
              不開單原因
              <div class="col">
                <select [(ngModel)]="NotPunishReasonData">
                  <option [value]="reason.NotPunishReason" *ngFor="let reason of reasonPageList">{{reason.NotPunishReason}}</option>
                </select>
              </div>
          </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-submit" (click)="doNopunish(Nopunish.eventType, Nopunish.Id, NotPunishReasonData, warningModal)">確認</button>
        <button type="button" class="btn btn-sm btn-danger" (click)="warningModal.hide()">取消</button>
      </div>
    </div>
  </div>

</div>


<!-- Modal -->
<div bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-danger" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">編輯車牌、車種</h4>
        <button type="button" class="close" (click)="editModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col">
            <div class="form-group">
              <label for="area">序號</label>
              <input type="text" class="form-control" id="punishEditId" name="punishEditId" readonly #punishEditId="ngModel" [(ngModel)]="PunishEdit.Id"
                required placeholder="1">
            </div>
            <div class="form-group">
              <label for="area">車種</label>
              <input type="text" class="form-control" id="punishEditVehicleName" name="punishEditVehicleName" #punishEditVehicleName="ngModel" [(ngModel)]="PunishEdit.VehicleType"
                required placeholder="車種">
            </div>
            <div class="form-group">
              <label for="area">車牌</label>
              <input type="text" class="form-control" id="punishEditVehicleNumber" name="punishEditVehicleNumber" #punishEditVehicleNumber="ngModel" [(ngModel)]="PunishEdit.Number"
                required placeholder="車牌">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-submit" (click)="doEventVehicle(PunishEdit.eventType, PunishEdit.Id, PunishEdit.VehicleType, PunishEdit.Number, editModal)">確認</button>
        <button type="button" class="btn btn-sm btn-danger" (click)="editModal.hide()">取消</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>


<!-- Modal -->
<div bsModal #viewModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-danger" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">檢視事件</h4>
        <button type="button" class="close" (click)="viewModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col">
            <div class="form-group">
              <label for="area">序號</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.Id"
                required placeholder="1">
            </div>
            <div class="form-group">
              <label for="area">站點</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.SiteName"
                required placeholder="(中壢區)中壢火車站">
            </div>
            <div class="form-group">
              <label for="area">車牌</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.Number"
                required placeholder="車牌">
            </div>
            <div class="form-group">
              <label for="area">車種</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.VehicleName"
                required placeholder="車種">
            </div>
            <div class="form-group">
              <label for="area">起始時間</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.InTime"
                required placeholder="起始時間">
            </div>
            <div class="form-group">
              <label for="area">結束時間</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.OutTime"
                required placeholder="結束時間">
            </div>
            <div class="form-group">
              <label for="area">備註</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.Ps"
                required placeholder="備註">
            </div>
            <div class="form-group">
              <label for="area">狀態</label>
              <input type="text" class="form-control" id="area" name="area" readonly #area="ngModel" [(ngModel)]="PunishView.Status"
                required placeholder="狀態">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-danger" (click)="viewModal.hide()">取消</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>



