<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" [minDate]="minDate"
							[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>
					<div style="display: flex;justify-content: flex-end;align-items: center;">
						<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" style="width:55%;padding:6px 12px 6px 0" type="text" [(ngModel)]="editBusiness.mobileNo" 
							placeholder="请输入手机号" maxlength="11" (blur)="inputBlur()" />
					</div>
				</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;flex-grow: 1;">
					  <div style="margin-left:50px">
					  	<textarea class="form-control" style="padding: 0;" type="textarea" [disabled]="readonlyFlag"
					  		[(ngModel)]="editBusiness.remark" placeholder="备注信息" (blur)="inputBlur()" >
					  	</textarea>
					  </div>
					</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 && isSfpShow == false">
		<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>

		<div *ngIf="isSfpShow" style="display:flex;font-size: 15px;">
			<!-- <div>日程开始/结束时间</div>
		<div class="timeContent">
		  <div class="picker_list">
		    <PickerView [data]="seasons" [cols]='3' [cascade]="false" [ngModel]="taskTimeFrom" [indicatorStyle]="{'background':'#f6f6f6','border-radius':'50px','z-index':'0'}" (ngModelChange)="onChange($event,1)"></PickerView>
		  </div>
		  <div style="color: #d9dadc;width: 10%;text-align: center;">到</div>
		  <div class="picker_list">
		    <PickerView [data]="seasons" [cascade]="false" [cols]='3' [ngModel]="taskTimeEnd" [indicatorStyle]="{'background':'#f6f6f6','border-radius':'50px','z-index':'0'}" (ngModelChange)="onChange($event,2)"></PickerView>
		  </div>
		</div> -->
			<div>添加日程时间</div>
			<div style="display:flex;">
				<div style="width:50%"><input type="Time" id="remark" class="form-control" placeholder="输入开始时间" [(ngModel)]="taskTimeFrom"
						(blur)="inputBlur()"></div>
				<div style="width:50%"><input type="Time" id="remark" class="form-control" placeholder="输入结束时间" [(ngModel)]="taskTimeEnd"
						(blur)="inputBlur()"></div>
			</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]="'text'" [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>
	<!-- SFP咨询问卷 -->
	<div id="iframeDiv" style="width: 100%;flex-grow: 1;border: medium none;display:flex" >
	<!-- 	<iframe  [src]="transform(iframeUrl)"
			style="width: 100%;flex-grow: 1;border: medium none;">
		</iframe> -->
	</div>
</div>
<ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>
<ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>