<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 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"[(items)] = "allMajorList"  optionValueField="id"
              optionTextField="major_full_name" [(ngModel)]="query.major_id" placeholder="请选择" width="100"
              noResultsFound="无数据" [ngModelOptions]="{standalone: true}">
            </flex-select>
          </div>
          <div class="input-group mr-1 input-group-sm">
            <label>原顶替课程：</label>
            <flex-select [allowClear]="true"[(items)] = "allCourseList"  optionValueField="id"
              optionTextField="code_course_name" [(ngModel)]="query.old_course_id" placeholder="请选择" width="100"
              noResultsFound="无数据" [ngModelOptions]="{standalone: true}">
            </flex-select>
          </div>
          <div class="input-group mr-1 input-group-sm">
            <label>现课程：</label>
            <flex-select [allowClear]="true"[(items)] = "allCourseList"  optionValueField="id"
              optionTextField="code_course_name" [(ngModel)]="query.repl_course_id" placeholder="请选择" width="100"
              noResultsFound="无数据" [ngModelOptions]="{standalone: true}">
            </flex-select>
          </div>
          <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 mr-1 btn-sm" (click)="export()" data-toggle="tooltip" data-placement="left"
            title="导出">
            <i class="fa icon-cloud-download"> 导出</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" data-toggle="tooltip" data-placement="left"
            (click)="shouModalWin(majorChooseModal,'modal-md')" title="添加">
            <i class="fa fa-plus"></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>批次</th>-->
              <th>专业名称</th>
              <th align="center">专业层次</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>
                    <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}}</td>-->
              <td >{{item.major_code}}-{{item.major_name}}</td>
              <td align="center">{{item.major_level | frameDict: 'MajorLevel'}}</td>
              <td [innerHTML]="item.old_course_names | strReplace: '|':'<br>' "></td>
              <td  [innerHTML]="item.repl_course_names | strReplace: '|':'<br>' "></td>
              <td >{{item.remark}}</td>
              <td align="center">
                <a href="#" *ngIf="item.id>0" frameRole res="major_manage" (click)="delete(item)" title="删除"><em
                    class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em></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="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>
  <div class="row mt-3">
    <div class="col-lg-12">
      <h3 class="text-center font-weight-bold">{{major.major_name}}({{major.major_code}})专业新旧课程衔接</h3>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-lg-12">
      <h5 class="col-lg-3 text-lg-left text-dark"><strong>专业下已做新旧课程衔接：</strong></h5>
    </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">
        <thead>
          <tr>
            <th >序号</th>
            <th >原计划规定课程及代号</th>
            <th >新计划规定课程及代号</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let has of hasList; let i = index">
            <td >{{i+1}}</td>
            <td  [innerHTML]="has.old_course_names | strReplace: '|':'<br>' "></td>
            <td  [innerHTML]="has.repl_course_names | strReplace: '|':'<br>' "></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-lg-12">
      <h5 class="col-lg-3 text-lg-left text-dark"><strong>选择专业课程【被顶替课程】：</strong></h5>
    </div>
  </div>

  <div class="row mt-3">

    <div class="col col-lg-5">

      <div class="card bg-light">
        <div class="card-header">
          <div class="col-lg-10">
            <div class="input-group mr-1 input-group-sm">
              <label>被顶替课程：</label>
              <input class="input-sm form-control" type="text" placeholder="请输入课程代码或者名称" [(ngModel)]="query.mcName" (keyup) = "keyChange($event, query.mcName,0)" />
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="getCourse(query.mcName,0)">
                查询</button>
            </div>
          </div>
        </div>
        <scrollable class="list-group" style="height: 320px; overflow-y: auto;">
          <div *ngFor='let item of mcList; let i = index'>
            <a href="#" *ngIf="item" (click)="item.selected = !(item.selected?item.selected:false)" (dblclick)="item.selected=true;moveRight(0)"
              [ngClass]="item.selected? 'active':''"
              class="list-group-item list-group-item-action flex-column align-items-start">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">({{item.course_code}})-{{item.course_name}}-{{item.course_score}}</h5>
              </div>
            </a>
          </div>
        </scrollable>
      </div>

    </div>

    <div style="width:20px;vertical-align: middle">
      <div style="margin: 0 auto;top: 30%;position: relative;">
        <a href="#" (click)="moveRight(0)"><em class="fa fa-angle-right bgicon"></em></a><br>
        <a href="#" (click)="moveLeft(0)"><em class="fa fa-angle-left bgicon"></em></a><br>
      </div>
    </div>

    <div class="col col-lg-5">

      <div class="card bg-light">
        <div class="card-header">
          选择后专业课程
        </div>
        <scrollable class="list-group" style="height: 320px; overflow-y: auto;">
          <div *ngFor='let item of mcArray; let i = index'>
            <a href="#" *ngIf="item" (click)="item.selected = !(item.selected?item.selected:false)" (dblclick)="item.selected=true;moveLeft(0)"
              [ngClass]="item.selected? 'active':''"
              class="list-group-item list-group-item-action flex-column align-items-start">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">({{item.course_code}})-{{item.course_name}}-{{item.course_score}}</h5>
              </div>
            </a>
          </div>
        </scrollable>
      </div>

    </div>
  </div>

  <div class="row mt-3">
    <div class="col-lg-12">
      <h5 class="col-lg-3 text-lg-left text-dark"><strong>选择顶替课程【原课程】：</strong></h5>
    </div>
  </div>
  <div class="row mt-3">

    <div class="col col-lg-5">

      <div class="card bg-light">
        <div class="card-header">
          <div class="col-lg-10">
            <div class="input-group mr-1 input-group-sm">
              <label>顶替课程：</label>
              <input class="input-sm form-control" type="text" placeholder="请输入课程代码或者名称" [(ngModel)]="query.oldName"  (keyup) = "keyChange($event, query.oldName,1)"/>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="getCourse(query.oldName,1)">
                查询</button>
            </div>
          </div>
        </div>
        <scrollable class="list-group" style="height: 320px; overflow-y: auto;">
          <div *ngFor='let item of oldList; let i = index'>
            <a href="#" *ngIf="item" (click)="item.selected = !(item.selected?item.selected:false)" (dblclick)="item.selected=true;moveRight(1);"
              [ngClass]="item.selected? 'active':''"
              class="list-group-item list-group-item-action flex-column align-items-start">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">({{item.course_code}})-{{item.course_name}}-{{item.course_score}}</h5>
              </div>
            </a>
          </div>
        </scrollable>
      </div>

    </div>

    <div style="width:20px;vertical-align: middle">
      <div style="margin: 0 auto;top: 30%;position: relative;">
        <a href="#" (click)="moveRight(1)"><em class="fa fa-angle-right bgicon"></em></a><br>
        <a href="#" (click)="moveLeft(1)"><em class="fa fa-angle-left bgicon"></em></a><br>
      </div>
    </div>

    <div class="col col-lg-5">

      <div class="card bg-light">
        <div class="card-header">
          选择后专业课程
        </div>
        <scrollable class="list-group" style="height: 320px; overflow-y: auto;">
          <div *ngFor='let item of oldArray; let i = index'>
            <a href="#" *ngIf="item" (click)="item.selected = !(item.selected?item.selected:false)" (dblclick)="item.selected=true;moveLeft(1);"
              [ngClass]="item.selected? 'active':''"
              class="list-group-item list-group-item-action flex-column align-items-start">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">({{item.course_code}})-{{item.course_name}}-{{item.course_score}}</h5>
              </div>
            </a>
          </div>
        </scrollable>
      </div>

    </div>
  </div>

  <div class="row mt-3">

    <label class="col col-lg-2 col-form-label text-lg-left">是否适用全部专业：</label>
    <div class="col-lg-2">
      <select class="custom-select" [(ngModel)]="replDetail.is_all" frameDict [dictName]="'YesOrNo'"
        [(dictValue)]="replDetail.is_all" (change)="chooseMajor()">
      </select>
    </div>

    <label class="col col-lg-2 col-form-label text-lg-left">选择顶替规则：</label>
    <div class="col-lg-2">
      <select class="custom-select" [(ngModel)]="replDetail.rule_id" style="width:350px;">
        <option *ngFor="let rule of replyRuleList" value="{{rule.id}}">
          {{rule.remark}}
        </option>
      </select>
    </div>

  </div>

  <div class="row mt-3" [hidden]="majorChooseFlag">
    <div class="col-lg-12">
      <h5 class="col-lg-3 text-lg-left text-dark"><strong>规则适用专业</strong></h5>
    </div>
  </div>

  <div class="row mt-3" [hidden]="majorChooseFlag">
    <div class="col-lg-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>序号</th>
            <th>专业代码-专业名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tr *ngFor="let item of majorList; let i = index">
          <td>{{i+1}}</td>
          <td>{{item.major_code}}-{{item.major_name}}</td>
          <td>
            <a href="#" *ngIf="item.id>0" frameRole res="major_manage" (click)="deleteMajor(item.id)" 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">
      <textarea class="form-control"  placeholder="请填说明" [(ngModel)]="replDetail.remark"
        rows="8"></textarea>
    </div>
  </div>

</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)="hideReplyDetailModal()">×</button>
    </div>

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

    </div>
    <div class="modal-footer">
      <button class="btn btn-info" (click)="saveReplyDetail()">
        <i class="fa fa-info-circle"> </i> 保存
      </button>
      <button class="btn btn-default" (click)="hideReplyDetailModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>
  </div>
</ng-template>

<!-- 专业选择窗口 -->
<ng-template #majorChooseModal>
  <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]="majorChooseTemplate"></div>

    </div>
    <div class="modal-footer">
      <button class="btn btn-info" (click)="showEdit(editTemplateModal,'only')">
        <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 #majorChooseTemplate>
  <form [formGroup]="formModel" (ngSubmit)="showEdit(editTemplateModal,'only')" class="form-validate form-horizontal"
    novalidate>
    <div class="row mt-3">
      <label class="col-lg-3 col-form-label text-lg-right">专业：</label>
      <div class="col-lg-6">
        <flex-select [allowClear]="true" [(items)]="allMajorList" optionValueField="id"
          optionTextField="major_full_name" [(ngModel)]="major_id" placeholder="请选择" formControlName="major_id"
          [formControl]="formModel.controls['major_id']" width="222" noResultsFound="无数据">
        </flex-select>
        <span class="text-danger"
          *ngIf="formModel.get('major_id').hasError('required') && (formModel.get('major_id').dirty || formModel.get('major_id').touched)">请选择专业</span>
      </div>
    </div>
  </form>
</ng-template>