<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-xiugaiziliao" *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="姓名" [(ngModel)]="editBusiness.name"
          [disabled]="readonlyFlag" />
      </div>
      <div class="contentItem">
        <span>年龄</span>
        <input class="form-control" type="text" placeholder="年龄" [(ngModel)]="editBusiness.age"
          [disabled]="readonlyFlag" />
      </div>
      <div class="contentItem">
        <span>性别</span>
        <div class="sexWrapper">
          <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='1'}"
            (click)="selectedGender('1')" [disabled]="readonlyFlag">男
          </button>
          <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='2'}"
            (click)="selectedGender('2')" [disabled]="readonlyFlag">女</button>
        </div>
      </div>
      <div class="contentItem">
        <span>手机</span>
        <input class="form-control" type="text" placeholder="手机" [(ngModel)]="editBusiness.mobileNo" disabled />

      </div>
      <div class="contentItem">
        <span>微信</span>
        <input class="form-control" type="text" placeholder="微信" [(ngModel)]="editBusiness.weChat"
          [disabled]="readonlyFlag" />

      </div>
      <div class="contentItem">
        <span>其他联系</span>
        <input class="form-control" type="text" placeholder="其他联系" [(ngModel)]="editBusiness.otherContacts"
          [disabled]="readonlyFlag" />
      </div>
      <div class="contentItem">
        <span>商机来源</span>
        <input class="form-control" type="text" placeholder="商机来源" [(ngModel)]="editBusiness.sourceChannel"
          [disabled]="readonlyFlag" />

      </div>
      <div class="contentItem">
        <span>城市</span>
        <input class="form-control" type="text" placeholder="城市" [(ngModel)]="editBusiness.address"
          [disabled]="readonlyFlag" (click)="selectedArea()" />

      </div>
      <div class="contentItem">
        <span>商机时间</span>
        <input class="form-control" type="text" placeholder="商机时间" [(ngModel)]="editBusiness.opportunityDate"
          disabled />
      </div>
      <div class="contentItem">
        <span>商机状态</span>
        <div>{{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%;">标签</div>
      <div class="tagContent" *ngFor="let tagItem of tagList" (click)="selectTag(tagItem)"
        [ngClass]="{selected:tagItem.selected}" >
        {{tagItem.tagName}}
      </div>
    </div>

  </div>
  <div class="content" *ngIf="selectedId===2">
    <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===3">
    <div class="add">+</div>
    <ul class="record" style="margin-top: 15px;">
      <li>日期</li>
      <li>商机状态</li>
      <li>备注</li>
    </ul>
    <ul class="record" *ngFor="let opportunityRecordItem of opportunityRecordInfos">
      <li>{{(opportunityRecordItem.updatedAt).substr(0,10)}}</li>
      <li>{{lifeCommonService.checkStr(opportunityRecordItem.mdDropOptionId)}}</li>
      <li>{{opportunityRecordItem.salesNotice}}</li>
    </ul>
  </div>
</div>