<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>主考学校：</label>
            <flex-select [allowClear]="true" [url]="SCHOOL_URL" respDataPath="array" optionValueField="id"
              optionTextField="org_name" [(ngModel)]="query.new_school_id" placeholder="请选择"
              [ngModelOptions]="{standalone: true}" width="150" noResultsFound="无数据">
            </flex-select>
          </div>
          <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>
        </form>
      </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 rowspan="2" >序号</th>
              <th colspan="3" align="center">
                新专业信息
              </th>
              <th colspan="4" align="center">
                原专业信息
              </th>
              
            </tr>
            <tr>
              <th >新专业代码</th>
              <th >新专业名称</th>
              <th >主考院校</th>
              <th >原专业代码</th>
              <th >原专业名称</th>
              <th>原专业主考院校</th>
              <th >原专业状态</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of framePager.getRecords(); let i = index" >
              
              <td>{{framePager.pageStart+i}}</td>
              <td>{{item.new_major_code}}</td>
              <td>{{item.new_major_name}}</td>
              <td>{{item.new_org_name}}</td>
              <td>{{item.old_major_code}}</td>
              <td>{{item.old_major_name}}</td>
              <td>{{item.old_org_name}}</td>
              <td>{{item.old_major_status | frameDict: 'old_major_status'}}</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="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" formControlName="id" [formControl]="formModel.controls['id']" />

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">新专业</label>
      <div class="col-lg-4">
        <flex-select [url]="MAJOR_LIST_URL" respDataPath="array" optionValueField="id" optionTextField="major_full_name"
          [(ngModel)]="item.new_major_id" placeholder="请选择" formControlName="new_major_id"
          [formControl]="formModel.controls['new_major_id']" width="222" noResultsFound="无数据">
        </flex-select>
        <span class="text-danger"
          *ngIf="formModel.get('new_major_id').hasError('required') && (formModel.get('new_major_id').dirty || formModel.get('new_major_id').touched)">请选择新专业</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">开办主考院校</label>
      <div class="col-lg-4">
        <flex-select [url]="SCHOOL_URL" respDataPath="array" optionValueField="id" optionTextField="org_name"
          [(ngModel)]="item.new_school_id" placeholder="请选择" formControlName="new_school_id"
          [formControl]="formModel.controls['new_school_id']" width="222" noResultsFound="无数据">
        </flex-select>
        <span class="text-danger"
          *ngIf="formModel.get('new_school_id').hasError('required') && (formModel.get('new_school_id').dirty || formModel.get('new_school_id').touched)">请选择开办院校</span>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-lg-12">
        <h4>选择原专业</h4>
      </div>
    </div>

    <div class="panel-body ml-sm">
      <div class="card card-default">
        <div class="card-body">

          <div class="row mb-3">
            <label class="col-lg-2 col-form-label text-lg-right">原专业</label>
            <div class="col-lg-4">
              <flex-select [(items)]="majorList" optionValueField="id"
                optionTextField="major_full_name" [(ngModel)]="item.old_major_id" placeholder="请选择"
                formControlName="old_major_id" [formControl]="formModel.controls['old_major_id']" width="222"
                noResultsFound="无数据">
              </flex-select>
              <span class="text-danger"
                *ngIf="formModel.get('old_major_id').hasError('required') && (formModel.get('old_major_id').dirty || formModel.get('old_major_id').touched)">请添加原专业</span>
            </div>

            <div class="col-lg-2">
              <select class="custom-select" formControlName="old_major_status"
                [formControl]="formModel.controls['old_major_status']" [(ngModel)]="item.old_major_status" frameDict
                [dictName]="'old_major_status'" [(dictValue)]="item.old_major_status">
              </select>
            </div>
            <div class="col-lg-2">
              <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                (click)="addMajor()" title="添加" [hidden]="item.id">
                <i class="fa fa-plus"></i>添加专业</button>
            </div>
          </div>

          <div class="row mb-3" [hidden]="majorChooseFlag">
            <label class="col-lg-2 col-form-label text-lg-right">已选专业</label>
            <div class="col-lg-10">
              <table class="table table-bordered">
                <tr *ngFor="let item of oldMajorList">
                  <td>{{item.major_name}}</td>
                  <td>{{item.major_code}}</td>
                  <td>{{item.org_name}}</td>
                  <td>{{item.old_major_status | frameDict: 'old_major_status'}}</td>
                  <td>
                    <a href="#" *ngIf="item.id>0" (click)="deleteElement(item.id,'school')" title="删除">
                      <em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em>
                    </a>
                  </td>
                </tr>
              </table>
            </div>
          </div>

        </div>
      </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> <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)="saveMajor()">
        <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>