<div class="wrapper">
  <ul class="tab">
    <li *ngFor="let titleItem of titleList" (click)="selectTab(titleItem.id)"
      [ngClass]="{selected:selectedId===titleItem.id}">
      <div style="position: relative;">
        <h3>{{titleItem.name}}
        </h3>
      </div>
    </li>
  </ul>
  <div class="content" *ngIf="selectedId===1">
    <i class="iconfont icon-bianji" *ngIf="readonlyFlag" (click)="editInfo()"></i>
    <i class="iconfont icon-save" *ngIf="!readonlyFlag" (click)="saveInfo()"></i>
    <div class="contentDetail">
      <div class="contentItem">
        <span><sub>*</sub>姓名</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无姓名':'请输入姓名'}}"
          [(ngModel)]="editRecruiting.name" [disabled]="readonlyFlag" (blur)="inputBlur()" />
      </div>
      <div class="contentItem">
        <span>年龄</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无年龄信息':'请输入年龄'}}"
          [(ngModel)]="editRecruiting.age" [disabled]="readonlyFlag" (blur)="inputBlur()" />
      </div>
      <div class="contentItem">
        <span>性别</span>
        <div class="sexWrapper">
          <button class="form-control sex" [ngClass]="{'sexBtn':editRecruiting?.gender=='1' && maleFlag && femaleFlag}"
            (click)="selectedGender('1')" [disabled]="readonlyFlag" *ngIf="sexFlag && maleFlag">男
          </button>
          <button class="form-control sex" [ngClass]="{'sexBtn':editRecruiting?.gender=='2' && maleFlag && femaleFlag}"
            (click)="selectedGender('2')" [disabled]="readonlyFlag" *ngIf="sexFlag && femaleFlag">女
          </button>
        </div>
        <input class="form-control" type="text" placeholder="暂无性别信息" *ngIf="!sexFlag" disabled />

      </div>
      <div class="contentItem">
        <span><sub>*</sub>手机</span>
        <a *ngIf="this.potentialId!=0" style="text-decoration:none;color: #333;margin-right: 16px;"
          href="tel:{{editRecruiting.mobileNo}}">
          <i class="iconfont icon-dianhua" style="color: #e10d0d;"></i>
          {{editRecruiting.mobileNo}}
        </a>
        <input *ngIf="this.potentialId==0" class="form-control" type="text" maxlength="11"
          [(ngModel)]="editRecruiting.mobileNo" placeholder="请输入手机号" (blur)="inputBlur()" />
      </div>
      <div class="contentItem">
        <span>微信</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无微信':'请输入微信'}}"
          [(ngModel)]="editRecruiting.wechatId" [disabled]="readonlyFlag" (blur)="inputBlur()" />

      </div>
      <div class="contentItem">
        <span>其他联系</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无其他联系方式':'请输入其他联系方式'}}"
          [(ngModel)]="editRecruiting.othersContacts" [disabled]="readonlyFlag" (blur)="inputBlur()" />
      </div>
      <div class="contentItem">
        <span>学历</span>
        <select class="form-control" [(ngModel)]="editRecruiting.educationLevel" [disabled]="readonlyFlag"
          style=" direction: rtl;" (blur)="inputBlur()">
          <option value=''>{{readonlyFlag ?'暂无学历信息':'请选择学历'}}</option>
          <option *ngFor="let educationLevelItem of educationLevelList" [value]="educationLevelItem.id">
            {{educationLevelItem.name}}
          </option>
        </select>
      </div>
      <div class="contentItem">
        <span>招募来源</span>
        <select class="form-control" [(ngModel)]="editRecruiting.resourceDropMasterId" [disabled]="readonlyFlag"
          style=" direction: rtl;" (blur)="inputBlur()">
          <option value="">{{readonlyFlag ?'暂无招募来源':'请选择招募来源'}}</option>
          <option *ngFor="let resourceItem of resourceList" [value]="resourceItem.id">
            {{resourceItem.dropOptionName}}
          </option>
        </select>
      </div>
      <div class="contentItem" *ngIf="this.id!=0">
        <span>增员创建时间</span>
        <input class="form-control" type="text" placeholder="增员创建时间" [(ngModel)]="editRecruiting.createdAt" disabled />
      </div>
      <div class="contentItem" *ngIf="this.id!=0">
        <span>预计报聘时间</span>
        <input *ngIf="readonlyFlag" class="form-control" type="text"
          placeholder="{{readonlyFlag ?'暂无预计报聘时间':'请选择预计报聘时间'}}" [(ngModel)]="editRecruiting.timeToOnboarding"
          [disabled]="readonlyFlag" (blur)="inputBlur()" />
        <input *ngIf="!readonlyFlag" class="form-control" type="date"
          [ngStyle]="{'margin-right':this.isPC == '1' ? '-8%' : '-4.5%'}"
          placeholder="{{readonlyFlag ?'暂无预计报聘时间':'请选择预计报聘时间'}}" [(ngModel)]="editRecruiting.timeToOnboarding"
          [disabled]="readonlyFlag" (blur)="inputBlur()" />
      </div>
      <div class="contentItem" *ngIf="this.id!=0">
        <span>增员状态</span>
        <div style="padding: 6px 15px;padding: 6px 15px;color: #e10d0d;font-weight: bold;">
          {{editRecruiting.trackStatus}}</div>
      </div>
      <div class="contentItem">
        <span>备注</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无备注':'请输入备注信息'}}"
          [(ngModel)]="editRecruiting.remark" [disabled]="readonlyFlag" (blur)="inputBlur()" />
      </div>
    </div>
  </div>
  <div class="content" *ngIf="selectedId===2" style="text-align: center;font-size: 16px;margin-top: 10px;">
    <div *ngIf="!this.editRecruiting.ossPathResume">
      暂无简历</div>
    <a [href]="this.editRecruiting.ossPathResume">
      {{this.lifeCommonService.getFileName(this.editRecruiting.ossPathResume)}}
    </a>
  </div>
  <div class="content" *ngIf="selectedId===3;">
    <ul class="recordLists">
      <li *ngFor="let recruitTrackInfoItem of recruitTrackInfoList;index as idx;">
        <div style="display: flex;justify-content: space-between;">
          <div class="updatedAt">
            {{recruitTrackInfoItem.trackTime?recruitTrackInfoItem.trackTime:recruitTrackInfoItem.createAt}}</div>
          <div class="opportunityRecordItem">{{recruitTrackInfoItem.trackStatus}}</div>
        </div>
        <div class="salesNotice">
          <span>
            <input type="text" class="form-control" [disabled]="remarkId!=recruitTrackInfoItem.trackId"
              [(ngModel)]="recruitTrackInfoItem.notice" (blur)="inputBlur()">
          </span>
          <i *ngIf="remarkId!=recruitTrackInfoItem.trackId" class="iconfont icon-bianji"
            (click)="editRemark(recruitTrackInfoItem.trackId)"></i>
          <i *ngIf="remarkId==recruitTrackInfoItem.trackId" class="iconfont icon-save"
            (click)="addRecruitTrack(recruitTrackInfoItem)"></i>
        </div>
      </li>
    </ul>
    <div class="add" (click)="this.isShow = true;">
      <i class="iconfont icon-jiahao"></i>
    </div>
  </div>
  <div class="content" *ngIf="selectedId===4;">
    <div class="contentDetail employ">
      <div class="contentItem">
        <span>被邀请人</span>
        <input type="text" [(ngModel)]="this.employQuery.name" class="form-control" [disabled]="approveStatus!=null" />
      </div>
      <div class="contentItem">
        <span>报聘职级</span>
        <select [(ngModel)]="employQuery.mdDropOptionId" class="form-control" (ngModelChange)="getName(1,employQuery.mdDropOptionId)"
        [disabled]="approveStatus!=null">
          <option value=null>请选择</option>
          <option [value]='levelInfos.id' *ngFor="let levelInfos of practitionerLevelInfos">
           {{levelInfos.dropOptionCode}} {{levelInfos.dropOptionName}}
          </option>
        </select>
      </div>
      <div class="contentItem">
        <span>辅导人</span>
        <!-- <select [(ngModel)]="employQuery.mentorPractitionerId" class="form-control" (ngModelChange)="getName(2,employQuery.mentorPractitionerId);getPractitionerDetails(employQuery.mentorPractitionerId)"
        [disabled]="approveStatus!=null">
          <option value=null>请选择</option>
          <option [value]='practitionerInfo.id' *ngFor="let practitionerInfo of practitionerList">
           {{practitionerInfo.name}}
          </option>
        </select> -->
        <div (click)="vagueSearch()">请选择辅导人</div>
      </div>
      <div class="contentItem">
        <span>介绍人</span>
        <select [(ngModel)]="employQuery.introducerPractitionerId" class="form-control" (ngModelChange)="getName(3,employQuery.introducerPractitionerId);"
        [disabled]="approveStatus!=null">
          <option value=null>请选择</option>
          <option [value]='practitionerInfo.id' *ngFor="let practitionerInfo of practitionerList">
           {{practitionerInfo.name}}
          </option>
        </select>
      </div>
      <div class="contentItem">
        <span>体系名</span>
        <div><input type="text" [(ngModel)]="employQuery.subsystem" class="form-control" disabled/></div>
      </div>
      <div class="contentItem">
        <span>体系负责人</span>
        <div><input type="text" [(ngModel)]="employQuery.subsystemOwner" class="form-control" disabled/></div>
      </div>
      <div class="contentItem">
        <span>分公司</span>
        <div><input type="text" [(ngModel)]="employQuery.branch" class="form-control" disabled/></div>
      </div>
    </div>
  </div>
  <footer *ngIf="selectedId===4;" (click)="saveMembership()">
    确认
  </footer>
  <div class="toastWrapper toast" *ngIf="isShow" (click)="this.isShow = false;">
  </div>
  <!--编辑框-->
  <div class="editContainer" *ngIf="isShow">
    <div>
      <div>增员状态</div>
      <div style="position:relative">
        <select name="businessStatus" (onChange)="inputBlur()" id="businessStatus" class="form-control"
          [(ngModel)]="trackStatusId">
          <option value="">请选择</option>
          <option *ngFor="let recruitingStatusItem of recruitingStatusList" value="{{recruitingStatusItem.id}}">
            {{recruitingStatusItem.dropOptionName}}
          </option>
        </select>
        <i class="iconfont icon-xiangxia" style="position: absolute;right: 50px;top: 5px;"></i>
      </div>
    </div>
    <div>
      <div>备注</div>
      <div><input type="text" id="remark" class="form-control" placeholder="输入备注信息" [(ngModel)]="notice"
          (blur)="inputBlur()"></div>
    </div>
    <div>
      <div>跟进时间</div>
      <div>
        <input style="-webkit-appearance: none;" id="time" class="form-control" type="date" [(ngModel)]="trackTime"
          (blur)="inputBlur()">
      </div>
    </div>
    <ul class="footer">
      <li (click)="addRecruitTrack()">确定</li>
      <li (click)="this.isShow = false;">取消</li>
    </ul>
  </div>

  <div class="toastWrapper toast" *ngIf="selectedId===4;">
  </div>
  <!--辅导人介绍人选择框-->
  <div class="editContainer" style="background: #efeff4;padding: 0;" *ngIf="selectedId===4;">
    <SearchBar [placeholder]="'搜索你的增员'" [maxLength]="8"
    (onChange)="change($event)"
          ></SearchBar>
    
    <ul class="practitioner_con">
      <li *ngFor="let practitionerItem of practitionerListShow">
        {{practitionerItem.name}}
      </li>
    </ul>

   
  </div>

</div>
<ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>