<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"
        v-if="data.productNo !== 'BNZJX001'"
      >
        查看详情
      </router-link>
    </div>
    <div class="Pdb-content-body" v-if="data.productNo !== 'BNZJX001'">
      <div
        class="Pdbc-body-item"
        v-for="(item, index) in detail.planCellInfo"
        :key="index"
        :class="{ inline: item.inline }"
      >
        <span>{{ item.title }}</span>
        <span>{{ item.value }}</span>
        <cr-divider v-if="item.divider" />
      </div>
    </div>
    <Collapse v-else :collapse-data="detail.planCellInfo" />
    <div class="Pdb-content-operation" v-if="isShowPdfBtn">
      <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 Collapse from "./Collapse";

export default {
  name: "SecurityContent",
  components: {
    Collapse
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    detail: {
      type: Object,
      default() {
        return {
          planCellInfo: [],
          type: ""
        };
      }
    }
  },
  methods: {
    showPdf() {
      this.$router.push({
        path: "/policy/virtual-detail",
        query: { policySecId: this.data.policySecId }
      });
    }
  },
  computed: {
    isShowPdfBtn() {
      return this.data?.cardConfig?.key !== "4";
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped>
container {
  width: 100%;
  height: 100%;
}
</style>
