<template>
  <div class="Pdb-payment">
    <p v-if="showTips" class="Pdb-payment-title Pdb-payment-title_tips">
      {{ payCostConfig.title }}
    </p>
    <div v-else>
      <p class="Pdb-payment-title">{{ expiredDayText }}</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>
    </div>
    <cr-button class="Pdb-payment-button">{{ payCostConfig.button }}</cr-button>
  </div>
</template>
<script>
export default {
  name: "PayCost",
  props: {
    statusKey: {
      type: String,
      default: "2"
    },
    payCostConfig: {
      type: Object,
      default: () => ({
        title: "",
        button: "立即缴费"
      })
    },
    day: {
      type: String,
      default: ""
    }
  },
  computed: {
    showTips() {
      return ["4", "14", "13"].includes(this.statusKey);
    },
    expiredDayText() {
      return this.statusKey === "2" ? `保障将在${this.day}天后失效，请立即缴费` : "";
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
