<template>
  <div>
    <status-desc
      :firstTitle="data.cardConfig.detailText"
      :secondTitle="data.cardConfig.statusText"
      :recordText="data.cardConfig.recordText"
    ></status-desc>
    <pay-cost
      v-if="showPayCost"
      :statusKey="data.cardConfig.key"
      :payCostConfig="data.cardConfig.payCostConfig"
    ></pay-cost>
    <insurance-card
      :productNo="data.productNo"
      :autoRenewPremium="data.autoRenewPremium"
      :policyNo="data.policyNo"
    ></insurance-card>
    <security-content :data="data"></security-content>
    <insurance-service></insurance-service>
    <customer-service></customer-service>
    <insurance-recommend class="Pdb-recommend" />
  </div>
</template>
<script>
import InsuranceRecommend from "../../modules/InsuranceRecommend";
import InsuranceCard from "../modules/InsuranceCard";
import SecurityContent from "../modules/SecurityContent";
import InsuranceService from "../modules/InsuranceService";
import PayCost from "../modules/PayCost";
import StatusDesc from "../modules/StatusDesc";
import CustomerService from "../modules/CustomerService";

export default {
  name: "Guarantee",
  components: {
    InsuranceRecommend,
    InsuranceCard,
    SecurityContent,
    InsuranceService,
    PayCost,
    StatusDesc,
    CustomerService
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    showPayCost() {
      return ["2", "4"].includes(this.data?.cardConfig?.key);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
