<template>
  <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>{{EffectiveDate}}</span>
      </div>
      <div class="Pdbc-body-item">
        <span>终止日期</span>
        <span>{{EndDate}}</span>
      </div>
    </div>
    <div class="Pdb-content-operation">
      <cr-button class="Pdbc-button" @click="showPdf">电子保单</cr-button>
    </div>
    <div class="Pdb-content-user">
      <p class="Pdbc-user-who">投保人</p>
      <div class="Pdbc-user-info">
        <span>{{data.holderUserNameMask}}</span>
        <span>身份证号 {{data.holderIdNoMask}}</span>
      </div>
    </div>
    <div class="Pdb-content-user">
      <p class="Pdbc-user-who">被保人</p>
      <div class="Pdbc-user-info">
        <span>{{data.insuredUserNameMask}}</span>
        <span>身份证号 {{data.insuredIdNoMask}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { parseTime } from "@/service/utils";

export default {
  name: "SecurityContent",
  props: {
    data: {
      type: Object, 
      default: ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    EffectiveDate() {
      return parseTime(this.data.policyEffectiveDate, "{y}-{m}-{d}")
    },
    EndDate() {
      return parseTime(this.data.policyEndDate, "{y}-{m}-{d}")
    }
  },
  methods: {
    showPdf() {
      
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
