<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]="this.editShowType=='only'">
        <div class="card card-default">
            <div class="card-body">
                <!--查询条件-->
                <div class="row mb-3 ml-1" [hidden]="this.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" style="width: 180px;" 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.std_cert_no" style="width: 180px;" class="input-sm form-control" type="text" value="" maxlength="64">

                            </div>
                        </td>
                        <td>
                            <div class="input-group mr-1 input-group-sm">
                                <label>是否一网通办办件：</label>
                                <select class="input-sm form-control" [ngModelOptions]="{standalone: true}"  [(ngModel)]="query.is_atg">
                                        <option value="">请选择</option>
                                        <option value="1">是</option>
                                        <option value="0">否</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>
                                    <!-- <button type="submit">提交</button> -->  
                        </td>
                        </tr>
                
                        </table>
                            <!--<div class="input-group mr-1 input-group-sm">
                                <label>证件类型：</label>

                                <select class="input-sm form-control" [ngModelOptions]="{standalone: true}"  [(ngModel)]="query.cert_type_id">
                     
                                    <option value="">请选择</option>
                                    <option *ngFor="let item of certTypeList" [value]="item.id">
                                        {{item.cert_code}}-{{item.cert_name}}
                                    </option>
                                </select>

                            </div>
                            <div class="input-group mr-1 input-group-sm">
                                <label>批次：</label>
                                <flex-select 
                                    [allowClear]="true"
                                    [url]= "'mk/mkCertTimeConfig/listAllByType.htm?type=2'"
                                    respDataPath= "array"
                                    optionValueField="id"
                                    optionTextField="year_time"
                                    [(ngModel)]="query.time_config_id"
                                    placeholder="请选择"
                                    [ngModelOptions]="{standalone: true}"
                                    width = "80"
                                    noResultsFound = "无数据"
                                    >
                                 </flex-select>
                            </div>
                        -->
                           
                        </form>
                    </div>
                </div>

                <!-- 工具栏 -->
                <div class="row mb-2" [hidden]="this.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)="goVerify(verifyTemplate)"
                                title="审批">
                                <i class="fa icon-note"></i> 审批</button>-->
                                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" data-toggle="tooltip" data-placement="left" (click)="downApplyPDF()"
                                title="审批">
                                下载免考申请文档</button>

                                &nbsp;
                                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" data-toggle="tooltip" data-placement="left" (click)="syncScores()"
                                title="审批">
                                同步分数</button>
                        </div>
            
                    </div>
                </div>


                <!--表格-->
                <div class="row">
                    <div class="col-lg-12 ml-0" [hidden]="this.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 align="center">批次</th>
                                    <th>考生姓名</th>
                                    <th>考生证件号</th>
                                    <th>考试时间</th>
                                    <th>证书编号</th>
                                    <th>证书类别</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 nomargin>
                                                <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_time}}</td>
                                    <td>{{item.std_name}}</td>
                                    <td>{{item.std_cert_no}}</td>
                                    <td>{{item.exam_date}}</td>
                                    <td>{{item.cert_no}}</td>
                                    <td>{{item.cert_name}}</td>
                                    <td>{{item.status_text}}</td>

                                    <!-- <td align="center">
                                        <a href="#" (click)="this.goEdit(editTemplateModal,'modal','modal-lg',item)" title="编辑">
                                            <em class="fa-lg fas fa-edit mr-1"></em>
                                        </a>
                                    </td> -->
                                </tr>
                            </tbody>
                        </table>
                        <!-- TODO -->
                        <frame-pager [url]="QUERY_URL" hideSearch="true" hasCheck="true" #framePager (preReqEvent)="this.search($event)"></frame-pager>
                    </div>

                    <!-- 编辑页面 -->
                    <div class="col-lg-12" *ngIf="this.item && this.editShowType != null &&this.editShowType!='modal'">
                        <ng-container *ngTemplateOutlet="editTemplateModal">
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- only编辑页面 -->
    <div class="col-lg-12" *ngIf="this.item && this.editShowType != null && this.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)]="this.item.id" [formControl]="this.formModel.controls['id']"
        />
        <div class="row mb-1">

            <label class="col-lg-2 col-form-label text-lg-right ">考生姓名</label>
            <div class="col-lg-4">

                <input class="form-control" type="text" formControlName="std_name" [formControl]="this.formModel.get('std_name')" [(ngModel)]="this.item.std_name"
                />

            </div>

            <label class="col-lg-2 col-form-label text-lg-right ">考生证件号</label>
            <div class="col-lg-4">

                <input class="form-control" type="text" formControlName="std_cert_no" [formControl]="this.formModel.get('std_cert_no')" [(ngModel)]="this.item.std_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-4">

                <input class="form-control" type="text" formControlName="cert_no" [formControl]="this.formModel.get('cert_no')" [(ngModel)]="this.item.cert_no"
                />

            </div>

            <label class="col-lg-2 col-form-label text-lg-right ">证书类别</label>
            <div class="col-lg-4">

                <select class="custom-select" formControlName="cert_type_id" [formControl]="this.formModel.controls['cert_type_id']" [(ngModel)]="item.cert_type_id">
                      <option value="">请选择</option>
                      <option *ngFor="let item of certTypeList" [value]="item.id">
                        {{item.cert_code}}-{{item.cert_name}}
                      </option>
                </select>

            </div>
        </div>
        <div class="row mb-1">

            <label class="col-lg-2 col-form-label text-lg-right ">状态</label>
            <div class="col-lg-4">

                <select class="custom-select" formControlName="status" [formControl]="this.formModel.controls['status']" [(ngModel)]="item.status"
                    frameDict [dictName]="'FrameStatus'" [dictValue]="item.status" [tipFlag]="false">
                    <!--
                      <option value="-1">不分配角色</option>
                      <option *ngFor="let role of roleArray" [value]="role.role_id">
                        {{role.role_name}}
                      </option>
                      -->
                </select>

            </div>

            <label class="col-lg-2 col-form-label text-lg-right ">考试时间</label>
            <div class="col-lg-4">

                <div class="input-group">
                    <input class="form-control" readonly type="text" DateTimePicker [dpType]="'date'" [dpValue]="this.item.exam_date" formControlName="exam_date"
                        [formControl]="this.formModel.get('exam_date')" [(ngModel)]="this.item.exam_date" />
                    <div class="input-icon">
                        <i class="icon-calendar"></i>
                    </div>
                </div>

            </div>
        </div>
        <div class="row mb-1">

            <label class="col-lg-2 col-form-label text-lg-right ">附件</label>
            <div class="col-lg-10">
                <img style="width:200px;height: 200px" [src]="item.file_path"><br>
            </div>

            <label class="col-lg-2 col-form-label text-lg-right ">审批意见1</label>
            <div class="col-lg-10">

                <textarea class="form-control" formControlName="verify_remark2" [(ngModel)]="this.item.verify_remark2" rows="5"></textarea>

            </div>
        </div>
        <div class="row mb-1">

            <label class="col-lg-2 col-form-label text-lg-right ">审批意见2</label>
            <div class="col-lg-10">

                <textarea class="form-control" formControlName="verify_remark3" [(ngModel)]="this.item.verify_remark3" 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)="this.hideModal()">×</button>
        </div>

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

        <div class="modal-footer">
            <button class="btn btn-info" (click)="this.save()">
                <i class="fa fa-info-circle"> </i> 保存
            </button>
            <button class="btn btn-default" (click)="this.hideModal()">
                <i class="icon-close"> </i> 取消
            </button>
        </div>
    </div>
</ng-template>

<ng-template #verifyTemplate>
    <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)="this.hideModal()">×</button>
        </div>

        <!-- 1@3 -->
        <div class="modal-body">
            <h4>申请信息</h4>
            <table style="width:100%" class="table table-sm table-striped table-hover table-bordered bg-white">
                <tr>
                    <td>注册身份证号</td>
                    <td>注册姓名</td>
                    <td>颁发单位</td>
                    <td>学历类型</td>
                    <td>证书编号</td>
                    <td>考试时间</td>
                    <td>考试成绩</td>
                </tr>
                <tr>
                    <td>{{item.std_cert_no}}</td>
                    <td>{{item.std_name}}</td>
                    <td>{{item.source_unit}}</td>
                    <td>{{item.cert_name}}</td>
                    <td>{{item.cert_no}}</td>
                    <td>{{item.exam_date}}</td>
                    <td>{{item.score}}</td>
                </tr>
            </table>
            <h4>学习成果认证课程</h4>
            <table style="width:100%" class="table table-sm table-striped table-hover table-bordered bg-white">
                <tr>
                    <td>序号</td>
                    <td>课程</td>
                    <td>代码</td>

                </tr>
                <tr *ngFor="let c of courseList; let i = index">
                    <td>{{i+1}}</td>
                    <td>{{c.course_name}}</td>
                    <td>{{c.course_code}}</td>

                </tr>
            </table>
            相关附件：
            <img style="width:200px;height: 200px" [src]="item.file_path"><br>
            <div class="mt-2">
                评审结果：
                    <label class="radio-inline c-radio">
                    <input type="radio" name="status" value="1" [(ngModel)]="item.status"/>
                    <span class="fa fa-circle"></span>通过
                    </label>
                  <label class="radio-inline c-radio">
                    <input type="radio" name="status" value="0" [(ngModel)]="item.status"/>
                    <span class="fa fa-circle"></span>不通过
                 </label>
            </div>
            <div class="mt-2" style="vertical-align: top;">
            初审意见：<textarea [(ngModel)]="item.verify_remark1" rows="3" cols="100"></textarea>
            </div>

        </div>

        <div class="modal-footer">
            <button class="btn btn-info" (click)="this.saveVerify()">
                <i class="fa fa-info-circle"> </i> 保存
            </button>
            <button class="btn btn-default" (click)="this.hideModal()">
                <i class="icon-close"> </i> 取消
            </button>
        </div>
    </div>
</ng-template>