<div class="layout">
  <div class="content">
    <div class="questionTitle">
      <div class="titleName">{{ curPageData?.pageName }}</div>
      <div class="page">2/{{this.totalPage}}</div>
    </div>
    <div class="subTitle">(准确年龄才可以精确计算保费)</div>
    <ul class="ageContent">
      <li class="liWrapper" *ngFor="let optionsList of this.curPageData?.questions; index as i"
        style="position: relative;">
        <img src="assets/images/icon2.png"
          *ngIf="(type==2 || type==4) && (optionsList.questionId ==2 || optionsList.questionId ==3)">
        <img src="assets/images/child.png" *ngIf="(type==3 || type==4) && (optionsList.questionId ==4)">
        <img src="assets/images/icon.png" *ngIf="(type==1) && (optionsList.questionId ==2)">
        <img src="assets/images/icon3.png" *ngIf="(type==3) && (optionsList.questionId ==2)">
        <div class="item" style="height: 50px;line-height: 50px;">
          <div class="questionName">{{ optionsList.questionName }}</div>
          <div>{{optionsList.optionName}}</div>
        </div>
        <div class="item ageWrapper">
          <!--家长年龄部分-->
          <input type="range" min='18' max="80" (ngModelChange)="selectedAge(optionsList,optionsList['options'])"
            [(ngModel)]="optionsList.optionName" *ngIf="(optionsList.questionId ==2 || optionsList.questionId ==3)"
            style="position: absolute; opacity: 1; left: 0;width: '100%';top: 0;z-index: 2; " />
          <input type="range" min='0' max="17" (ngModelChange)="selectedAge(optionsList,optionsList['options'])"
            [(ngModel)]="optionsList.optionName" *ngIf=" (optionsList.questionId ==4)"
            style="position: absolute; opacity: 1; left: 0;width: '100%';top: 0;z-index: 2; " />
          <ul class="age" *ngIf="optionsList.questionId ==2 || optionsList.questionId ==3">
            <li><span>18</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>30</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>40</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>50</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>60</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>70</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>80</span></li>
          </ul>
          <ul class="age childage" *ngIf="optionsList.questionId ==4">
            <li><span>0</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>5</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>10</span></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><span>15</span></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <span style="color: #4446e2;position: absolute;right: 5%;bottom:26%;font-size: 18px;font-weight: bold;"
          *ngIf="(optionsList.questionId==4) && !optionsList.questionSubId" (click)="addChild()"
          [ngClass]="{'disabled':totalChildLimitCount<=0}">添加孩子</span>
        <!-- <span style="color: #4446e2;position: absolute;right: 5%;bottom:26%;font-size: 18px;font-weight: bold;"
          *ngIf="(optionsList.questionId==4) && (optionsList.questionSubId==1||optionsList.questionSubId==2)"
          (click)="deleteChild(optionsList.questionSubId)" [ngClass]="{'disabled':totalChildLimitCount>=2}">删除孩子</span> -->
      </li>

    </ul>
    <!-- <div class="addChild" (click)="addChild()" *ngIf="!(type==1||type==2)"
      [ngClass]="{'disabled':totalChildLimitCount<=0}">
      <div class="icon">+</div>
      <div data-toggle="modal">增加孩子年龄</div>
    </div> -->
  </div>

</div>
<div class="content_footer">
  <div (click)="before()">
    <!-- &lt; -->
    上一步
  </div>
  <div class="next" (click)="next()" [ngStyle]="{ opacity: nextBtn == false ? '0.8' : '1' }"> 下一步</div>
</div>