<div class="wrapper">
  <div class="opt" style="margin-bottom: 10px;justify-content: flex-start;">
    <select [(ngModel)]="mdDropOptionCode" (ngModelChange)="getCode($event)">
      <option [value]="optItem.dropOptionCode" *ngFor="let optItem of optList">
        {{optItem.dropOptionName}}
      </option>
    </select>
    <select [(ngModel)]="year" (ngModelChange)="getCode($event)">
      <option value="null">全部</option>
      <option *ngFor="let yearItem of yearList">{{yearItem}}</option>
    </select>
    <select [(ngModel)]="month" (ngModelChange)="getCode($event)">
      <option *ngFor="let monthItem of monthList">{{monthItem}}</option>
    </select>
    <!-- <div>
      2022年 <span class="iconfont icon-xiangxia"></span>
    </div>
    <div>
      8月 <span class="iconfont icon-xiangxia"></span>
    </div> -->
  </div>
  <ul class="opt">
    <li [ngClass]="{selected:isTeam==0}" (click)="changeIsTeam(0)">团队个人完成率</li>
    <li [ngClass]="{selected:isTeam==1}" (click)="changeIsTeam(1)">团队总完成率</li>
  </ul>
  <div echarts [options]="chartOption" class="chart" style="height: 300px;" #echarts
  (chartClick)="onChartClick($event)">
  </div>
  <p><img src="assets/images/Slice74.png" alt="">点击可查看对应数据</p>
  <div class="list_wrapper">
    <div class="title">
     <span></span> 学习明细
    </div>
    <ul class="list_content">
      <li>经纪人</li>
      <li>直接团队</li>
      <li>团队长</li>
      <li>类型</li>
      <li>学习进度</li>
    </ul>
    <ul class="list_content" *ngFor="let detailItem of detailList"
    (click)="getLearnDetail(detailItem.practitionerId)">
      <li>{{detailItem.name}}</li>
      <li>{{detailItem.systemName}}</li>
      <li>{{detailItem.leaderName}}</li>
      <li>{{detailItem.dropOptionName}}</li>
      <li style="color: #EF6C40;">{{detailItem.progress}}</li>
    </ul>
  </div>
</div>
<div class="toastWrapper toast" *ngIf="detailFlag">
  <img src="assets/images/Slice3.png" *ngIf="detailFlag" (click)="detailFlag = false;" 
  alt="colse">
</div>
<div id="toastContent" *ngIf="detailFlag">
    <ul class="status">
      <li style="border-right: 1px #F4F4F4 solid;">
        <span>{{this.total}}</span><span>总视频数</span>
      </li>
      <li><span>{{this.count}}</span><span>已完成学习</span></li>
    </ul>
    <div class="list_wrapper">
      <div class="title">
       <span></span> 视频列表
      </div>
      <ul class="list_content">
        <li style="width: 70%;">视频名称</li>
        <li style="width: 30%;">学习状态</li>
      </ul>
      <ul class="list_content" *ngFor="let videoItem of videoList"
      style="border-bottom: 1px #F2F2F2 solid;">
        <li style="width: 70%;text-align: left;">{{videoItem.videoName}}</li>
        <li style="width: 30%;">
          <img *ngIf="videoItem.flag=='0'" src="assets/images/Slice78.png" alt="" >
          <img *ngIf="videoItem.flag=='1'" src="assets/images/Slice77.png" alt="" >
        </li>
        
      </ul>
    </div>
</div>

