<div class="courseDetailContainer">
  <div class="courseInitShow">  
    <video *ngIf="!pdfPath" #video 
      [src]="fileUploadItem?.filePath"
      controls="true"
      [poster]="fileUploadItem?.fileFirstImg"
      width="100%" height="200px"  preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture>
        您的浏览器不支持 video 标签。
    </video>
    
  </div>
  <div class="courseTitle">
    <h4>{{fileUploadItem?.itemName}}</h4>
    <div>
      <span *ngIf="pdfPath">立即阅读</span>
      <span>不可下载</span>
    </div>
  </div>
  <div class="courseIntroContent">
    <div class="tab">
      <span [ngClass]="{'actived': tabType===1}" (click)="switchTab(1)">介绍</span>
      <span [ngClass]="{'actived': tabType===2}" (click)="switchTab(2)">目录</span>
      <span [ngClass]="{'actived': tabType===3}" (click)="switchTab(3)">讲师</span>
    </div>
    <div class="tabContent">
      <div class="introContent" *ngIf="tabType===1">
        <p [innerHTML]="fileUploadItem?.fileIntroduce"></p>
      </div>
      <div class="catalogueContent" *ngIf="tabType===2">
        <div class="courseSectionTotal">共{{fileUploadItemList?.length}}节</div>
        <div class="courseCatalogue">
          <ul>
            <li *ngFor="let fileUploadItem of fileUploadItemList;index as i" (click)="selectVideo(fileUploadItem)">
              <div>
                <p>{{i + 1}}.</p>
                <p>
                  <span>{{fileUploadItem?.itemName}}</span>
                  <span>{{fileUploadItem?.maxViewTime | secondsTransfer}}/{{fileUploadItem?.totalTime | secondsTransfer}}</span>
                </p>
              </div>
              <div style="display: flex;flex-direction:column;align-items:center;width:58px;">
                <p style="width: 30px;">
                  <img [src]="'assets/images/icons/' + (fileUploadItem.learningStatus == '3' ? 'disablePlay' : 'play') + '.png'" alt="" srcset="">
                </p>
                <p>{{fileUploadItem.learningStatus == '3' ? '不可播放' : '播放'}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="lecturerContent" *ngIf="tabType===3">
        <div class="lecturerIntro">
          <div class="lecturerUrl">
            <img src="{{LecturerInfo?.lecturerUrl}}" alt="" srcset="">
          </div>
          <div>
            <p><span class="lecturerName">{{LecturerInfo?.lecturerName}}</span></p>
            <ng-container *ngIf="LecturerInfo?.lecturerRankNames">
              <p *ngFor="let item of LecturerInfo.lecturerRankNames.split(',')" class="lecturerTitle"><span>{{item}}</span></p>
            </ng-container>
          </div>
        </div>
        <h4>
          <span>讲师介绍</span>
        </h4>
        <p [innerHTML]="LecturerInfo?.lecturerIntroduce" style="padding:0 14px 0px 14px;color:#333"></p>
      </div>
    </div>
    
  </div>
</div>

<!-- 提示弹窗 -->
<Modal [(ngModel)]="this.state.modal1" [transparent]="true" [maskClosable]="true" (onClose)="onClose('modal1')">
  <div [ngStyle]="{ height: 100, overflow: 'scroll',color:'#000' }">
    请完成上一个课程学习，此课程才能打开哦！
  </div>
</Modal>