<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>姓名</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无姓名':'请输入姓名'}}"
          [(ngModel)]="editBusiness.name" [disabled]="readonlyFlag" />
      </div>
      <div class="contentItem">
        <span>年龄</span>
        <input class="form-control" type="text" placeholder="{{readonlyFlag ?'暂无年龄信息':'请输入年龄'}}"
          [(ngModel)]="editBusiness.age" [disabled]="readonlyFlag" />
      </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>
        <a style="text-decoration:none;color: #333;margin-right: 16px;" 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" disabled /> -->
      </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 class="contentItem">
        <span>商机来源</span>
        <input class="form-control" type="text" [(ngModel)]="editBusiness.sourceChannel" 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>
        <input class="form-control" type="text" placeholder="商机时间" [(ngModel)]="editBusiness.opportunityDate"
          disabled />
      </div>
      <div class="contentItem">
        <span>商机状态</span>
        <div style="padding: 6px 15px;padding: 6px 15px;color: #e10d0d;font-weight: bold;">
          {{lifeCommonService.checkStr(editBusiness.mdDropOptionId)}}</div>
      </div>
      <!-- <div class="contentItem">
        <span>标签</span>
        <input class="form-control" type="text" placeholder="标签" [(ngModel)]="editBusiness.name"
          [disabled]="readonlyFlag" />
      </div> -->
    </div>
    <div class="tagWrapper">
      <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 class="content" *ngIf="selectedId===2">
    <div style="text-align: center;font-size: 16px;margin-top: 10px;"
      *ngIf="opportunitySurveyAnswersList?.length==0 || !opportunitySurveyAnswersList">
      暂无问卷信息</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===4">
    <div style="text-align: center;font-size: 16px;margin-top: 10px;" *ngIf="isCompletedQuestionnaire!=3">暂无方案</div>
  </div>
  <div class="content" *ngIf="selectedId===3">
    <ul class="recordLists">
      <li *ngFor="let opportunityRecordItem of opportunityRecordInfos">
        <div style="display: flex;justify-content: space-between;">
          <div class="updatedAt">{{opportunityRecordItem.noticeDate}}</div>
          <div class="opportunityRecordItem">{{lifeCommonService.checkStr(opportunityRecordItem.mdDropOptionId)}}</div>
        </div>
        <div class="salesNotice">{{opportunityRecordItem.salesNotice}}</div>
      </li>
      <!-- 待跟进状态永远显示在列表最下面 -->
      <!-- <li>
        <div style="display: flex;justify-content: space-between;">
          <div>{{(editBusiness.opportunityDate).substr(0,10)}}</div>
          <div>{{lifeCommonService.checkStr(editBusiness.mdDropOptionId)}}</div>
        </div>
        <div class="salesNotice">商机状态</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" (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" 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"></div>
    </div>
    <ul class="footer">
      <li (click)="ownOpportunityRecordSave()">确定</li>
      <li (click)="closeToast()">取消</li>
    </ul>
  </div>
</div>
<ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>