<div class="panel panel-default">
  <div>
    <!--标题-->
    <div class="panel-title">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">疫情防控</li>
          <li class="breadcrumb-item active" aria-current="page">报备表管理</li>
        </ol>
      </nav>
    </div>
  </div>

  <div class="panel-body ml-sm " [hidden]="editShowType=='only'">
    <!--查询条件-->
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only'">
      <div class="col-lg-12">
        <form (ngSubmit)="framePager.goSearch()" class="form-inline">
          <table>
            <tr>
              <td>
          <div class="input-group mr-1 input-group-sm">
              <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;批次：</label>
              <flex-select [allowClear]="true" [(items)]="timeList" optionValueField="year_code"
              optionTextField="year_code" [(ngModel)]="query.year_code"  placeholder="请选择"
              [ngModelOptions]="{standalone: true}" width="200" noResultsFound="无数据">
            </flex-select>

             
        </div>
      </td>
     
        <td>
            <div class="input-group mr-1 input-group-sm">
                <label>当前是否已在考点所在城市：</label>
                <select class="custom-select" [ngModelOptions]="{standalone: true}"  [(ngModel)]="query.already_in_city"  style="width:160px;">
                    <option value="">请选择</option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                  </select>

              </div>
        </td>

        
        </tr>
        
        <tr>
            <td>
                <!-- 支持排序 -->
                <div class="input-group mr-1 input-group-sm">
                  <label>关键字：</label>
                  <input name="query" [(ngModel)]="query.query" class="input-sm form-control" type="text" value="" style="width:90px"
                    maxlength="64" placeholder="请输入查询关键字">
                </div>
              </td>

           
            <td>
                <div class="input-group mr-1 input-group-sm">
                    <label>是否处于隔离或居家观察中：</label>
                    <select class="custom-select" [ngModelOptions]="{standalone: true}" [(ngModel)]="query.is_quarantine" style="width:160px;">
                        <option value="">请选择</option>
                        <option value="是">是</option>
                        <option value="否">否</option>
                      </select>
    
                  </div>
            </td>

          </tr>
          <tr>
            <td colspan="2">
              <div class="input-group mr-1 input-group-sm">
                  <label>是否有中、高或者低风险地区所在市（县、区）旅居史：</label>
                  <select class="custom-select" [ngModelOptions]="{standalone: true}" [(ngModel)]="query.is_high_risk"  style="width:160px;">
                      <option value="">请选择</option>
                      <option value="是">是</option>
                      <option value="否">否</option>
                    </select>
  
                </div>
          </td>
          </tr>
          <tr>
            <td>
              <div class="input-group mr-1 input-group-sm">
                  <label>报考考区：</label>
                  <flex-select 
                      [allowClear]="true"
                      [(items)] = "examAgentArray"
                      optionValueField="id"
                      optionTextField="org_name"
                      [(ngModel)]="query.enrol_agent_id"
                      placeholder="请选择"
                      [ngModelOptions]="{standalone: true}"
                      width = "185"
                      noResultsFound = "无数据"
                      >
                </flex-select>
  
                </div>
          </td>

          <td>
          <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1">
            <i class="fa fa-search"></i> 查询</button>
            <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="reset()">
              <i class="fa fa-undo"></i> 重置</button>
            </td>
            </tr>
            </table>
            </form>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="row mb-2" [hidden]="editShowType=='only'">
      <div class="col-lg-12">
        <div class="pull-left" style="text-align: right;">
          <!--
          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
            (click)="goEdit(editTemplateModal,'only')" title="添加">
            <i class="fa fa-plus"></i> 添加</button>
          <button class="btn mr-1 btn-sm bg-danger" (click)="delete()" data-toggle="tooltip" data-placement="left"
            title="删除">
            <i class="fa fa-trash"> 删除</i>
          </button>
-->
          <button class="btn btn-primary mr-1 btn-sm" (click)="export()" data-toggle="tooltip" data-placement="left"
          title="导出">
          <i class="fa icon-cloud-download"> 导出</i>
        </button>
       
        <button class="btn btn-primary mr-1 btn-sm" (click)="exportHigh()" data-toggle="tooltip" data-placement="left"
        title="导出当前所在地区、当抵达考区地区、计划或去过的地区，存在中高风险的考生。">
        <i class="fa icon-cloud-download"> 导出考生有中高风险史的考生</i>
      </button>

        </div>

      </div>
    </div>

    <!--表格-->
    <div class="row" [hidden]="editShowType=='only'">
      <div class="col-sm-12 ml-0">
        <table class="table table-sm table-striped table-hover table-bordered bg-white">
          <thead>
            <tr>
              <th>
                <div class="checkbox c-checkbox">
                  <label>
                    <input type="checkbox" (change)="framePager.checkedMasterToggle($event)" />
                    <span class="fa fa-check"></span>
                  </label>
                </div>
              </th>
              <th>序号</th>
              <th align="center">批次</th>
              <th>姓名</th>
              <th align="center">准考证号</th>
              <th align="center">手机号码</th>
              <th align="center" style="width: 80px;">前是否已在考点所在城市</th>
              <th>当前所在地区省（市、自治区）</th>
              <th>当前所在地区市</th>
              <th>当前所在地区区（县）</th>
              <th>当前所在地区详细地址</th>
              <th align="center" style="width: 80px;">是否计划去或去过除当前所在地及考区所在地外的市</th>
              <th align="center" style="width: 80px;">是否有中、高或者低风险地区所在市（县、区）旅居史</th>
              <th align="center" style="width: 80px;">是否处于隔离或居家观察中</th>
              <th style="width: 80px;" align="center">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of framePager.getRecords(); let i = index">
              <td>
                <div class="checkbox c-checkbox input-group-sm">
                  <label>
                    <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked"
                      [(ngModel)]="item.isChecked" />
                    <span class="fa fa-check"></span>
                  </label>
                </div>
              </td>
              <td>{{framePager.pageStart+i}}</td>
              <td align="center">{{item.year_code}}</td>
              <td>{{item.std_name}}</td>
              <td align="center">{{item.ticket_no}}</td>
              <td align="center">{{item.std_mobile}}</td>
              <td align="center">{{item.already_in_city}}</td>
              <td>{{item.current_province}}-{{item.current_province_name}}</td>
              <td>{{item.current_city}}-{{item.current_city_name}}</td>
              <td>{{item.current_county}}-{{item.current_county_name}}</td>
              <td>{{item.current_address}}</td>
              <td align="center">{{item.is_plan_city}}</td>
              <td align="center">{{item.is_high_risk}}</td>
              <td align="center">{{item.is_quarantine}}</td>
              <td align="center">
                <a href="#" *ngIf="item.id>0" (click)="goEdit(editTemplateModal,'only','modal-lg',item)" title="详情"><em
                    class="fa-lg fas fa-edit mr-1"></em></a>
               <!-- <a href="#" *ngIf="item.id>0" (click)="delete(item)" title="删除"><em class="fa-lg fas fa-trash mr-1"
                    style="color:#F56D6D"></em></a>
               -->
              </td>
            </tr>
          </tbody>
        </table>
        <frame-pager [url]="QUERY_URL" [autoLoad]="false" hideSearch="true" hasCheck="true" #framePager (preReqEvent)="search($event)">
        </frame-pager>
      </div>
      <!-- 编辑页面 -->
      <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType!='modal'">
        <ng-container *ngTemplateOutlet="editTemplateModal">
        </ng-container>
      </div>

    </div>
  </div>
  <!-- only编辑页面-->
  <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType =='only'">
    <ng-container *ngTemplateOutlet="editTemplateModal">
    </ng-container>
  </div>
</div>

<!--编辑界面模板-->
<ng-template #editFormTemplate>

    <div class="row mt-3">
      <label class="col-lg-3 col-form-label text-lg-right">批次：</label>
      <div class="col-lg-3  col-form-label">
        {{item.year_code}}
       </div>

      <label class="col-lg-3 col-form-label text-lg-right">姓名：</label>
      <div class="col-lg-3  col-form-label">
          {{item.std_name}}
      </div>
    </div>

    <div class="row mt-3">
        <label class="col-lg-3 col-form-label text-lg-right">准考证号：</label>
        <div class="col-lg-3  col-form-label">
          {{item.ticket_no}}
         </div>
  
        <label class="col-lg-3 col-form-label text-lg-right">手机号码：</label>
        <div class="col-lg-3  col-form-label">
            {{item.std_mobile}}
        </div>
      </div>

      <div class="row mt-3">
          <label class="col-lg-3 col-form-label text-lg-right">当前是否已在考点所在城市：</label>
          <div class="col-lg-3  col-form-label">
            {{item.already_in_city}}
           </div>
    
         
        </div>

      <div class="row mt-3">
          
    
          <label class="col-lg-3 col-form-label text-lg-right">当前所在地区省（市、自治区）：</label>
          <div class="col-lg-3  col-form-label">
              {{item.current_province}}-{{item.current_province_name}}
          </div>
          <label class="col-lg-3 col-form-label text-lg-right">当前所在地区市：</label>
            <div class="col-lg-3  col-form-label">
                {{item.current_city}}-{{item.current_city_name}}
             </div>

        </div>

        <div class="row mt-3">
            
      
            <label class="col-lg-3 col-form-label text-lg-right">当前所在地区区（县）：</label>
            <div class="col-lg-3  col-form-label">
                {{item.current_county}}-{{item.current_county_name}}
            </div>

            <label class="col-lg-3 col-form-label text-lg-right">当前所在地区详细地址：</label>
            <div class="col-lg-3  col-form-label">
                {{item.current_address}}
            </div>

          </div>


          <div class="row mt-3" *ngIf="item.already_in_city =='否'">
              <label class="col-lg-3 col-form-label text-lg-right">预计出行至报考考区的时间：</label>
              <div class="col-lg-3  col-form-label">
                {{item.travel_date}}
               </div>
        
             
            </div>

            <div class="row mt-3" *ngIf="item.already_in_city =='否'">
                <label class="col-lg-3 col-form-label text-lg-right">当抵达考区后入住地区省（市、自治区）：</label>
                <div class="col-lg-3  col-form-label">
                  {{item.arrive_province}}-{{item.arrive_province_name}}
                 </div>
          
                 <label class="col-lg-3 col-form-label text-lg-right">抵达考区后入住地区市：</label>
                <div class="col-lg-3  col-form-label">
                  {{item.arrive_city}}-{{item.arrive_city_name}}
                 </div>
               
              </div>
    
              <div class="row mt-3" *ngIf="item.already_in_city =='否'">
                 
                   <label class="col-lg-3 col-form-label text-lg-right">抵达考区后入住地区市：</label>
                  <div class="col-lg-3  col-form-label">
                    {{item.arrive_county}}-{{item.arrive_county_name}}
                   </div>
                   
                   <label class="col-lg-3 col-form-label text-lg-right">抵达考区后入住地区详细地址：</label>
                   <div class="col-lg-3  col-form-label">
                     {{item.arrive_address}}
                    </div>
             
                 
                </div>

                <div class="row mt-3">
                 
                    <label class="col-lg-3 col-form-label text-lg-right">是否有中、高或者低风险地区所在市（县、区）旅居史：</label>
                   <div class="col-lg-3  col-form-label">
                     {{item.is_high_risk}}
                    </div>
                    
                    <label class="col-lg-3 col-form-label text-lg-right">是否处于隔离或居家观察中：</label>
                    <div class="col-lg-3  col-form-label">
                      {{item.is_quarantine}}
                     </div>
              
                  
                 </div>

                 <div class="row mt-3">
                 
                    <label class="col-lg-3 col-form-label text-lg-right">是否计划去或去过除当前所在地及考区所在地外的市：</label>
                   <div class="col-lg-3  col-form-label">
                     {{item.is_plan_city}}
                    </div>
                  
                  
                 </div>

                 <div class="row mt-3" *ngIf="item.is_plan_city =='是'">
                 
                    <label class="col-lg-3 col-form-label text-lg-right">计划去或去过除当前所在地及考区所在地外的市列表：</label>
                   <div class="col-lg-3  col-form-label">
                     
                    </div>
                  
                  
                 </div>

                 <div class="col-sm-12 ml-0" *ngIf="item.is_plan_city =='是'">
                    <table class="table table-sm table-striped table-hover table-bordered bg-white">
                      <thead>
                        <tr>
                         
                          <th>序号</th>
                         
                          <th>计划去或去过省（市、自治区）</th>
                          <th>计划去或去过市</th>
                          <th>计划去或去过区（县）</th>
                         
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let item of planList; let i = index">
                          
                          <td>{{i+1}}</td>
                          
                          <td>{{item.plan_province}}-{{item.plan_province_name}}</td>
                          <td>{{item.plan_city}}-{{item.plan_city_name}}</td>
                          <td>{{item.plan_county}}-{{item.plan_county_name}}</td>
                        
                         
                        </tr>
                      </tbody>
                    </table>
                  
                  </div>
    

</ng-template>


<ng-template #editTemplateModal>
  <div class="modal-content">
    <div class="modal-header info-success-qm">
      <div class="pull-left">
        <em class="fa-lg fas fa-edit "></em> <span *ngIf="item?.id">详情</span> <span *ngIf="!item?.id">新增</span>
      </div>

      <button type="button" class="close" (click)="hideModal()">×</button>
    </div>

    <div class="modal-body">
      <div [ngTemplateOutlet]="editFormTemplate"></div>

    </div>
    <div class="modal-footer">
      <!--
      <button class="btn btn-info" (click)="saveData()">
        <i class="fa fa-info-circle"> </i> 保存
      </button>
      -->
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>
  </div>
</ng-template>

<div class="mt-5">
    <frame-uploader #uploader [silenceUpload]="true" [autoUpload]="true" [uploadUrl]="UPLOAD_URL"></frame-uploader>
  </div>