<div class="panel panel-default">
    <!--标题-->
    <div class="panel-title" style="margin-bottom:0px;">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb" style="margin-bottom:0px;">
                <!-- 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' || editShowType=='applyTimeFilter'">
        <div class="card card-default">
            <div class="card-body">
                <!--查询条件-->
                <div class="row mb-3 ml-1" [hidden]="editShowType=='only' || editShowType=='applyTimeFilter'">
                    <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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年度：</label>
                                <flex-select [allowClear]="true"
                                    [(items)] = "yearCodeList"
                                    respDataPath= "array"
                                    optionValueField="year"
                                    optionTextField="year"
                                    [(ngModel)]="query.year"
                                    placeholder="请选择"
                                    [ngModelOptions]="{standalone: true}"
                                    width = "160"
                                    noResultsFound = "无数据"
                                    >
                                </flex-select>
                            </div>
                        </td>
                        <td>
                            <div class="input-group mr-1 input-group-sm">
                                <label>主考学校：</label>
                                <flex-select [allowClear]="true"
                                    [(items)] = "masterSchoolList"
                                    respDataPath= "array"
                                    optionValueField="id"
                                    optionTextField="org_name"
                                    [(ngModel)]="query.school_id"
                                    placeholder="请选择"
                                    [ngModelOptions]="{standalone: true}"
                                    width = "160"
                                    noResultsFound = "无数据"
                                    >
                                </flex-select>
                            </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            <div class="input-group mr-1 input-group-sm">
                                    <label>衔接学校：</label>
                                    <flex-select [allowClear]="true"
                                    [(items)]="joinSchoolList"
                                    respDataPath= "array"
                                    optionValueField="id"
                                    optionTextField="org_name"
                                    [(ngModel)]="query.join_school_id"
                                    [ngModelOptions]="{standalone: true}"
                                    placeholder="请选择"
                                    width = "160"
                                    noResultsFound = "无数据"
                                    >
                                </flex-select>
                                </div>

                            </td>
                            
                             
                            <!-- <div class="input-group mr-1 input-group-sm">
                                <label>申报学校：</label>
                                <flex-select [allowClear]="true"
                                    [(items)] = "masterSchoolList"
                                    respDataPath= "array"
                                    optionValueField="id"
                                    optionTextField="org_name"
                                    [(ngModel)]="query.applySchoolId"
                                    placeholder="请选择"
                                    [ngModelOptions]="{standalone: true}"
                                    width = "40"
                                    noResultsFound = "无数据"
                                    >
                                </flex-select>
                            </div> 
                            -->
                            <td>
                            <div class="input-group mr-1 input-group-sm">
                                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;专业：</label>
                                <flex-select [allowClear]="true"
                                    [(items)] = "majorList"
                                    respDataPath= "array"
                                    optionValueField="id"
                                    optionTextField="full_name"
                                    [(ngModel)]="query.major_id"
                                    placeholder="请选择"
                                    [ngModelOptions]="{standalone: true}"
                                    width = "160"
                                    noResultsFound = "无数据"
                                    >
                                </flex-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)="resetQuery()">
                                <i class="fa fa-undo"></i> 重置</button>
                            </td>
                            </tr>
                            </table>
                            </form>
                    </div>
                </div>

                <!-- 工具栏 -->
                <div *ngIf="query.status==1" class="row mb-2" [hidden]="editShowType=='only' || editShowType=='applyTimeFilter'">
                    <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)="toApply()" title="专业备案">
                                <i class="fa fa-plus"></i> 专业备案</button>&nbsp;&nbsp;
                            <!--
                                <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                                (click)="submitApply();" title="提交申请">
                                <i class="fa fa-plus"></i> 提交申请</button>&nbsp;&nbsp;
                            
                                <button class="btn mr-1 btn-sm bg-danger" (click)="proxyDelete()" data-toggle="tooltip"
                                data-placement="left" title="删除">
                                <i class="fa fa-trash"></i>删除</button>&nbsp;&nbsp;
                                -->
                        </div>
                    </div>
                </div>

                <!--表格-->
                <div class="row">
                    <div class="col-lg-12 ml-0" [hidden]="editShowType=='only' || editShowType=='applyTimeFilter'">
                        <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>衔接学校</th>
                                    <th>专业代码</th>
                                    <th>专业名称</th>
                                    <th align="center">备案日期</th>
                                   
                                    <!--<th align="center">是否驳回</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}}</td>
                                    <td>{{item.master_school}}</td>
                                    <td>{{item.join_school}}</td>
                                    <td>{{item.major_code}}</td>
                                    <td>{{item.major_name}}</td>

                                    <td align="center">{{item.apply_date.substring(0,10)}}</td>
                                   <!-- <td align="center" [innerHTML]="item.is_auth_back | frameDict:'YesOrNo'"></td>-->
                                    <td align="center">
                                                                            
                                        <a href="#" (click)="proxyDelete(item)" title="删除"><em class="fa-lg fas fa-trash mr-1"
                                                style="color:#F56D6D"></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 class="col-lg-12" *ngIf="editShowType != null && editShowType =='applyTimeFilter'">
        <ng-container *ngTemplateOutlet="applyTimeListModal">
        </ng-container>
    </div>        
</div>
<div class="row">
    <frame-uploader #uploader [silenceUpload]="true" [autoUpload]="true" [(uploadUrl)]="UPLOAD_URL"></frame-uploader>
</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" [formControl]="formModel.controls['id']" />

            <!--主考学校信息查看,全日制才显示
            <div class="row mb-1">
                    <label class="col-lg-2 col-form-label text-lg-right">主考学校</label>
                    <div class="col-lg-8">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>主考学校代码</th>
                                    <th>主考学校名称</th>
                                   
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngIf="!item.id">
                                    <td>{{curOrg.org_code_bz}}</td>
                                    <td>{{curOrg.org_name}}</td>
                                   
                                </tr>
                                <tr *ngIf="item.id">
                                    <td>{{item.masterSchool.org_code_bz}}</td>
                                    <td>{{item.masterSchool.org_name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
            </div>
            -->
            
            <div class="row mb-2">
                <label class="col-lg-2 col-form-label text-lg-right">年度</label>
                <div class="col-lg-8">
                    <flex-select [allowClear]="true"
                        [(items)] = "yearCodeList"
                        optionValueField="year"
                        optionTextField="year"
                        [(ngModel)]="item.year"
                        placeholder="请选择"
                        formControlName="year" 
                        [formControl]="formModel.controls['year']" 
                        width = "250"
                        noResultsFound = "无数据"
                        >
                    </flex-select>
                    <span class="text-danger" *ngIf="formModel.get('year').hasError('required') && (formModel.get('year').dirty || formModel.get('year').touched)">请选择年度</span>
                </div>
            </div>

            <div class="row mb-2">
                <label class="col-lg-2 col-form-label text-lg-right">主考学校</label>
                <div class="col-lg-8 form-inline">
                    <flex-select [allowClear]="true"
                    [(items)] = "masterSchoolList"
                    respDataPath= "array"
                    optionValueField="id"
                    optionTextField="org_name"
                    [(ngModel)]="item.school_id"
                    placeholder="请选择"
                    formControlName="school_id" 
                    [formControl]="formModel.controls['school_id']" 
                    width = "250"
                    noResultsFound = "无数据"
                    >
                </flex-select>
                <span class="text-danger" *ngIf="formModel.get('school_id').hasError('required') && (formModel.get('school_id').dirty || formModel.get('school_id').touched)">请选择主考学校</span>

                   
                    
                </div>
        </div>

                <div class="row mb-2">
                    <label class="col-lg-2 col-form-label text-lg-right">衔接学校</label>
                    <div class="col-lg-8 form-inline">
                        <flex-select [allowClear]="true"
                            [(items)]="joinSchoolList"
                            respDataPath= "array"
                            optionValueField="id"
                            optionTextField="org_name"
                            [(ngModel)]="item.join_school_id"
                            formControlName="join_school_id" 
                            [formControl]="formModel.controls['join_school_id']" 
                            placeholder="请选择"
                            width = "250"
                            noResultsFound = "无数据"
                            >
                        </flex-select>
                        <span class="text-danger" *ngIf="formModel.get('join_school_id').hasError('required') && (formModel.get('join_school_id').dirty || formModel.get('join_school_id').touched)">请选择衔接学校</span>

                        
                    </div>
            </div>

            
            <!--<div class="row mb-2">
                <label class="col-lg-2 col-form-label text-lg-right">专业层次</label>
                <div class="col-lg-8">
                        <flex-select [allowClear]="true"
                        [(items)] = "eduLevelList"
                        respDataPath= "array"
                        optionValueField="key"
                        optionTextField="val"
                        [(ngModel)]="item.major_level"
                        placeholder="请选择"
                        formControlName="major_level" 
                        [formControl]="formModel.controls['major_level']" 
                        width = "100"
                        noResultsFound = "无数据"
                        >
                    </flex-select>
                    <span class="text-danger" *ngIf="formModel.get('major_level').hasError('required') && (formModel.get('major_level').dirty || formModel.get('major_level').touched)">请选择专业层次</span>
                </div>
            </div>

            <div class="row mb-2">
                <label class="col-lg-2 col-form-label text-lg-right">申报形式</label>
                <div class="col-lg-8">
                    <select class="custom-select" formControlName="apply_form" [formControl]="formModel.controls['apply_form']"  style="width: 290px;"
                    [(ngModel)]="item.apply_form" frameDict [dictName]="'MajorApplyForm'" [(dictValue)]="item.apply_form">
                    </select>
                    <span class="text-danger" *ngIf="formModel.get('apply_form').hasError('required') && (formModel.get('apply_form').dirty || formModel.get('apply_form').touched)">请选择申报形式</span>&nbsp;&nbsp;

                </div>
            </div>
-->
           

            <div class="row mb-2">
                <label class="col-lg-2 col-form-label text-lg-right">备案专业</label>
                <div class="col-lg-8  form-inline">
                    <flex-select [allowClear]="true"
                        [(items)] = "majorList"
                        respDataPath= "array"
                        optionValueField="id"
                        optionTextField="full_name"
                        [(ngModel)]="item.major_id"
                        placeholder="请选择"
                        formControlName="major_id" 
                        [formControl]="formModel.controls['major_id']" 
                        width = "250"
                        noResultsFound = "无数据"
                        >
                    </flex-select>
                    
                    <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" (click)="addMultiMajor()" title="添加">
                        <i class="fa fa-plus"></i> 添加专业</button>
                        
                </div>
            </div>

            <div class="row mb-1">
                    <!-- 审核流程列表 -->
                    <label class="col-lg-2 col-form-label text-lg-right">备案专业</label>
                    <div class="col-lg-8">
                        <table class="table table-sm table-striped table-hover table-bordered bg-white">
                            <thead>
                                <tr>
                                    <th>专业代码</th>
                                    <th>专业名称</th>
                                    <th align="center">专业层次</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let it of appledMajorList; let i = index">
                                   
                                    <td>{{it.major_code}}</td>
                                    <td>{{it.major_name}}</td>
                                    <td align="center" [innerHTML]="it.major_level| frameDict:'MajorLevel'"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            
            <!-- 审核记录查询 
        <div class="row mb-1">
           
            <label class="col-lg-2 col-form-label text-lg-right">审核记录</label>
            <div class="col-lg-8">
                <table class="table table-sm table-striped table-hover table-bordered bg-white">
                    <thead>
                        <tr>
                            <th>审核类型</th>
                            <th align="center">审核时间</th>
                            <th>审核人</th>
                            <th>审核意见</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let it of authList; let i = index">
                            <td>{{it.auth_type | frameDict:'MajorApplyAuthType'}}</td>
                            <td align="center">{{it.auth_time}}</td>
                            <td>{{it.optr_name}}</td>
                            <td>{{it.auth_remark}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        -->
           
            <div class="row mb-2" [hidden]="isHiddenMajorFlag">
                    <label class="col-lg-2 col-form-label text-lg-right">已选专业</label>
                    <div class="col-lg-8">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th align="center">专业代码</th>
                                    <th>专业名称</th>
                                    <th style="width: 80px;" *ngIf="curApplyForm === 1">衔接学校</th>
                                    <th style="width: 60px;" align="center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let key of getKeys(selectMajorMap)">
                                        <td align="center">{{selectMajorMap[key].major_code}}</td>
                                        <td>{{selectMajorMap[key].major_name}}</td>
                                        <td *ngIf="curApplyForm === 1" style="text-align:center">
                                            <a href="#"  (click)="showJoinSchoolDialog(joinSchoolModal,key);" title="衔接学校">
                                                <em class="fa-lg fas fa-train mr-1"></em>
                                            </a>
                                        </td>
                                        <td style="text-align:center">
                                            <a href="#"  (click)="deleteMajor(key)" title="删除">
                                                <em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em>
                                            </a>
                                        </td>
                                    </tr>
                            </tbody>

                        </table>
                    </div>
            </div>
        
           
           
            <!--
            <div class="row mb-1">
                <label class="col-lg-2 col-form-label text-lg-right">说明</label>
                <div class="col-lg-8">
                    <textarea class="form-control" formControlName="apply_remark" [formControl]="formModel.controls['apply_remark']" maxlength="256"
                        [(ngModel)]="item.apply_remark" rows="3"></textarea>
                </div>
                <span class="text-danger" *ngIf="formModel.get('apply_remark').hasError('required') && (formModel.get('apply_remark').dirty || formModel.get('apply_remark').touched)">请填写申报说明</span>
            </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)="save()" *ngIf="!item.id">
                <i class="fa fa-info-circle"> </i> 保存
            </button>
            <!--
            <button class="btn btn-info" (click)="save()" *ngIf="item.id && item.status==1">
                <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>

<!--*********************************申请备案时间列表*********************************************-->
<!-- 开考类型对应申报时间列表界面 -->
<ng-template #applyTimeListModal>
    <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]="applyTimeTemplate"></div>
          </div>
      
          <div class="modal-footer">
            <button class="btn btn-default" (click)="hideModal()">
              <i class="icon-close"> </i> 关闭
            </button>
          </div>
    </div>
</ng-template>
      
      
<ng-template #applyTimeTemplate>
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <th>序号</th>
                  <th align="center">申报形式</th>
                  <th align="center">申报时间范围</th>
                  <th align="center">年度</th>
                  <th align="center">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of applyTimeList; let i = index">
                  <td>{{i+1}}</td>
                  <td align="center">{{item.dict_text}}</td>
                  <td align="center">{{item.apply_start_time}} 到 {{item.apply_end_time}}</td>
                  <td align="center">{{item.year_code}}</td>
                  <td align="center">
                    <a href="#" (click)="enterApply(item.apply_form,item.year_code)" title="进入专业申报">进入专业申报</a>
                  </td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</ng-template>

<!--****************************衔接学校维护-专本衔接才有***********************-->
<ng-template #joinSchoolModal>
    <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)="hiderJoinModal()">×</button>
          </div>
      
          <div class="modal-body">
            <div [ngTemplateOutlet]="joinSchoolTemplate"></div>
          </div>
      
          <div class="modal-footer">
            <button class="btn btn-info" (click)="hiderJoinModal()">
                <i class="fa fa-info-circle"> </i> 确定
            </button>&nbsp;&nbsp;
            <button class="btn btn-default" (click)="hiderJoinModal()">
              <i class="icon-close"> </i> 关闭
            </button>
          </div>
    </div>
</ng-template>
      
      
<ng-template #joinSchoolTemplate>
    <div class="row mb-2">
            <label class="col-lg-2 col-form-label text-lg-right">衔接学校</label>
            <div class="col-lg-8 form-inline">
                <flex-select [allowClear]="true"
                    [(items)]="joinSchoolList"
                    respDataPath= "array"
                    optionValueField="id"
                    optionTextField="org_name"
                    [(ngModel)]="joinQuery.orgId"
                    [ngModelOptions]="{standalone: true}"
                    placeholder="请选择"
                    width = "100"
                    noResultsFound = "无数据"
                    >
                </flex-select>&nbsp;&nbsp;
                <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" (click)="addMultiJoinSchool()" title="添加">
                        <i class="fa fa-plus"></i> 添加衔接学校</button>
            </div>
    </div>
    <div class="row mb-2">
        <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>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let key of getKeys(currJoinSchoolMap); let i = index">
                  <td>{{i+1}}</td>
                  <td>{{currJoinSchoolMap[key].org_code}}</td>
                  <td>{{currJoinSchoolMap[key].org_name}}</td>
                  <td>
                    <a href="#" (click)="deleteJoinSchool(currJoinSchoolMap[key].id)" title="删除">
                        <em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</ng-template>