<div class="panel panel-default">
  <div>
    <!--标题-->
    <div class="panel-title">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <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">
          <!-- 支持排序 -->
          <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="" maxlength="64"
              placeholder="请输入查询关键字">
          </div>
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">转考批次：</label>
            <flex-select [allowClear]="true" [url]="TIME_URL" respDataPath="array" optionValueField="id"
              optionTextField="year_time" [(ngModel)]="query.time_config_id" placeholder="请选择" [ngModelOptions]="{standalone: true}"
              width="100" noResultsFound="无数据">
            </flex-select>
          </div>

          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">状态：</label>
            <select name="status" 
                width = "100"
                [(ngModel)]="query.status" 
                frameDict [dictName]="'TurnStatus'" 
                [ngModelOptions]="{standalone: true}"
                class="form-control">
            </select>
          </div>

          <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1">
            <i class="fa fa-search"></i> 查询</button>
        </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" (click)="printPage()" data-toggle="tooltip" data-placement="left"
            title="转出介绍信">
            <i class="fa icon-printer"> 转出介绍信</i>
          </button>
          
          <button class="btn btn-primary mr-1 btn-sm" (click)="print()" data-toggle="tooltip" data-placement="left"
            title="成绩证明">
            <i class="fa icon-printer"> 打印成绩证明(考办与考生)</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>
        </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 align="center">批次</th>
              <th>身份证号</th>
              <th>考生姓名</th>
              <th align="center">转出准考证</th>
              <th>专业代码</th>
              <th>专业名称</th>
              <th>转至省份</th>
              <th align="center">外省准考证</th>
              <th>状态</th>
              <th>外省接收状态</th>
              <th>退回原因</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 align="center">{{item.year}}{{item.time| frameDict: 'time'}}</td>
              <td>{{item.cert_no}}</td>
              <td>{{item.std_name}}</td>
              <td align="center">{{item.out_ticket_no}}</td>
              <td>{{item.major_code}}</td>
              <td>{{item.major_name}}</td>
              <td>{{item.province_name}}</td>
              <td align="center">{{item.in_ticket_no}}</td>
              <td *ngIf="item.std_source === 1 && item.status === 1"> 待市考办审核</td>
              <td *ngIf="item.std_source === 3 && item.status === 1"> 待主考学校审核</td>
              <td *ngIf="item.status === 3 || item.status === 4 || item.status === 0  || item.status === 5  || item.status === 6  || item.status === 7 ">{{item.status | frameDict: 'TurnStatus'}}</td>
              <td>{{item.receive_status| frameDict: 'OutProvStatus'}}</td>
              <td>{{item.back_reason}}</td>
            </tr>
          </tbody>
        </table>
        <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>
  <!-- only编辑页面-->
  <div class="col-lg-12" *ngIf="editShowType != null &&editShowType =='only'">
    <ng-container *ngTemplateOutlet="editTemplateModal">
    </ng-container>
  </div>
</div>

<!--编辑界面模板-->
<ng-template #editFormTemplate>
  <form [formGroup]="formModel" (ngSubmit)="audit()" class="form-validate form-horizontal" novalidate>

    <div class="row mt-3">
      <div class="col-lg-12">
        <table class="table table-sm table-striped table-hover table-bordered bg-white">
          <thead>
            <tr>
              <th>序号</th>
              <th>课程代码</th>
              <th>课程名称</th>
              <th>学分</th>
              <th>课程性质</th>
              <th>成绩</th>
            </tr>
          </thead>
          <tr *ngFor="let item of courseList; let i =index">
            <td>{{i+1}}</td>
            <td>{{item.course_code}}</td>
            <td>{{item.course_name}}</td>
            <td>{{item.course_score}}</td>
            <td>{{item.course_exam_type | frameDict: 'CourseNature'}}</td>
            <td>{{item.score}}</td>
          </tr>
        </table>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-lg-12">
        <table class="table table-sm table-striped table-hover table-bordered bg-white">
          <tr>
            <td rowspan="5" width="10%">
              <img src="{{applyInfo.photo_url}}" alt="考生头像" />
            </td>
            <td width="10%">姓名：</td>
            <td width="30%">{{applyInfo.std_name}}</td>
          </tr>
          <tr>
            <td>准考证：</td>
            <td>{{applyInfo.out_ticket_no}}</td>
          </tr>
          <tr>
            <td>身份证：</td>
            <td>{{applyInfo.cert_no}}</td>
          </tr>
          <tr>
            <td>转至省份：</td>
            <td>{{applyInfo.province_name}}</td>
          </tr>
          <tr>
            <td>外省准考证：</td>
            <td>{{applyInfo.in_ticket_no}}</td>
          </tr>
        </table>
      </div>
    </div>

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">审批类型：</label>
      <div class="col-lg-4">
        <select [(ngModel)]="appr_type" formControlName="appr_type" [formControl]="formModel.controls['appr_type']"
          frameDict [dictName]="'AuditStatus'" [(dictValue)]="appr_type" class="form-control">
        </select>
        <span class="text-danger" *ngIf="formModel.get('appr_type').hasError('required') && (formModel.get('appr_type').dirty || formModel.get('appr_type').touched)">请选择审批类型</span>
      </div>
    </div>

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">驳回意见：</label>
      <div class="col-lg-10">
        <textarea class="form-control" formControlName="reject_advice" [formControl]="formModel.controls['reject_advice']"
          placeholder="驳回请填写驳回意见" [(ngModel)]="reject_advice" rows="5"></textarea>
      </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>

    <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>