<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="wrapper_item">
        <div class="contentItem">
          <span>姓名</span>
          <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无姓名':'请输入姓名'}}"
            [(ngModel)]="editBusiness.name" [disabled]="readonlyFlag" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>出生日期</span>
          <div>
            <ListItem
              DatePicker
              [mode]="'date'"
              [disabled]="readonlyFlag"
              [maxDate] = "today"
              [(ngModel)]="editBusiness.birthDate"
              (onOk)="onOk($event)">
              <Brief *ngIf="!readonlyFlag">{{editBusiness.birthDate ? (editBusiness.birthDate | date:'yyyy-MM-dd') : '请输入出生日期'}}</Brief>
              <Brief *ngIf="readonlyFlag">{{editBusiness.birthDate ? (editBusiness.birthDate | date:'yyyy-MM-dd') : '暂无出生日期信息'}}</Brief>
            </ListItem>
           </div>
        </div>
        <div class="contentItem">
          <span>年龄</span>
          <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无年龄信息':'请输入年龄'}}"
            [(ngModel)]="editBusiness.age" [disabled]="readonlyFlag || editBusiness.birthDate" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>性别</span>
          <div class="sexWrapper">
            <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='1' && maleFlag && femaleFlag}"
              (click)="selectedGender('1')" [disabled]="readonlyFlag" *ngIf="sexFlag && maleFlag">男
            </button>
            <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.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>城市</span>
          <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无城市信息':'请输入城市'}}"
            [(ngModel)]="editBusiness.address" [disabled]="readonlyFlag" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>血型</span>
          <select name="bloodTypeId" id="bloodTypeId" class="form-control" [disabled]="readonlyFlag"
            [(ngModel)]="editBusiness.bloodTypeId" (blur)="inputBlur()">
            <option value="">{{readonlyFlag ?'暂无血型信息':'请选择血型'}}</option>
            <option *ngFor="let businessBloodItem of businessBloodList" [value]="businessBloodItem.id">
              {{businessBloodItem.dropOptionName}}</option>
          </select>
          <!--<input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无血型信息':'请选择血型'}}"-->
          <!--[disabled]="readonlyFlag" [(ngModel)]="editBusiness.bloodTypeId" (blur)="inputBlur()" />-->
        </div>
        <div class="contentItem">
          <span>星座</span>
          <select name="businessZodiacId" id="businessZodiacId" class="form-control" [disabled]="readonlyFlag"
            [(ngModel)]="editBusiness.zodiacTypeId" (blur)="inputBlur()">
            <option value="">{{readonlyFlag ?'暂无星座信息':'请选择星座'}}</option>
            <option *ngFor="let businessZodiacItem of businessZodiacList" [value]="businessZodiacItem.id">
              {{businessZodiacItem.dropOptionName}}</option>
          </select>
          <!--<input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无星座信息':'请选择星座'}}"-->
          <!--[disabled]="readonlyFlag" [(ngModel)]="editBusiness.zodiacTypeId" (blur)="inputBlur()" />-->
        </div>
      </div>
      <div class="wrapper_item">
        <div class="contentItem">
          <span>手机</span>
          <a *ngIf="opportunityId!=0" style="text-decoration:none;color: #333;margin-right: 12px;"
            href="tel:{{editBusiness.mobileNo}}">
            <i class="iconfont icon-dianhua" style="color: #e10d0d;"></i>
            {{editBusiness.mobileNo}}</a>
          <input class="form-control" type="text" [(ngModel)]="editBusiness.mobileNo" *ngIf="opportunityId==0"
            placeholder="请输入手机号" maxlength="11" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>微信</span>
          <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无微信':'请输入微信'}}"
            [(ngModel)]="editBusiness.weChat" [disabled]="readonlyFlag" (blur)="inputBlur()" />

        </div>
        <div class="contentItem">
          <span>其他联系</span>
          <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无其他联系方式':'请输入其他联系方式'}}"
            [(ngModel)]="editBusiness.otherContacts" [disabled]="readonlyFlag" (blur)="inputBlur()" />
        </div>

      </div>
      <div class="wrapper_item">
        <div class="contentItem">
          <span>预计FYP</span>
          <input class="form-control" type="number" placeholder="{{readonlyFlag ?'暂无预计FYP':'请输入预计FYP'}}"
            [disabled]="readonlyFlag" [(ngModel)]="editBusiness.fyp" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>预计FYC</span>
          <input class="form-control" type="number" placeholder="{{readonlyFlag ?'暂无预计FYC':'请输入预计FYC'}}"
            [disabled]="readonlyFlag" [(ngModel)]="editBusiness.fyc" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>预计成交件数</span>
          <input class="form-control" type="number" placeholder="{{readonlyFlag ?'暂无预计件数':'请输入预计件数'}}"
            [disabled]="readonlyFlag" [(ngModel)]="editBusiness.pieces" (blur)="inputBlur()" />
        </div>
        <div class="contentItem">
          <span>预计成交时间</span>
          <input class="form-control" type="date" placeholder="{{readonlyFlag ?'暂无预计成交时间':'请输入预计成交时间'}}"
            [disabled]="readonlyFlag" [(ngModel)]="editBusiness.timeToClose" (blur)="inputBlur()" />
        </div>
      </div>
      <div class="wrapper_item">
        <div class="contentItem">
          <span>商机来源</span>
          <select *ngIf="opportunityId==0" name="businessSourceId" id="businessSourceId" class="form-control"
            [(ngModel)]="editBusiness.sourceFrom" [disabled]="readonlyFlag" (blur)="inputBlur()">
            <option value="">{{readonlyFlag ?'暂无商机来源':'请选择商机来源'}}</option>
            <option *ngFor="let businessSourceItem of businessSourceList" [value]="businessSourceItem.id">
              {{businessSourceItem.dropOptionName}}</option>
          </select>
          <input *ngIf="opportunityId!=0" class="form-control" type="text" [(ngModel)]="editBusiness.sourceChannel"
            disabled placeholder="{{editBusiness.sourceChannel ?editBusiness.sourceChannel:'暂无商机来源'}}" />
        </div>
        <div class="contentItem">
          <span>商机时间</span>
          <input class="form-control" type="text" placeholder="商机时间" [(ngModel)]="editBusiness.opportunityDate"
            disabled />
        </div>
        <div class="contentItem">
          <span>商机状态</span>
          <div style="padding: 6px 12px;color: #e10d0d;font-weight: bold;">
            {{editBusiness.mdDropOptionName?editBusiness.mdDropOptionName:'待跟进'}}</div>
        </div>
      </div>
      <div class="wrapper_item" style="border: none;margin-bottom: 0;">
        <div class="contentItem">
          <span>派遣专家</span>
          <span *ngIf="editBusiness?.expertType == 0"
            style="padding: 6px 10px;border: 1px #e10d0d solid;border-radius: 20px;margin-right: 10px;"
            (click)="openPopInfo('申请已收到，会在1个工作日派遣专家')">申请专家支持</span>
          <span *ngIf="editBusiness?.expertType == 1" style="padding:6px 20px;">派遣中...</span>
          <span *ngIf="editBusiness?.expertType == 2"
            style="padding:6px 20px;">{{editBusiness?.expertPractitionerName}}</span>
        </div>
      </div>
      <!-- <div class="contentItem">
        <span>标签</span>
        <input class="form-control" type="text" placeholder="标签" [(ngModel)]="editBusiness.name"
          [disabled]="readonlyFlag" />
      </div> -->
      <div class="wrapper_item" style="border: none;margin-bottom: 0;">
        <div class="contentItem">
          <span>备注</span>
          <div style="padding: 6px 15px;">
            <input class="form-control" style="padding: 0;" type="text" [disabled]="readonlyFlag"
              [(ngModel)]="editBusiness.remark" placeholder="备注信息" (blur)="inputBlur()" />
          </div>
        </div>
      </div>
      <!-- 如果是新增商机，不需要打标签-->
      <div class="tagWrapper" *ngIf="opportunityId != 0">
        <div style="width: 100%;height: 34px;line-height: 34px;">标签</div>
        <!-- <div class="tagContent" *ngFor="let tagItem of tagList" (click)="selectTag(tagItem)"
        [ngClass]="{selected:tagItem.selected}">
        {{tagItem.tagName}}
      </div> -->
        <div class="tagContent selected" *ngFor="let tagItem of opportunityCustomerTags">
          {{tagItem.tagName}}
        </div>
      </div>
    </div>
  </div>
  <!-- 咨询问卷 -->
  <div class="content" *ngIf="selectedId===2">
    <div style="text-align: center;font-size: 16px;margin-top: 10px;"
      *ngIf="opportunitySurveyAnswersList?.length==0 || !opportunitySurveyAnswersList">
      暂无问卷信息</div>
    <div *ngIf="!(opportunitySurveyAnswersList?.length==0 || !opportunitySurveyAnswersList)">
      <div class="viewReportBtn" *ngIf="isCompletedQuestionnaire == 3" (click)="viewReport()">查看报告</div>
      <div class="viewReportBtn" *ngIf="isCompletedQuestionnaire != 3">暂无报告</div>
    </div>
    <div class="answerContent" *ngFor="let surveyItem of opportunitySurveyAnswersList">
      <div class="questionTitle">{{surveyItem.questionName}}</div>
      <div class="questionContent">{{surveyItem.optionName}}</div>
    </div>

  </div>
  <!-- 客户告知书 -->
  <div class="content" *ngIf="selectedId===5">
    <ydlife-e-notice [agreeFlag]="false"></ydlife-e-notice>
    <div class="send">
      <div (click)="eNoticeState=true;">发送给客户签署</div>
    </div>
  </div>
  <!-- 商机跟进 -->
  <div class="content" *ngIf="selectedId===3">
    <ul class="recordLists">
      <li *ngFor="let opportunityRecordItem of opportunityRecordInfos;index as idx">
        <div style="display: flex;justify-content: space-between;height: 25px;">
          <div class="updatedAt">{{opportunityRecordItem.noticeDate}}</div>
          <div class="opportunityRecordItem">
           <a *ngIf="opportunityRecordItem.informedOssPath" href="{{opportunityRecordItem.informedOssPath}}" target="_blank"><i class="iconfont icon-pdf" style="color: #C81B1E;margin-right:5px"></i></a>
          <span [ngStyle]="setBackgroundColor(opportunityRecordItem)">{{opportunityRecordItem.mdDropOptionName?opportunityRecordItem.mdDropOptionName:'待跟进'}}</span>
          </div>
        </div>
        <div class="salesNotice">
          <span>
            <input type="text" class="form-control" [(ngModel)]="opportunityRecordItem.salesNotice"
              [disabled]="remarkId!=opportunityRecordItem.id" (blur)="inputBlur()" />
          </span>
          <i *ngIf="remarkId!=opportunityRecordItem.id" class="iconfont icon-bianji"
            (click)="editRemark(opportunityRecordItem.id)"></i>
          <i *ngIf="remarkId==opportunityRecordItem.id" class="iconfont icon-save"
            (click)="ownOpportunityRecordSave(opportunityRecordItem)"></i>
        </div>
      </li>
      <!-- <li>
        <div class="salesNotice">{{(editBusiness.opportunityDate).substr(0,10)}}</div>
        <div style="display: flex;justify-content: space-between;">
          <div>商机状态</div>
          <div>待跟进</div>
        </div>
      </li> -->
    </ul>
    <div class="add" *ngIf="status==0" (click)="showToast()">
      <!-- <i class="iconfont icon-jia" (click)="ownOpportunityRecordSave()"></i> -->
      <i class="iconfont icon-jiahao"></i>
    </div>

  </div>
  <div class="toastWrapper toast" *ngIf="isShow" (click)="closeToast()">

  </div>
  <!--编辑框-->
  <div class="editContainer" *ngIf="isShow">
    <div>
      <div>跟进状态</div>
      <div style="position:relative">
        <select name="businessStatus" (onChange)="inputBlur()" id="businessStatus" class="form-control"
          [(ngModel)]="opportunityRecordId">
          <option value="null">请选择</option>
          <option *ngFor="let businessStatusItem of businessStatusList" value="{{businessStatusItem.id}}">
            {{businessStatusItem.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)]="salesNotice"
          (blur)="inputBlur()"></div>
    </div>
    <div>
      <div>跟进时间</div>
      <div><input style="-webkit-appearance: none;" id="time" class="form-control" type="date"
          [(ngModel)]="opportunityRecordNoticeDate" (blur)="inputBlur()"></div>
    </div>
    <ul class="footer">
      <li (click)="ownOpportunityRecordSave()">确定</li>
      <li (click)="closeToast()">取消</li>
    </ul>
  </div>

  <!-- 客户告知书弹窗 -->
  <div class="eNoticeDialog">
    <div class="eNoticeContent">
      <Modal [(ngModel)]="this.eNoticeState" [transparent]="true"  [closable]="true" (onClose)="onClose()">
        <div [ngStyle]="{ height: 300, overflow: 'scroll' }">
          <div class="am-list" style="margin:0;">
            <div class="am-list-item">
              <InputItem [clear]="true"
              [value]="editBusiness.name"
              (onChange)="editBusiness.name = $event">姓名:</InputItem>
            </div>
            <div class="am-list-item">
              <InputItem [type]="'phone'"
              [value]="editBusiness.mobileNo"
              (onChange)="editBusiness.mobileNo = $event">手机号码：</InputItem>
            </div>
            <div class="am-list-line" style="color: #999;font-size:12px">
              <p style="margin-bottom: 5px;">（请确保客户姓名和手机号填写正确</p>
              <p>将会用于客户签署告知书时的身份验证）</p>
            </div>
            <div class="am-list-item am-list-item-middle">
              <div class="am-list-line">
                <div class="am-list-content"
                     style="width:100%;color:#fff;text-align:center;background-color: #2179AD;border-radius: 20px;margin:18px auto"
                     (click)="sendENotice()"
                >发送</div>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</div>
<ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>
<ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>
