<div class="scrollContainer">
  <div class="detailContainer scrollContent">
    <div class="orderdetailBox" *ngIf="relation_id">
      <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 class="orderdetailBox" *ngIf="!relation_id">
      <div class="btnBox">
        <span class="alignItemCenter" style="font-size: 20px;"><i class="line"></i>保单明细</span>
      </div>
      <ul class="list-group" *ngIf="orderDetail?.policyNo">
        <li class="list-group-item">
          <span>保单号</span>
          <span>{{orderDetail?.policyNo}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.startDate">
          <span>生效日期</span>
          <span>{{orderDetail?.startDate.substr(0,10)}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.endDate">
          <span>结束日期</span>
          <span>{{orderDetail?.endDate.substr(0,10)}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.statusDesc">
          <span>状态</span>
          <span>{{orderDetail?.statusDesc}}</span>
        </li>
        <li class="list-group-item">
          <span>产品名</span>
          <span>{{orderDetail?.productName?orderDetail?.productName:orderDetail?.planName}}</span>
        </li>
        <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?.holderName}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.holderMobileNo">
          <span>手机号</span>
          <span>{{holderInfo?.holderMobileNo}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.holderGender">
          <span>性别</span>
          <span>{{holderInfo?.holderGender}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.holderBirthDay">
          <span>出生日期</span>
          <span>{{holderInfo?.holderBirthDay}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.holderIdTypeName">
          <span>证件类型</span>
          <span>{{holderInfo?.holderIdTypeName}}</span>
        </li>
        <li class="list-group-item" *ngIf="holderInfo?.holderIdNo">
          <span>证件号码</span>
          <span>{{holderInfo?.holderIdNo}}</span>
          <!-- <span>{{holderInfo?.idInfo.idNo.substr(0,2) + '******' + holderInfo?.idInfo.idNo.substr(holderInfo?.idInfo.idNo.length-2,2)}}</span> -->
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.argueSolution">
          <span>争议仲裁</span>
          <span>{{orderDetail?.argueSolution}}</span>
        </li>
        <li class="list-group-item" *ngIf="returnOrderDetail?.holderInfo.contactName">
          <span>联系人</span>
          <span>{{returnOrderDetail?.holderInfo.contactName}}</span>
        </li>
        <li class="list-group-item" *ngIf="returnOrderDetail?.insureFactorInfo?.socialInsured || returnOrderDetail?.insureFactorInfo?.socialInsured=='0'">
          <span>社保 (含新农合)</span>
          <span>{{orderDetail?.socialInsured == "1" ? "有" : "无"}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.coverTerm">
          <span>保障计划</span>
          <span>{{orderDetail?.coverTerm}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.paymentTerm">
          <span>缴费期限</span>
          <span>
            {{ orderDetail.paymentTerm == "0"? "/" : orderDetail.paymentTerm}}
             {{ getChineseDate(orderDetail.paymentTermUnit) }}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.isInsure">
          <span>轻症+豁免</span>
          <span>{{orderDetail?.isInsure ? orderDetail.isInsure : "/"}}</span>
        </li>
      </ul>
      <div class="insuredsBox" *ngIf="orderDetail?.bizLicenseInfo">
        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>经营场所信息</h4>
        <ul>
          <li class="list-group-item">
            <span>经营场所面积</span>
            <span>{{orderDetail?.bizLicenseInfo?.businessArea}}平方米</span>
          </li>
          <li class="list-group-item">
            <span>生产经营内容</span>
            <span>{{orderDetail?.bizLicenseInfo?.businessScope}}</span>
          </li>
          <li class="list-group-item">
            <span>行业</span>
            <span>{{orderDetail?.bizLicenseInfo?.businessPlace}}</span>
          </li>
          <li class="list-group-item">
            <span>经营许可证类型</span>
            <span>{{orderDetail?.bizLicenseInfo?.businessCertificateType}}</span>
          </li>
          <li class="list-group-item">
            <span>经营许可证号码</span>
            <span>{{orderDetail?.bizLicenseInfo?.businessCertificateNo}}</span>
          </li>
          <li class="list-group-item">
            <span>客如云商家编号</span>
            <span>{{orderDetail?.bizLicenseInfo?.businessNumber ? orderDetail?.bizLicenseInfo?.businessNumber:'/'}}</span>
          </li>
          <li class="list-group-item">
            <span>经营场所地址</span>
            <span>{{ orderDetail?.bizLicenseInfo?.erpSubjectItem?.subjectAddress}}</span>
          </li>
        </ul>
      </div>
      <div class="insuredsBox" *ngIf="orderDetail?.subjectItem">
        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>标的物信息</h4>
        <ul>
          <li class="list-group-item" *ngIf="orderDetail?.subjectItem?.roomQty">
            <span>房间数量</span>
            <span>{{orderDetail.subjectItem.roomQty}} ( 间 )</span>
          </li>
          <li class="list-group-item" *ngIf="orderDetail?.subjectItem?.subjectAddress">
            <span>详细地址</span>
            <span>{{orderDetail.subjectItem.subjectAddress}}</span>
          </li>
        </ul>
      </div>
      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicleCoverList != null">
        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>车险保障范围</h4>
        <ul>
          <li class="list-group-item" *ngFor="let erpVehicleCoverList of orderDetail.erpVehicleCoverList">
            <span>{{ erpVehicleCoverList.clauseDescription }}(RMB)</span>
            <span>
              ￥{{ erpVehicleCoverList.premium | number: "1.2-2" }}
              <span *ngIf="erpVehicleCoverList.exemptDeductible == 'true'">
                (不计免赔)
              </span>
            </span>
          </li>
          <li class="list-group-item" *ngIf="orderDetail.erpVehicleTax">
              <span>车船税(RMB)</span>
              <span>
                ￥{{ orderDetail.erpVehicleTax.taxAmount | number: "1.2-2" }}
              </span>
          </li>
        </ul>
      </div>
      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicle">
        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>车辆信息</h4>
        <ul>
          <li class="list-group-item">
            <span>车牌号</span>
            <span>{{orderDetail?.erpVehicle?.plateNo}}</span>
          </li>
          <li class="list-group-item">
            <span>车架号</span>
            <span>{{orderDetail?.erpVehicle?.frameNumber}}</span>
          </li>
          <li class="list-group-item">
            <span>是否新车</span>
            <span>{{orderDetail?.erpVehicle?.isNewCar ? "是" : "否"}}</span>
          </li>
          <li class="list-group-item">
            <span>是否新保</span>
            <span>{{orderDetail?.erpVehicle?.applyType == 1 ? "新保" : "续保"}}</span>
          </li>
          <li class="list-group-item">
            <span>注册日期</span>
            <span>{{orderDetail?.erpVehicle?.firstRegistrationDate}}</span>
          </li>
          <li class="list-group-item">
            <span>发动机号</span>
            <span>{{orderDetail?.erpVehicle?.engineNo}}</span>
          </li>
          <li class="list-group-item">
            <span>车辆类型</span>
            <span>{{ getVehicleCategory( orderDetail?.erpVehicle?.vehicleCategory)}}</span>
          </li>
          <li class="list-group-item">
            <span>品牌型号</span>
            <span>{{orderDetail?.erpVehicle?.vehicleBrand}}</span>
          </li>
          <li class="list-group-item">
            <span>座位数</span>
            <span>{{ orderDetail?.erpVehicle?.seatCapacity}}</span>
          </li>
          <li class="list-group-item">
            <span>购置价</span>
            <span>{{orderDetail?.erpVehicle?.priceNewcar}}</span>
          </li>
          <li class="list-group-item">
            <span>车辆用途</span>
            <span>{{orderDetail?.erpVehicle?.vehicleUseType }}</span>
          </li>
          <li class="list-group-item">
            <span>排量</span>
            <span>{{orderDetail?.erpVehicle?.dispacementPower }}</span>
          </li>
        </ul>
      </div>
      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicleOwmer">
        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>车主信息</h4>
        <ul>
          <li class="list-group-item">
            <span>车主姓名</span>
            <span>{{orderDetail?.erpVehicleOwmer?.name}}</span>
          </li>
          <li class="list-group-item">
            <span>手机号</span>
            <span>{{orderDetail?.erpVehicleOwmer?.mobileNo}}</span>
          </li>
          <li class="list-group-item">
            <span>证件类型</span>
            <span>{{orderDetail?.erpVehicleOwmer?.idTypeName}}</span>
          </li>
          <li class="list-group-item">
            <span>证件号</span>
            <span>{{ orderDetail?.erpVehicleOwmer?.idNo}}</span>
          </li>
        </ul>
      </div>      
      <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="insured?.insuredName">
            <span>姓名</span>
            <span>{{insured?.insuredName}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.insuredMobileNo">
            <span>手机号</span>
            <span>{{insured?.insuredMobileNo}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.insuredGenderDesc">
            <span>性别</span>
            <span>{{insured?.insuredGenderDesc}}</span>
          </li>
          <li class="list-group-item" *ngIf="this.insured?.insuredBirthDate">
            <span>出生日期</span>
            <span>{{this.insured?.insuredBirthDate}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.insuredIdTypeDesc">
            <span>证件类型</span>
            <span>{{insured?.insuredIdTypeDesc}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.insuredIdNo">
            <span>证件号码</span>
            <span>{{ insured?.insuredIdNo.substr(0,2) + '******' + this.insured?.insuredIdNo.substr(this.insured?.insuredIdNo.length-2,2)}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.occupationalClass">
            <span>职业类别</span>
            <span>{{insured?.occupationalClass}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.insuredAddress">
            <span style="white-space: nowrap;margin-right: 8px;">详细地址</span>
            <span>{{insured?.insuredAddress}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.salary">
            <span>去年年收入（万元）</span>
            <span>{{insured?.salary}}</span>
          </li>
          <li class="list-group-item" *ngIf="insured?.salaryType">
            <span>收入类型</span>
            <span>{{insured?.salaryType}}</span>
          </li>
          <ng-container *ngIf="insured?.orderLifeProElementsList">
            <li class="list-group-item" *ngFor="let orderLifeProInfos of insured?.orderLifeProElementsList">
              <span>{{orderLifeProInfos.factorName}}</span>
              <span>{{orderLifeProInfos.elementName}}</span>
            </li>
          </ng-container>
        </ul>
      </div>
      <div class="insuredsBox" *ngIf="orderDetail?.erpVehicleConfirm != null">
        <h4 class="text-left" style="margin-top: 10px;"><i class="line"></i>配送&发票信息</h4>
        <ul>
          <li class="list-group-item">
            <span>收件人</span>
            <span>{{ orderDetail?.erpVehicleConfirm?.receiverName}}</span>
          </li>
          <li class="list-group-item">
            <span>手机号</span>
            <span>{{orderDetail?.erpVehicleConfirm?.receiverTel}}</span>
          </li>
          <li class="list-group-item">
            <span>收件时间</span>
            <span>{{ orderDetail?.erpVehicleConfirm?.receiverDate}}</span>
          </li>

          <li class="list-group-item">
            <span>抬头类型</span>
            <span>{{ orderDetail?.erpVehicleConfirm?.invoiceKind ==1?'个人':'公司'}}</span>
          </li>
          <li class="list-group-item">
            <span>发票抬头</span>
            <span>{{orderDetail?.erpVehicleConfirm?.invoiceTitle}}</span>
          </li>
          <li class="list-group-item">
            <span>收件地址</span>
            <span>{{orderDetail?.erpVehicleConfirm?.receiverAddress}}</span>
          </li>
          <li class="list-group-item">
            <span>收件时间</span>
            <span>{{ orderDetail?.erpVehicleConfirm?.receiverDate}}</span>
          </li>
        </ul>
        <ul *ngIf="orderDetail?.erpVehicleConfirm?.invoiceKind == '公司' ||
        orderDetail?.erpVehicleConfirm?.invoiceKind == '2'
      ">
          <li class="list-group-item">
            <span>公司名</span>
            <span>orderDetail?.erpVehicleConfirm?.invoiceTitle</span>
          </li>
          <li class="list-group-item">
            <span>公司税号</span>
            <span>orderDetail?.erpVehicleConfirm?.taxCode</span>
          </li>
          <li class="list-group-item">
            <span>电话号码</span>
            <span>orderDetail?.erpVehicleConfirm?.invoiceTel</span>
          </li>
          <li class="list-group-item">
            <span>单位地址</span>
            <span>orderDetail?.erpVehicleConfirm?.invoiceAddress</span>
          </li>
          <li class="list-group-item">
            <span>开户银行</span>
            <span>orderDetail?.erpVehicleConfirm?.invoiceBank</span>
          </li>
          <li class="list-group-item">
            <span>银行账号</span>
            <span>orderDetail?.erpVehicleConfirm?.invoiceBankcardId</span>
          </li>
        </ul>
      </div>
      <h4 class="text-left alignItemCenter" *ngIf="orderDetail?.price || orderDetail?.referralInfo?.referralAmount || orderDetail?.totalPrice"
      style="margin-top: 10px;"><i class="line"></i>保费</h4>
      <ul class="priceContainer">
        <li class="list-group-item" *ngIf="orderDetail?.price">
          <span>年化保费</span>
          <span>￥{{orderDetail?.price | number:'1.2-2'}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.totalPrice">
          <span>总保费</span>
          <span>￥ {{orderDetail?.totalPrice | number:'1.2-2'}}</span>
        </li>
        <li class="list-group-item" *ngIf="orderDetail?.referralInfo?.referralAmount">
          <span style="color: #c9af71;">佣金</span>
          <span class="light-color">￥{{orderDetail?.referralInfo?.referralAmount | number:'1.2-2'}}</span>
        </li>

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