<div class="panel panel-default">
  <div>
    <!--标题-->
    <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>
  <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">
          <table>
            <tr>
              <td>
          <!-- 支持排序 -->
          <div class="input-group mr-1 input-group-sm">
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键字：</label>
            <input name="query" style="width:180px;" [(ngModel)]="query.query" class="input-sm form-control" type="text" value=""
              maxlength="64" placeholder="请输入查询关键字">
          </div>
        </td>
        <!--
        <td>
          <div class="input-group mr-1 input-group-sm">
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;批次：</label>
            <select class="custom-select" style="width:180px;" [(ngModel)]="query.year" name="year">
              <option value="">请选择</option>
              <option *ngFor="let year of yearArray" value="{{year.year_code}}">
                {{year.year_code}}
              </option>
            </select>
          </div>
        </td>
        -->
        <td>
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">专业状态：</label>

            <select name="status" style="width:180px;" [(ngModel)]="query.status" frameDict [dictName]="'CourseStatus'" class="form-control">
            </select>
          </div>
        </td>
        </tr>
        <tr>
          <td>
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">专业层次：</label>

            <select name="major_level" style="width:180px;" [(ngModel)]="query.major_level" frameDict [dictName]="'MajorLevel'"
              class="form-control">
            </select>
          </div>
        </td>
        <td>
          <div class="input-group mr-1 input-group-sm" [hidden]="permFlag">
            <label class="ml-sm">主考院校：</label>

            <flex-select [url]="SCHOOL_URL" respDataPath="array" optionValueField="id" optionTextField="org_name"
              [(ngModel)]="query.org_id" placeholder="请选择" width="100" noResultsFound="无数据" [ngModelOptions]="{standalone: true}">
            </flex-select>
          </div>
        </td>
          <!-- <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'" class="form-control">
            </select>
          </div> -->
          <td>
          <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>
               
              </td>
              </tr>
              </table>
        </form>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="row mb-2" [hidden]="editShowType=='only' || editShowType=='other'">
      <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)="goEdit(editTemplateModal,'only')" 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="删除" [hidden]="permFlag">
            <i class="fa fa-trash"> 删除</i>
          </button>
          <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
          (click)="syncTask(syncTaskModal, 'modal-md')" title="打印专业课程">
      <i class="fa icon-cloud-download"></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 align="center">专业层次</th>
              <!--<th>所属学科</th>-->
              <!-- <th>是否国考</th> -->
              <th align="center">课程总学分</th>
              <th align="center">毕业总学分</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>{{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>{{item.subject_name}}</td>-->
              <!-- <td [innerHTML]="item.is_nation_exam | frameDict:'NationExam' "></td> -->
              <td align="right">{{item.total_credits}}</td>
              <td align="right">{{item.graduate_total_credits}}</td>
              <td align="center">{{item.status | frameDict: 'CourseStatus'}}</td>
              <!--<td>{{item.stop_certificate_time}}</td>-->
              <td>{{item.org_name}}</td>
              <td width="150"><div title="{{item.remark}}">{{item.remark | subStr: 30}}</div></td>
              <td align="center">
                <a href="#" *ngIf="item.id>0" (click)="goEdit(editTemplateModal,'only','modal-lg',item)" title="编辑"><em
                    class="fa-lg fas fa-edit mr-1"></em></a>
                <a href="#" *ngIf="item.id>0" (click)="delete(item)" title="删除" [hidden]="permFlag"><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="item && 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>

</div>

<!--编辑界面模板-->
<ng-template #editFormTemplate>
  <form [formGroup]="formModel" *ngIf="item" (ngSubmit)="save()" class="form-validate form-horizontal" novalidate>
    <input type="hidden" formControlName="id" [formControl]="formModel.controls['id']" />
<!--
    <div class="row">
      <label class="col-lg-2 col-form-label text-lg-right">所属批次</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="year" [formControl]="formModel.controls['year']"
          [(ngModel)]="item.year">
          <option ng-selected="!item.year" value="">请选择</option>
          <option *ngFor="let year of yearArray" value="{{year.year_code}}">
            {{year.year_code}}
          </option>
        </select>
        <span class="text-danger"
          *ngIf="formModel.get('year').hasError('required') && (formModel.get('year').dirty || formModel.get('year').touched)">请选择年度码</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">国标代码</label>
      <div class="col-lg-4">
        <input class="form-control" cols="5" placeholder="请填写专业国际代码" formControlName="major_standard_code"
          id="major_standard_code" [(ngModel)]="item.major_standard_code"
          [formControl]="formModel.controls['major_standard_code']" />
       </div>

    </div>
  -->
    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right" >专业代码</label>
      <div class="col-lg-4">
        <input class="form-control" cols="5" placeholder="请填写专业代码" formControlName="major_code" id="major_code" 
          [(ngModel)]="item.major_code" [formControl]="formModel.controls['major_code']" [readonly]="!flag" />
        <span class="text-danger"
          *ngIf="formModel.get('major_code').hasError('required') && (formModel.get('major_code').dirty || formModel.get('major_code').touched)">请输入专业代码</span>
        <span class="text-danger"
          *ngIf="formModel.get('major_code').hasError('rangeLength') && (formModel.get('major_code').dirty ||formModel.get('major_code').touched)">最小为3位，最大为8位</span>
        <span class="text-danger"
          *ngIf="formModel.controls['major_code'].hasError('pattern') && (formModel.controls['major_code'].dirty ||formModel.controls['major_code'].touched)">专业代码只能为字符和数字</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">专业名称</label>
      <div class="col-lg-4">
        <input class="form-control" type="text" placeholder="请填写专业名称" formControlName="major_name"
          [formControl]="formModel.controls['major_name']" [(ngModel)]="item.major_name" />
        <span class="text-danger"
          *ngIf="formModel.get('major_name').hasError('required') && (formModel.get('major_name').dirty || formModel.get('major_name').touched)">请输入专业名称</span>
      </div>
    </div>
<!--
    <div class="row mt-3" [hidden]="flag">
      <label class="col-lg-2 col-form-label text-lg-right">新专业代码</label>
      <div class="col-lg-4">
        <input class="form-control" cols="5" [(ngModel)]="newMajor.new_major_code" readonly
          formControlName="new_major_code" [formControl]="formModel.controls['new_major_code']" />
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">新专业名称</label>
      <div class="col-lg-4">
        <input class="form-control" type="text" [(ngModel)]="newMajor.new_major_name" readonly
          formControlName="new_major_name" [formControl]="formModel.controls['new_major_name']" />
      </div>
    </div>
-->

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">专业层次</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="major_level" [formControl]="formModel.controls['major_level']"
          [(ngModel)]="item.major_level" frameDict [dictName]="'MajorLevel'" [(dictValue)]="item.major_level">
        </select>
        <span class="text-danger"
          *ngIf="formModel.get('major_level').hasError('required') && (formModel.get('major_level').dirty || formModel.get('major_level').touched)">请选择专业层次</span>
      </div>

      <!-- <label class="col-lg-2 col-form-label text-lg-right">是否统考</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="is_nation_exam" [formControl]="formModel.controls['is_nation_exam']"
          [(ngModel)]="item.is_nation_exam" frameDict [dictName]="'NationExam'" [(dictValue)]="item.is_nation_exam">
        </select>
        <span class="text-danger" *ngIf="formModel.get('is_nation_exam').hasError('required') && (formModel.get('is_nation_exam').dirty || formModel.get('is_nation_exam').touched)">请选择专业是否统考</span>
      </div> -->
      <label class="col-lg-2 col-form-label text-lg-right">专业状态</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="status" [formControl]="formModel.controls['status']"
          [(ngModel)]="item.status" frameDict [dictName]="'CourseStatus'" [(dictValue)]="item.status">
        </select>
        <span class="text-danger"
          *ngIf="formModel.get('status').hasError('required') && (formModel.get('status').dirty || formModel.get('status').touched)">请选择专业状态</span>
      </div>
    </div>
<!--
    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">一级学科</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="subject_pid" [formControl]="formModel.controls['subject_pid']"
          [(ngModel)]="item.subject_pid" (change)="childSubject(item.subject_pid)">
          <option value="">请选择</option>
          <option *ngFor="let subject of subjectArray" value="{{subject.id}}">
            {{subject.subject_name}}
          </option>
        </select>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">二级学科</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="subject_id" [formControl]="formModel.controls['subject_id']"
          [(ngModel)]="item.subject_id" value="{{item.subject_id}}">
          <option value="">请选择</option>
          <option *ngFor="let child of childSubjectArray" value="{{child.id}}" [selected]="child.id == item.subject_id">
            {{child.subject_name}}
          </option>
        </select>
      </div>
    </div>
  -->

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">毕业总学分</label>
      <div class="col-lg-4">
        <input class="form-control" type="number" placeholder="请填写专业总学分" formControlName="graduate_total_credits"
          [formControl]="formModel.controls['graduate_total_credits']" [(ngModel)]="item.graduate_total_credits" />
          <span class="text-danger"
          *ngIf="formModel.get('graduate_total_credits').hasError('required') && (formModel.get('graduate_total_credits').dirty || formModel.get('graduate_total_credits').touched)">请填写毕业总学分</span>
        </div>
      <label class="col-lg-2 col-form-label text-lg-right">停止办证时间</label>
      <div class="col-lg-4">
        <div class="input-group">
          <input class="form-control" type="text" formControlName="stop_certificate_time"
            [formControl]="formModel.controls['stop_certificate_time']" DateTimePicker [dpType]="'time'"
            [dpValue]="item.stop_certificate_time" [(ngModel)]="item.stop_certificate_time" />
          <div class="input-group-append">
            <div class="input-group-text"><i class="icon-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-3">
     
      <label class="col-lg-2 col-form-label text-lg-right">主考院校</label>
      <div class="col-lg-4">
          <flex-select [allowClear]="true" [url]="SCHOOL_URL" respDataPath="array" optionValueField="id"
          optionTextField="org_name" [(ngModel)]="item.org_id" placeholder="请选择"
          formControlName="org_id" [formControl]="formModel.get('org_id')"
          width="220" noResultsFound="无数据">
          </flex-select>

        <span class="text-danger"
          *ngIf="formModel.get('org_id').hasError('required') && (formModel.get('org_id').dirty || formModel.get('org_id').touched)">请选择主考院校</span>
      </div>
      <!--
      <label class="col-lg-2 col-form-label text-lg-right">是否新专业</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="is_new_major" [formControl]="formModel.controls['is_new_major']"
          [(ngModel)]="item.is_new_major" >
          <option value="">请选择</option>
          <option value="0">否</option>
          <option value="1">是</option>
        </select>
      </div>
      -->
    </div>
<!--
    <div class="row mt-3">

      <label class="col-lg-2 col-form-label text-lg-right">是否允许社会考生毕业</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="is_allow_social" [formControl]="formModel.controls['is_allow_social']"
          [(ngModel)]="item.is_allow_social" >
          <option value="">请选择</option>
          <option value="0">否</option>
          <option value="1">是</option>
        </select>
      </div>
    </div>
-->

    <!-- <div class="row mt-3"> -->

    <!-- <label class="col-lg-2 col-form-label text-lg-right">开考类型</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="start_exam_type" [formControl]="formModel.controls['start_exam_type']" [(ngModel)]="item.start_exam_type"
          frameDict [dictName]="'ExamOpenType'" [(dictValue)]="item.start_exam_type">
        </select>
        <span class="text-danger" *ngIf="formModel.get('start_exam_type').hasError('required') && (formModel.get('start_exam_type').dirty || formModel.get('start_exam_type').touched)">请选择开考类型</span>
      </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" formControlName="remark" placeholder="请填写描述信息" [(ngModel)]="item.remark"
          rows="8"></textarea>
      </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)="save()">
        <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 #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-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>
  <form class="form-inline">
      <div class="row mb-3 ml-1">
          <div class="col-lg-12" style="width:100%;">
              
                  <div class="input-group mr-1 input-group-sm">
                      <label>考试批次:</label>
                          <flex-select
                          [url]= "'pl/plExamTime/list.htm'"
                          respDataPath= "array"
                          optionValueField="id"
                          optionTextField="examyearmonth"
                          [(ngModel)]="query.exam_time_id"
                          placeholder="请选择"
                          width = "80"
                          noResultsFound = "无数据"
                          [ngModelOptions]="{standalone: true}"
                          (ngModelChange)="selectCourse($event)"
                          >
                      </flex-select>
                  </div>
            </div>
          </div>
        </form>

  <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 align="center">课程代码</th>
          <th>课程名称</th>
          <th>课程属性</th>
          <th align="center">学分</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 align="center">{{item.course_code}}</td>
          <td>{{item.course_name}}</td>
          <td [innerHTML]="item.course_nature | frameDict:'CourseNature' "></td>
          <td align="right">{{item.course_score === 'null' ? 0 : item.course_score}}</td>
          <td>{{item.textbook_name}}</td>
          <td *ngIf="!item.file_path">{{item.textbook_outline}}</td>
          <td *ngIf="item.file_path"><a href="#" (click)="downloadFile(item.textbook_id);">{{item.textbook_outline}}</a></td>

          <td>{{item.textbook_writer}}</td>
          <td>{{item.textbook_publisher}}</td>
          <td>{{item.textbook_revision}}</td>
        </tr>
      </table>
    </div>
  </div>
</ng-template>


                          
<ng-template #syncTaskModal>
    <div class="modal-content">
      <div class="modal-header info-success-qm">
        <div class="pull-left">
          <em class="fa-lg fas fa-edit "></em> <span>打印专业课程</span>
        </div>
  
        <button type="button" class="close" (click)="hideModalWin()">×</button>
      </div>
  
      <div class="modal-body">
        <div [ngTemplateOutlet]="syncTemplate"></div>
  
      </div>
      <div class="modal-footer">
        <button class="btn btn-info" (click)="downloadMajor()">
          <i class="fa fa-info-circle"> </i> 打印
        </button>
        <button class="btn btn-default" (click)="hideModalWin()">
          <i class="icon-close"> </i> 取消
        </button>
      </div>
    </div>
  </ng-template>
  
  <ng-template #syncTemplate>
    <div class="row mt-3">
      <label class="col-lg-3 col-form-label text-lg-right">考试批次</label>
      <div class="col-lg-5">
          <flex-select
          [url]= "'pl/plExamTime/list.htm'"
          respDataPath= "array"
          optionValueField="id"
          optionTextField="examyearmonth"
          [(ngModel)]="query.exam_time_id"
          placeholder="请选择"
          width = "80"
          noResultsFound = "无数据"
          [ngModelOptions]="{standalone: true}"
          >
        </flex-select>
        
      </div>
    </div>
  
    
  
  </ng-template>