<div class="panel panel-default">
  <!--标题-->
  <div class="panel-title">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <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=='other'">
    <!--查询条件-->
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only' || editShowType=='other'">
      <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" maxlength="64"
              placeholder="请输入查询关键字">
          </div>
          <div class="input-group mr-1 input-group-sm">
            <label>申报批次：</label>
            <select class="custom-select" [(ngModel)]="query.year" name="year">
              <option value="">请选择</option>
              <option *ngFor="let year of yearArray; let i = index" [value]="year.year">
                {{year.year}}年
              </option>
            </select>
          </div>
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">是否发布：</label>

            <select name="status" [(ngModel)]="query.status" frameDict [dictName]="'PublishStatus'" [tipFlag]="true"
              class="form-control">
            </select>
          </div>
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">申报形式：</label>
            <select name="apply_form" [(ngModel)]="query.apply_form" frameDict [dictName]="'apply_form'"
              [tipFlag]="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' || editShowType=='other'">
      <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,'only')" title="新建">
            <i class="fa fa-plus"></i>新建</button>
          <button class="btn mr-1 btn-sm bg-danger" data-toggle="tooltip" data-placement="left" (click)="deleteDir()"
            title="新建">
            <i class="fa fa-trash"></i>删除</button>
          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
            (click)="goPublish(publishModal,'modal-md')" title="发布">
            <i class="fa fa-paint-brush"></i>发布</button>
          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" (click)='majorSync()'
            title="专业同步">
            <i class="fa icon-login"></i>专业同步</button>
        </div>

      </div>
    </div>

    <!--表格-->
    <div class="row" [hidden]="editShowType=='only' || editShowType=='other'">
      <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>序号</th>
              <th><a (click)="framePager.sort('year')">申报批次</a></th>
              <th>专业代码</th>
              <th>专业名称</th>
              <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>
                <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>{{item.year}}</td>
              <td>{{item.major_code}}</td>
              <td>{{item.major_name}}</td>
              <td>{{item.year_code}}</td>
              <td [innerHTML]="item.apply_form | frameDict:'apply_form' "></td>
              <td [innerHTML]="item.major_level | frameDict:'MajorLevel' "></td>
              <td [innerHTML]="item.ma_status | frameDict:'Status' "></td>
              <td>{{item.total_credits}}</td>
              <td [innerHTML]="item.status | frameDict:'PublishStatus' "></td>
              <td><a href="#" (click)="goSchool('other', item.id)">{{item.school_scope | frameDict:'SchoolScope' }}</a>
              </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="editShowType != null &&editShowType=='show'">
        <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>

  <!-- other页面-->
  <div class="col-lg-12" *ngIf="editShowType != null &&editShowType =='other'">
    <ng-container *ngTemplateOutlet="schoolTemplateModal">
    </ng-container>
  </div>
</div>

<!-- 专业范围界面 -->
<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-default" (click)="save()">
        <i class="icon-plus"> </i> 保存
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>

  </div>
</ng-template>

<ng-template #editFormTemplate>

  <div class="row mt-3">
    <label class="col-lg-2 col-form-label text-lg-right">申报形式</label>
    <div class="col-lg-10">
      <select class="custom-select" frameDict [dictName]="'apply_form'" [(ngModel)]="item.apply_form">
      </select>
    </div>
  </div>

  <div class="row mt-3">
    <label class="col-lg-2 col-form-label text-lg-right">选择申报专业</label>
    <div class="col-lg-6 ml-0">
      <flex-select [allowClear]="true" [(items)]="allMajorList" optionValueField="id" optionTextField="major_full_name"
        [(ngModel)]="item.major_id" placeholder="请选择" [ngModelOptions]="{standalone: true}" width="222"
        noResultsFound="无数据">
      </flex-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="添加">
        <i class="fa fa-plus"></i>添加专业</button>
    </div>
  </div>

  <div class="row mt-3" [hidden]="majorFlag">
    <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 majorList">
          <td>{{item.major_code}}</td>
          <td>{{item.major_name}}</td>
          <td>
            <a href="#" *ngIf="item.id>0" frameRole res="major_manage" (click)="deleteElement(item.id, 'major')"
              title="删除">
              <em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em>
            </a>
          </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-10">
      <div class="checkbox c-checkbox">
        <label>
          <input type="checkbox" checked [(ngModel)]="school" (change)="showSchool()" />
          <span class="fa fa-check"></span>全部学校
        </label>
      </div>
    </div>
  </div>

  <div class="row mt-3" [hidden]="schoolFlag">
    <label class="col-lg-2 col-form-label text-lg-right">选择主考学校</label>
    <div class="col-lg-6">
      <flex-select [allowClear]="true" [url]="SCHOOL_URL" respDataPath="array" optionValueField="id"
        optionTextField="org_name" [(ngModel)]="item.school_id" placeholder="请选择" [ngModelOptions]="{standalone: true}"
        width="222" noResultsFound="无数据">
      </flex-select>
    </div>
    <div class="col-lg-2">
      <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" (click)="addSchool()"
        title="添加">
        <i class="fa fa-plus"></i>添加主考学校</button>
    </div>

  </div>

  <div class="row mt-3" [hidden]="schoolChooseFlag">
    <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 schoolList">
          <td>{{item.org_name}}</td>
          <td>{{item.org_code}}</td>
          <td>
            <a href="#" *ngIf="item.id>0" frameRole res="major_manage" (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>

</ng-template>



<!-- 主考院校界面 -->
<ng-template #schoolTemplateModal>
  <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]="schoolFormTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" (click)="showSchoolModal(addSchoolModal, 'modal-md')">
        <i class="fa fa-plus"> </i> 新增院校
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>

  </div>
</ng-template>


<ng-template #schoolFormTemplate>
  <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>院校代码</th>
            <th>院校名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of schoolOther; let i = index">
            <td>{{i+1}}</td>
            <td>{{item.org_code}}</td>
            <td>{{item.org_name}}</td>
            <td>
              <a href="#" *ngIf="item.id>0" frameRole res="major_manage" (click)="deleteSchool(item.school_id)"
                title="删除">
                <em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em>
              </a>
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>

</ng-template>

<!-- 发布模态窗口 -->
<ng-template #publishModal>
  <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]="publishTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" (click)="publish()">
        <i class="icon-close"> </i> 发布
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>

  </div>
</ng-template>

<ng-template #publishTemplate>
  <form [formGroup]="formModel" (ngSubmit)="publish()" class="form-validate form-horizontal" novalidate>
    <div class="row">
      <label class="col-lg-5 col-form-label text-lg-right">申报年度码</label>
      <div class="col-lg-5">
        <select class="custom-select" formControlName="year_code" [formControl]="formModel.controls['year_code']"
          [(ngModel)]="year_code">
          <option value="" selected>请选择</option>
          <option *ngFor="let year of yearArray" value="{{year.year}}">
            {{year.year}}年
          </option>
        </select>
        <span class="text-danger"
          *ngIf="formModel.get('year_code').hasError('required') && (formModel.get('year_code').dirty || formModel.get('year_code').touched)">请选择年度码</span>
      </div>
    </div>
  </form>
</ng-template>


<!-- 专业同步模态窗口 -->
<ng-template #majorSyncModal>
  <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]="majorSyncTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" (click)="majorSync()">
        <i class="icon-login"> </i> 同步
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>

  </div>
</ng-template>

<ng-template #majorSyncTemplate>
  <div class="row">
    <label class="col-lg-5 col-form-label text-lg-right">专业年度码</label>
    <div class="col-lg-5">
      <select class="custom-select" [(ngModel)]="major_year">
        <option value="">请选择</option>
        <option *ngFor="let year of yearArray" value="{{year.year}}">
          {{year.year}}年
        </option>
      </select>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
      <p>说明：</p>
      <p class="text-danger">数据同步需要较长时间，请谨慎同步!!!</p>
      <p>选择专业年度码，会将该年度码下所有的专业信息同步过来.</p>
    </div>
  </div>
</ng-template>



<ng-template #addSchoolModal>
  <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)="hideSchoolModal()">×</button>
    </div>

    <div class="modal-body">
      <div [ngTemplateOutlet]="addSchoolTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" (click)="saveApplySchool()">
        <i class="icon-plus"> </i> 保存
      </button>
      <button class="btn btn-default" (click)="hideSchoolModal()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>

  </div>

</ng-template>

<ng-template #addSchoolTemplate>
  <div class="row mt-3">
    <label class="col-lg-3 col-form-label text-lg-right">主考院校</label>
    <div class="col-lg-9">
      <flex-select [allowClear]="true" [url]="SCHOOL_URL" respDataPath="array" optionValueField="id"
        optionTextField="org_name" [(ngModel)]="schoolId" placeholder="请选择" [ngModelOptions]="{standalone: true}"
        width="222" noResultsFound="无数据">
      </flex-select>
    </div>
  </div>
</ng-template>