<template>
  <div class="policy-detail">
    <div class="policy-detail-body">
      <p class="Pdb-status">投保失败</p>
      <p class="Pdb-status">退款中...</p>
      <!-- <div class="Pdb-tips">
        <span class="Pdb-tips-text">缴费记录</span>
        <svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
      </div> -->
      <div class="Pdb-refund">
        <p class="Pdb-refund-title">很抱歉，您未通过保险公司的核保</p>
        <p class="Pdb-refund-desc">不能投保此产品，正在原路给您退款，请注意查收…</p>
        <div class="Pdb-refund-content">
          <div class="Pdbr-content-item">
            <span>退款金额</span>
            <span>800.00元</span>
          </div>
          <div class="Pdbr-content-item">
            <span>支付时间</span>
            <span>2020.5.31 18:21:12</span>
          </div>
        </div>
      </div>
      <div class="Pdb-payment">
        <p class="Pdb-payment-title">保障将在XX天后失效，请立即缴费</p>
        <div class="Pdb-payment-content">
          <div class="Pdbp-content-item">
            <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
            <span class="Pdbpc-item-text">无需次年自己手动操作续保</span>
          </div>
          <div class="Pdbp-content-item">
            <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
            <span class="Pdbpc-item-text">本功能无额外费用，可随时取消</span>
          </div>
          <div class="Pdbp-content-item">
            <svg-icon class-name="Pdbpc-item-svg" icon-class="check-circle" />
            <span class="Pdbpc-item-text">续保保费按照续保应交保费，自动扣款</span>
          </div>
        </div>
        <cr-button class="Pdb-payment-button">立即缴费</cr-button>
      </div>
      <div class="Pdb-insurance">
        <p class="Pdb-insurance-name">国民保·百万医疗险</p>
        <p class="Pdb-insurance-no">NO.XXXXXXXXXXXXXXXXXXXXXXXX<br />由XXXXXXXXX承保</p>
        <div class="Pdb-insurance-operation">
          <cr-button class="Pdbi-operation-button">已开通次年续保</cr-button>
          <cr-button class="Pdbi-operation-button">申请理赔</cr-button>
        </div>
      </div>
      <div class="Pdb-content">
        <div class="Pdb-content-head">
          <span class="Pdbc-head-name">保障内容</span>
          <span class="Pdbc-head-status">查看详情</span>
        </div>
        <div class="Pdb-content-body">
          <div class="Pdbc-body-item">
            <span>100种重大疾病医疗保险金（0免赔额）</span>
            <span>600万</span>
          </div>
          <div class="Pdbc-body-item">
            <span>一般医疗保险金（1万免赔额）</span>
            <span>300万</span>
          </div>
          <div class="Pdbc-body-item">
            <span>质子重离子医疗保险金（60%赔付）</span>
            <span>600万</span>
          </div>
          <div class="Pdbc-body-item">
            <span>意外身故</span>
            <span>1万</span>
          </div>
          <div class="Pdbc-body-item">
            <span>意外伤残</span>
            <span>1万</span>
          </div>
          <div class="Pdbc-body-item">
            <span>意外住院津贴</span>
            <span>100元/天</span>
          </div>
          <div class="Pdbc-body-item">
            <span>生效日期</span>
            <span>2020.5.31</span>
          </div>
          <div class="Pdbc-body-item">
            <span>终止日期</span>
            <span>2021.5.31</span>
          </div>
        </div>
        <div class="Pdb-content-operation">
          <cr-button class="Pdbc-button">电子保单</cr-button>
        </div>
        <div class="Pdb-content-user">
          <p class="Pdbc-user-who">投保人</p>
          <div class="Pdbc-user-info">
            <span>王*闹</span>
            <span>身份证号 1333**********3445</span>
          </div>
        </div>
        <div class="Pdb-content-user">
          <p class="Pdbc-user-who">被保人</p>
          <div class="Pdbc-user-info">
            <span>王*闹</span>
            <span>身份证号 1333**********3445</span>
          </div>
        </div>
      </div>
      <div class="Pdb-service">
        <div class="Pdb-service-head">
          <span>增值服务</span>
          <span>查看详情</span>
        </div>
        <div class="Pdb-service-body">
          <div>
            <span>重疾快速就医</span>
            <span></span>
          </div>
          <div>
            <span>住院押金垫付</span>
            <span></span>
          </div>
        </div>
        <div class="Pdb-service-question">
          <span>常见问题</span>
          <svg-icon icon-class="arrow" />
        </div>
        <cr-divider class="Pdb-service-divider" :hairline="false" />
        <div class="Pdb-service-agreement">
          <span>保险条款</span>
          <span>|</span>
          <span>健康告知</span>
          <span>|</span>
          <span>投保须知与声明</span>
          <span>|</span>
          <span>服务协议</span>
        </div>
      </div>
      <div class="Pdb-operation">
        <div class="Pdb-operation-item">
          <svg-icon class-name="Pdbo-item-svg" icon-class="customer-service-concat" />
          <span class="Pdbo-item-text">联系客服</span>
        </div>
        <div class="Pdb-operation-item">
          <svg-icon class-name="Pdbo-item-svg" icon-class="go-home" />
          <span class="Pdbo-item-text">返回首页</span>
        </div>
      </div>
      <div class="Pdb-footer">
        <span>如遇问题请拨打客服电话</span>
        <span>00000000000</span>
      </div>
      <act-banner />
      <rec-good />
      <insurance-recommend class="Pdb-recommend" />
    </div>
  </div>
</template>
<script>
import point from "@/assets/images/policy/detail/point@2x.png";
import InsuranceRecommend from "../modules/InsuranceRecommend";
import ActBanner from "../modules/ActBanner";
import RecGood from "../modules/RecGood";

export default {
  name: "PolicyList",
  components: {
    InsuranceRecommend,
    ActBanner,
    RecGood
  },
  data() {
    return {
      point
    };
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
