<div class="scrollContainer">
  <div class="detailContainer scrollContent">
    <div class="orderdetailBox">
      <div class="btnBox">
        <span class="alignItemCenter" style="font-size: 20px;"><i class="line"></i>保单明细</span>
      </div>
      <ul class="list-group" *ngIf="policyInfo?.policyNo">
        <li class="list-group-item">
          <span>保单号</span>
          <span>{{policyInfo?.policyNo}}</span>
        </li>
        <li class="list-group-item" *ngIf="policyInfo?.startDate">
          <span>生效日期</span>
          <span>{{policyInfo?.startDate.substr(0,10)}}</span>
        </li>
        <li class="list-group-item" *ngIf="policyInfo?.endDate">
          <span>结束日期</span>
          <span>{{policyInfo?.endDate}}</span>
        </li>
        <li class="list-group-item" *ngIf="policyInfo?.status">
          <span>状态</span>
          <span>{{policyInfo?.status}}</span>
        </li>
        <div class="insuredsBox coverContent">
          <ul *ngFor="let productInfo of policyFactorInfos;index as i">
            <li class="list-group-item" *ngIf="productInfo?.productName">
              <span style="width: 30%;">产品</span>
              <span style="text-align: right;">{{productInfo?.productName}}</span>
            </li>
            <li class="list-group-item" *ngIf="productInfo?.insuredAmount">
              <span>保额</span>
              <span>{{productInfo?.insuredAmount | number:'1.2-2'}} {{productInfo?.amountUnit}}</span>
            </li>
            <li class="list-group-item" *ngIf="productInfo?.period">
              <span>缴费年限</span>
              <span>{{productInfo?.period}}年</span>
            </li>
            <li class="list-group-item" *ngIf="productInfo?.payFrequency">
              <span>缴费方式</span>
              <span>{{productInfo?.payFrequency}}</span>
            </li>
            <li class="list-group-item" *ngIf="productInfo?.commission">
              <span>销售佣金</span>
              <span>￥{{productInfo?.commission | number:'1.2-2'}}</span>
            </li>
            <li class="list-group-item" *ngIf="productInfo?.premium">
              <span>保费</span>
              <span>￥{{productInfo?.premium | number:'1.2-2'}}</span>
            </li>
          </ul>
        </div>
        <div class="btnBox" style="margin-top: 10px;">
          <span class="alignItemCenter"><i class="line"></i>投保人信息</span>
        </div>
        <li class="list-group-item">
          <span>姓名</span>
          <span>{{holderInfo?.name}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.mobileNo">
          <span>手机号</span>
          <span>{{holderInfo?.mobileNo}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.gender">
          <span>性别</span>
          <ng-container [ngSwitch]="holderInfo?.gender">
            <span *ngSwitchCase="1">男</span>
            <span *ngSwitchCase="2">女</span>
            <span *ngSwitchDefault></span>
          </ng-container>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.birthDay">
          <span>出生日期</span>
          <span>{{holderInfo?.birthDay}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.idInfo.idType">
          <span>证件类型</span>
          <ng-container [ngSwitch]="holderInfo?.idInfo.idType">
            <span *ngSwitchCase="1">身份证</span>
            <span *ngSwitchCase="2">护照</span>
            <span *ngSwitchCase="3">港澳身份证</span>
            <span *ngSwitchCase="4">台胞证</span>
            <span *ngSwitchCase="9">其他</span>
            <span *ngSwitchCase="20">统一社会信用代码</span>
            <span *ngSwitchDefault>/</span>
          </ng-container>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.idInfo.idNo">
          <span>证件号码</span>
          <span>{{holderInfo?.idInfo.idNo}}</span>
          <!-- <span>{{holderInfo?.idInfo.idNo.substr(0,2) + '******' + holderInfo?.idInfo.idNo.substr(holderInfo?.idInfo.idNo.length-2,2)}}</span> -->
        </li>
      </ul>
      <div class="insuredsBox" *ngFor="let insured of insuredInfos;index as i">
        <h4 class="text-left alignItemCenter" style="margin-top: 10px;"><i class="line"></i>被保人信息{{i+1}}</h4>
        <ul>
          <li class="list-group-item" *ngIf="this.insured?.name">
            <span>姓名</span>
            <span>{{this.insured?.name}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.mobileNo">
            <span>手机号</span>
            <span>{{this.insured?.mobileNo}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.gender">
            <span>性别</span>
            <ng-container [ngSwitch]="insured?.gender">
              <span *ngSwitchCase="1">男</span>
              <span *ngSwitchCase="2">女</span>
              <span *ngSwitchDefault></span>
            </ng-container>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.birthDay">
            <span>出生日期</span>
            <span>{{this.insured?.birthDay}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.idInfo?.idType">
            <span>证件类型</span>
            <ng-container [ngSwitch]="insured?.idInfo?.idType">
              <span *ngSwitchCase="1">身份证</span>
              <span *ngSwitchCase="2">护照</span>
              <span *ngSwitchCase="4">台胞证</span>
              <span *ngSwitchCase="9">其他</span>
              <span *ngSwitchCase="20">统一社会信用代码</span>
              <span *ngSwitchDefault>/</span>
            </ng-container>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.idInfo?.idNo">
            <span>证件号码</span>
            <span>{{ this.insured?.idInfo?.idNo.substr(0,2) + '******' + this.insured?.idInfo?.idNo.substr(this.insured?.idInfo?.idNo.length-2,2)}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.occupationName">
            <span>职业类别</span>
            <span>{{this.insured?.occupationName}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.address">
            <span style="white-space: nowrap;margin-right: 8px;">详细地址</span>
            <span>{{this.insured?.address}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.salary">
            <span>去年年收入（万元）</span>
            <span>{{this.insured?.salary}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.salaryType">
            <span>收入类型</span>
            <span>{{this.insured?.salaryType}}</span>
          </li>
        </ul>
      </div>
      <h4 class="text-left alignItemCenter" *ngIf="policyInfo?.price || policyInfo?.referralInfo?.referralAmount || policyInfo?.totalPrice"
      style="margin-top: 10px;"><i class="line"></i>保费</h4>
      <ul class="priceContainer">
        <li class="list-group-item" *ngIf="policyInfo?.price">
          <span>年化保费</span>
          <span>￥{{policyInfo?.price | number:'1.2-2'}}</span>
        </li>
        <li class="list-group-item" *ngIf="policyInfo?.totalPrice">
          <span>总保费</span>
          <span>￥ {{policyInfo?.totalPrice | number:'1.2-2'}}</span>
        </li>
        <li class="list-group-item" *ngIf="policyInfo?.referralInfo?.referralAmount">
          <span style="color: #c9af71;">佣金</span>
          <span class="light-color">￥{{policyInfo?.referralInfo?.referralAmount | number:'1.2-2'}}</span>
        </li>

      </ul>
    </div>
  </div>
</div>
