<div class="panel panel-default">
  <!--标题-->
  <div class="panel-title">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <!-- TODO 
        <li class="breadcrumb-item">考生管理</li>
        -->
        <li class="breadcrumb-item active" aria-current="page">咨询投诉</li>
      </ol>
    </nav>
  </div>
  <div class="panel-body ml-sm" [hidden]="editShowType=='only'">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <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>考生姓名：</label>
                <input name="keyword" [(ngModel)]="query.std_name" class="input-sm form-control" type="text" value=""
                       maxlength="64">

              </div>
            </td>
            <td>
              <div class="input-group mr-1 input-group-sm">
                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证件号：</label>
                <input name="keyword" [(ngModel)]="query.cert_no" class="input-sm form-control" type="text" value=""
                       maxlength="64">

              </div>
            </td>
              <td>
              <div class="input-group mr-1 input-group-sm">
                <label>准考证号：</label>
                <input name="keyword" [(ngModel)]="query.ticket_no" class="input-sm form-control" type="text" value=""
                       maxlength="64">

              </div>
            </td>
            </tr>
            <tr>
              <td>
              <div class="input-group mr-1 input-group-sm">
                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：</label>
                <select name="keyword" [(ngModel)]="query.type_name" class="form-control">
                  <option value="">--请选择--</option>
                  <option value="咨询">咨询</option>
                  <option value="投诉">投诉</option>
                </select>


              </div>
            </td>
            <td>
                <div class="input-group mr-1 input-group-sm">
                    <label>受理状态：</label>
                    <select name="keyword" [(ngModel)]="query.status" class="form-control">
                      <option value="">--请选择--</option>
                      <option value="等待处理">等待处理</option>
                      <option value="处理完成">处理完成</option>
                    </select>
    
    
                  </div>
            </td>
            <td>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="framePager.goSearch()">
                <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>
              <!-- <button type="submit">提交</button> -->
            </form>
          </div>
        </div>

        <!-- 工具栏 -->
        <!--        <div class="row mb-2" [hidden]="editShowType=='only'">-->
        <!--          <div class="col-lg-12">-->
        <!--            <div class="pull-left">-->
        <!--              <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" (click)="goEdit(editTemplateModal,'modal','modal-lg',null)"-->
        <!--                      title="添加">-->
        <!--                <i class="fa fa-plus"></i> 添加</button>-->
        <!--              &lt;!&ndash;-->
        <!--            <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" title="修改">-->
        <!--              <i class="fa fa-edit"></i> 修改</button>-->
        <!--              &ndash;&gt;-->
        <!--              <button class="btn btn-primary mr-1 btn-sm" (click)="delete()" data-toggle="tooltip" data-placement="left"-->
        <!--                      title="删除">-->
        <!--                <i class="fa fa-trash"> 删除</i>-->
        <!--              </button>-->
        <!--              &lt;!&ndash; <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"-->
        <!--                title="导出">-->
        <!--                <i class="fa fa-file-excel"></i> 导出</button> &ndash;&gt;-->
        <!--            </div>-->

        <!--            &lt;!&ndash; <div class="">-->
        <!--            <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="onSearch($event)">-->
        <!--              <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>-->
        <!--          </div> &ndash;&gt;-->
        <!--          </div>-->
        <!--        </div>-->

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="editShowType=='only'">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
              <tr>
                <!--                <th>-->
                <!--                  <div class="checkbox c-checkbox">-->
                <!--                    <label class="nomargin">-->
                <!--                      <input type="checkbox" (change)="framePager.checkedMasterToggle($event)" />-->
                <!--                      <span class="fa fa-check"></span>-->
                <!--                    </label>-->
                <!--                  </div>-->
                <!--                </th>-->

                <th>考生姓名</th>
                <th>证件号</th>
                <th align="center">准考证号</th>
               
                <th>联系方式</th>
                <th align="center">申请类型</th>
                <th align="center">日期</th>
                <th>申请说明</th>
                <th align="center">处理状态</th>
                <th>受理结果</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 class="nomargin">-->
                <!--                      <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked" [(ngModel)]="item.isChecked" />-->
                <!--                      <span class="fa fa-check"></span>-->
                <!--                    </label>-->
                <!--                  </div>-->
                <!--                </td>-->

                <td>{{item.std_name}}</td>
                <td>{{item.cert_no}}</td>
                <td align="center">{{item.ticket_no}}</td>
                
                <td>{{item.mobile}}</td>
                <td align="center">{{item.type_name}}</td>
                <td align="center">{{item.create_time}}</td>
                <td title="{{item.reason}}">{{carouselContentFilter(item.reason)}}</td>
                <td align="center">{{item.status}}</td>
                <td title="{{item.result}}">{{carouselContentFilter(item.result)}}</td>
                <td align="center">
                  <!--
              <a href="#" *ngIf="item.optr_id>0" frameRole res="optr_manage" (click)="goEdit(editTemplateModal,'modal','modal-lg',item)" title="编辑"><em class="fa-lg fas fa-edit mr-1"></em></a>
              <a href="#" *ngIf="item.optr_id>0" frameRole res="optr_manage" (click)="delete(item)" title="删除"><em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em></a>
              -->
                  <a href="#" (click)="goEdit(editTemplateModal,'modal','modal-lg',item)" title="回复"><em
                    class="fa-lg fas fa-edit mr-1"></em></a>
                  <!--                  <a href="#" (click)="delete(item)" title="删除"><em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em></a>-->
                  <!-- <a href="#" *ngIf="item.optr_id>0" frameRole res="optr_manage" (click)="goEdit(editTemplateModal,'modal','modal-lg',item)"><em class="fa-md fas fa-edit "></em></a>
              <a href="#" *ngIf="item.optr_id>0" frameRole res="optr_manage" (click)="goEdit(editTemplateModal,'modal','modal-lg',item)"><em class="fa-md fas fa-edit "></em></a> -->
                </td>
              </tr>
              </tbody>
            </table>
            <!-- TODO -->
            <frame-pager [url]="QUERY_URL" 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>
    </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>
  <form [formGroup]="formModel" *ngIf="item" class="form-validate form-horizontal" novalidate="">
    <input type="hidden" class="form-control" formControlName="id" [(ngModel)]="item.id"/>
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">考生姓名</label>
      <div class="col-lg-6 col-form-label">{{item.std_name}}</div>
    </div>
    <div class="row mb-1">
      <label class="col-lg-2 col-form-label text-lg-right">证件号</label>
      <div class="col-lg-6 col-form-label">{{item.cert_no}}</div>
    </div>
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">准考证号</label>
      <div class="col-lg-6 col-form-label">{{item.ticket_no}}</div>
    </div>
    <div class="row mb-1">
      <label class="col-lg-2 col-form-label text-lg-right">申请类型</label>
      <div class="col-lg-6 col-form-label">{{item.type_name}}</div>
    </div>
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">日期</label>
      <div class="col-lg-6 col-form-label">{{item.create_time}}</div>
    </div>

    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">申请说明</label>
      <div class="col-lg-8 col-form-label" style="white-space:pre-wrap">{{item.reason}}</div>
    </div>
    <div class="row mb-1">
      <label class="col-lg-2 col-form-label text-lg-right">受理结果</label>
      <div class="col-lg-8 col-form-label">
        
        <div class="input-group">
            <textarea class="form-control" [(ngModel)]="item.result" [formControl]="formModel.controls['result']" formControlName="result" rows="8" cols="200" maxlength="2000"></textarea>

        </div>
        <span class="text-danger"
              *ngIf="formModel.get('result').hasError('required') && (formModel.get('result').dirty || formModel.get('result').touched)">请输入受理结果</span>
      </div>
    </div>
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">申请材料</label>
      <div class="col-lg-8 col-form-label">
        <img style="width:200px;height: 200px" *ngIf="item.file_path" [src]="item.file_path">
        <img style="width:200px;height: 200px" *ngIf="!item.file_path" [src]="">
      </div>

    </div>
  </form>
</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> 编辑页面
      </div>
      <button type="button" class="close" (click)="hideModal()">×</button>
    </div>

    <!-- 1@3 -->
    <div class="modal-body">
      <div [ngTemplateOutlet]="editFormTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-info" (click)="audit()">
        <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>
