<div class="layout">
  <div class="content" style="position: relative;">
    <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">
        <div class="item">
          <div>{{ optionsList.questionName }}</div>
          <h2 style="text-align: center;margin-bottom: 0;">{{value2}}</h2>
          <b (click)="showToast(optionsList)" style="width:35%;text-align: center;float: right">
            <span style="width:20%;text-align: center;">{{ optionsList.optionName}}</span>
            <span style="width:10%;text-align: center;float: right">&gt;</span>
          </b>
        </div>
        <div class="item ageWrapper">
          <div id="dot" [ngStyle]="{'left': (value2-20)/60*100 + '%'}">
            <span></span>
          </div>
          <input style="height:35px;position: absolute; opacity: 0; left: 0;width: '100%';top: 58%;z-index: 2; "
            type="range" [(ngModel)]="value2" (ngModelChange)="selectAge($event)" min="20" max="80" step="1" />
          <!-- <div style="text-align: center;font-size: 36px;color:#5566e9;">{{value2}}</div>
          <nz-slider [(ngModel)]="value2" [nzDisabled]="disabled" [nzMin]='20' [nzMax]="80" [nzTipFormatter]="null"
            (ngModelChange)="selectAge($event)">
          </nz-slider> -->
          <ul class="age">
            <li><span>20</span></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>
        </div>
      </li>
      <span style="color: #4446e2;position: absolute;top: 61%;right: 5%;" *ngIf="!(type==1||type==2)"
        (click)="addChild()" [ngClass]="{'disabled':totalChildLimitCount<=0}"
        [ngStyle]="{top:type==3?'39%':'61%'}">添加孩子</span>
    </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 style="color: #4242dd;" (click)="before()">
    <!-- &lt; -->
    上一步
  </div>
  <div class="next" (click)="next()"> 下一步</div>
</div>
<div class="toastWrapper toast" *ngIf="isShow" (click)="closeToast()">

</div>
<div class="toastContent" *ngIf="isShow">
  <ul>
    <li *ngFor="let options of curQues.options" [ngClass]="{ selected: options['selected']}"
      (click)="selectedAge(options);">
      {{ options.optionName }}
    </li>
  </ul>
  <!--<div>{{curQues|json}}</div>-->
</div>