<template>
  <div class="Pdb-content">
    <div class="Pdb-content-head">
      <span class="Pdbc-head-name">保障内容</span>
      <router-link
        tag="span"
        :to="{ name: 'GoodsPlan', query: { type: detail.type } }"
        class="Pdbc-head-status"
      >
        查看详情
      </router-link>
    </div>
    <div class="Pdb-content-body">
      <div
        class="Pdbc-body-item"
        v-for="(item, index) in content"
        :key="index"
        :class="{ inline: item.inline }"
      >
        <span>{{ item.title }}</span>
        <span>{{ item.value }}</span>
        <cr-divider v-if="item.divider" />
      </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() {
        return {};
      }
    },
    detail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    EffectiveDate() {
      return parseTime(this.data.policyEffectiveDate, "{y}-{m}-{d}");
    },
    EndDate() {
      return parseTime(this.data.policyEndDate, "{y}-{m}-{d}");
    },
    content() {
      const planCellInfo = this.detail.planCellInfo
        ? JSON.parse(JSON.stringify(this.detail.planCellInfo))
        : [];
      planCellInfo.push(
        { title: "生效日期", value: this.EffectiveDate },
        { title: "终止日期", value: this.EndDate }
      );
      return planCellInfo;
    }
  },
  methods: {
    showPdf() {
      this.$router.push({ path: "/policy/virtual-detail", query: { url: this.data.policyUrl } });
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped>
container {
  width: 100%;
  height: 100%;
}
</style>
