<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' || editShowType=='nature'">
    <!--查询条件-->
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only' || editShowType=='other' || editShowType=='nature'">
      <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 class="ml-sm">专业状态：</label>

            <select name="status" [(ngModel)]="query.status" frameDict [dictName]="'CourseStatus'" class="form-control">
            </select>
          </div>

          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">专业层次：</label>

            <select name="major_level" [(ngModel)]="query.major_level" frameDict [dictName]="'MajorLevel'"
              [tipFlag]="true" class="form-control">
            </select>
          </div>
          <!--
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">是否国考：</label>
            <select name="nation_exam" [(ngModel)]="query.nation_exam" frameDict [dictName]="'NationExam'"
              [tipFlag]="true" class="form-control">
            </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>
        </form>
      </div>
    </div>

    <!-- 工具栏
    <div class="row mb-2" [hidden]="editShowType=='only'|| editShowType=='other' || editShowType=='nature'">
      <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)="goCourseDetail('only')" title="课程维护">
            <i class="fa fa-plus"></i>课程维护</button>
          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
            (click)="goCourseDetail('nature')" title="课程属性设置">
            <i class="fa icon-wrench"></i>课程属性设置</button>
        </div>

      </div>
    </div>
 -->
    <!--表格-->
    <div class="row" [hidden]="editShowType=='only' || editShowType=='other' || editShowType=='nature'">
      <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 align="center">专业层次</th>
              <th align="center">专业状态</th>
              <!-- <th>是否国家统一计划</th> -->
              <th>主考学校</th>
              <th align="center">总学分</th>
              <th align="center" style="width: 80px;">操作</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><a href="#" (click)="detail('other',item.id)">{{item.major_name}}</a></td>
              <td align="center" [innerHTML]="item.major_level | frameDict:'MajorLevel' "></td>
              <td align="center" [innerHTML]="item.status | frameDict:'CourseStatus' "></td>
              <!-- <td [innerHTML]="item.is_nation_exam | frameDict:'NationExam' "></td> -->
              <td>{{item.org_name}}</td>

              <td align="right">{{item.graduate_total_credits}}</td>
              <td align="center">
                  <a href="#" *ngIf="item.id>0" (click)="goCourseDetailOne(item,'only')" title="课程维护"><em
                      class="fa-lg fas fa-edit mr-1"></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="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="detailMajorModal">
    </ng-container>
  </div>

  <!-- nature编辑页面-->
  <div class="col-lg-12" *ngIf="editShowType != null &&editShowType =='nature'">
    <ng-container *ngTemplateOutlet="courseNatureModal">
    </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)="updateMcDirect(major.id)">
        <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 #editFormTemplate>

  <div class="row mb-1">
    <label class="col-lg-2 col-form-label text-lg-right">专业代码</label>
    <div class="col-lg-2">
      <input class=" form-control-plaintext" type="text" [value]="major.major_code" />
    </div>
    <label class="col-lg-2 col-form-label text-lg-right">专业名称</label>
    <div class="col-lg-2">
      <input class="form-control-plaintext" type="text" [value]="major.major_name" />
    </div>
    
  </div>

  <div class="row mb-1">
      <label class="col-lg-2 col-form-label text-lg-right">专业层次</label>
      <div class="col-lg-2">
        <input class="form-control-plaintext" type="text" [value]="major.major_level | frameDict: 'MajorLevel'" />
      </div>
    
    <label class="col-lg-2 col-form-label text-lg-right">总学分</label>
    <div class="col-lg-2">
      <input class="form-control-plaintext" type="text" *ngIf="major.graduate_total_credits" [value]="major.graduate_total_credits" />
    </div>
  </div>
  

  <div class="row mb-2">

    <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)="goCourseAdd(courseTemplateModal,'modal-lg')" title="添加">
          <i class="fa fa-plus"></i>添加课程</button>

          <button class="btn mr-1 btn-sm bg-danger" (click)="removeAllCourse(major.id)" data-toggle="tooltip"
            data-placement="left" title="删除课程">
            <i class="fa fa-trash"></i>删除课程</button>

          <!--
        <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
          (click)="removeCourse(major.id)" title="移除">
          <i class="fa fa-plus"></i>移除课程</button>
          -->
      </div>
    </div>
  </div>

  <div class="row">
<!--
      <div class="col-lg-3 ml-0" style="padding-bottom: 5px;">
          <div class="input-group">
            <input class="form-control" type="text" [(ngModel)]="keyword" placeholder="模糊查询" />
            <div class="input-group-append">
              <button class="btn btn-outline-secondary bg-white" (click)="courseSearch(major.id)"><em
                  class="fa fas fa-search"></em></button>
            </div>
          </div>
        </div>
-->
    <div class="col-lg-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead>
          <th>
            <div class="checkbox c-checkbox">
              <label>
                <input type="checkbox" (change)="checkedMasterToggle($event)" />
                <span class="fa fa-check"></span>
              </label>
            </div>

          </th>
          <th>序号</th>
          <th align="center">课程代码</th>
          <th>课程名称</th>
          <th>课程性质</th>
          <th style="width: 120px;" align="center">学分</th>
          <!-- <th>课程类型</th> -->
         
          <th style="width: 300px;">选修方向</th>
          <th align="center" style="width: 80px;">操作</th>
        </thead>

        <tr *ngFor="let item of courseList; 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>{{i+1}}</td>
          <td align="center">{{item.course_code}}</td>
          <td>{{item.course_name}}</td>
          <td style="width: 300px;">
            <select name="course_nature" [(ngModel)]="item.course_nature" frameDict [dictName]="'CourseNature'" (change)="updateMcDirect(item.major_id,item.course_id, item.direct_remark,item.course_nature)"
              [(dictValue)]="item.course_nature" [tipFlag]="true" class="form-control">
            </select>
          </td>

          <!--<td>{{item.course_score === 'null' ? 0 : item.course_score}}</td>-->
          <td><input style="text-align: right" class="form-control" type="text" [(ngModel)]="item.course_score" maxlength="6"  (change)="updateMcCourseScore(item.major_id,item.course_id, item.course_score)" /></td>

          <!-- <td>{{item.course_exam_type | frameDict:'CourseNature'}}</td> -->
          <td><input class="form-control" type="text" [(ngModel)]="item.direct_remark"  (change)="updateMcDirect(item.major_id,item.course_id, item.direct_remark,item.course_nature)" /></td>
          <td align="center">
            
              <a href="#" (click)="removeCourse(major.id,item)" title="移除课程"><em class="fa-lg fas fa-trash mr-1"
                  style="color:#F56D6D"></em></a>
            </td>
        </tr>
      </table>
    </div>

    
  </div>

</ng-template>


<!-- 添加课程 -->
<ng-template #courseTemplateModal>
  <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)="hideModalWin()">×</button>
    </div>

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

    <div class="modal-footer">
      <button class="btn btn-default" (click)="addCourse(major.id)">
        <i class="icon-close"> </i> 添加
      </button>
      <button class="btn btn-default" (click)="hideModalWin()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>

  </div>
</ng-template>

<ng-template #courseTemplate>

  <div class="row mb-3 ml-1">
    <div class="col-lg-12">
      <form (ngSubmit)="courseFramePager.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">
        </div>
        <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="courseFramePager.goSearch()">
          <i class="fa fa-search"></i> 查询</button>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead>
          <th>
            <div class="checkbox c-checkbox">
              <label>
                <input type="checkbox" (change)="courseFramePager.checkedMasterToggle($event)" />
                <span class="fa fa-check"></span>
              </label>
            </div>
          </th>
          <th>课程代码</th>
          <th>课程名称</th>
          <th>学分</th>
          <!-- <th>课程类型</th> -->
        </thead>
        <tr *ngFor="let item of courseFramePager.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>{{item.course_code}}</td>
          <td>{{item.course_name}}</td>
          <td>{{item.course_score}}</td>
          <!-- <td>{{item.course_exam_type | frameDict:'CourseNature'}}</td> -->
        </tr>
      </table>
      <frame-pager [url]="COURSE_URL" hideSearch="true" hasCheck="true" #courseFramePager
        (preReqEvent)="search($event)"></frame-pager>
    </div>
  </div>
</ng-template>



<!-- 专业详情界面 -->
<ng-template #detailMajorModal>
  <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-footer">
      <button class="btn btn-default" (click)="export(major.id)">
        <i class="fa icon-cloud-download"> </i> 导出
      </button>
    </div>

    <div class="modal-body">
      <div [ngTemplateOutlet]="detailTemplate"></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 #detailTemplate>
  <h3 class="text-center font-weight-bold">{{major.major_name}}</h3>
  <p class="text-center">专业代码：{{major.major_code}}</p>
  <div class="row">
    <div class="col-lg-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead>
          <th>序号</th>
          <th>课程代码</th>
          <th>课程名称</th>
          <th>学分</th>
          <th>教材名称</th>
          <th>主编</th>
          <th>出版社</th>
          <th>版次</th>
        </thead>
        <tr *ngFor="let item of ctList; let i = index">
          <td>{{i+1}}</td>
          <td>{{item.course_code}}</td>
          <td>{{item.course_name}}</td>
          <td>{{item.course_score === 'null' ? 0 : item.course_score}}</td>
          <td>{{item.textbook_name}}</td>
          <td>{{item.textbook_writer}}</td>
          <td>{{item.textbook_publisher}}</td>
          <td>{{item.textbook_revision}}</td>
        </tr>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-3 ml-0">
      <div class="input-group">
        <input class="form-control" type="text" [(ngModel)]="content" placeholder="模糊查询" />
        <div class="input-group-append">
          <button class="btn btn-outline-secondary bg-white" (click)="courseContentSearch(major.id)"><em
              class="fa fas fa-search"></em></button>
        </div>
      </div>
    </div>
  </div>
</ng-template>


<ng-template #courseNatureModal>
  <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]="courseNatureTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" (click)="updateMajorCourse(major.id)">
        <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 #courseNatureTemplate>

  <div class="row mb-1">
    <label class="col-lg-2 col-form-label text-lg-right">专业代码</label>
    <div class="col-lg-2">
      <input class=" form-control-plaintext" type="text" [value]="major.major_code" />
    </div>
    <label class="col-lg-2 col-form-label text-lg-right">专业名称</label>
    <div class="col-lg-2">
      <input class="form-control-plaintext" type="text" [value]="major.major_name" />
    </div>
    
  </div>

  <div class="row mb-1">
     
      <label class="col-lg-2 col-form-label text-lg-right">专业层次</label>
      <div class="col-lg-2">
        <input class="form-control-plaintext" type="text" [value]="major.major_level | frameDict: 'MajorLevel'" />
      </div>
    </div>

  <div class="row mt-3">
<!--
      <div class="col-lg-3 ml-0" style="padding-bottom: 5px;">
          <div class="input-group">
            <input class="form-control" type="text" [(ngModel)]="keyword" placeholder="模糊查询" />
            <div class="input-group-append">
              <button class="btn btn-outline-secondary bg-white" (click)="courseSearch(major.id)"><em
                  class="fa fas fa-search"></em></button>
            </div>
          </div>
        </div>
-->
    <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>课程名称</th>
           
            <th>课程性质</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of courseList; let i = index">
            <td>{{i+1}}</td>
            <td align="center">{{item.course_code}}</td>
            <td>{{item.course_name}}</td>
            <!--<td>{{item.course_score === 'null' ? 0 : item.course_score}}</td>-->

            <td style="width: 350px;">
              <select name="course_nature" [(ngModel)]="item.course_nature" frameDict [dictName]="'CourseNature'"
                [(dictValue)]="item.course_nature" [tipFlag]="true" class="form-control">
              </select>
            </td>
            
           
          
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</ng-template>