<template>
  <div class="Pdb-refund">
    <div class="Pdb-refund-content">
      <div class="Pdbr-content-item">
        <span>保障期限</span>
        <span>{{ payInfo.guaranteePeriodText }}</span>
      </div>
      <div class="Pdbr-content-item">
        <span>保费</span>
        <span>{{ payInfo.permium }}</span>
      </div>
    </div>
    <p class="Pdb-refund-note" v-if="payInfo.isShowNote">
      {{ payInfo.note }}
    </p>
    <div class="Pdb-refund-operation">
      <cr-button class="Pdbi-operation-button Pdbi-operation-button_paid" @click="goNext('product')"
        >为家人投保</cr-button
      >
      <cr-button class="Pdbi-operation-button" @click="goNext('policy')">查看保单</cr-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "PayInfo",
  props: {
    policy: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    payInfo() {
      let result = {
        guaranteePeriodText: `${this.policy?.policyEffectiveDate || "-"}至${this.policy
          ?.policyEndDate || "-"}`,
        permium: "",
        note: "",
        isShowNote: true
      };

      const payType = this.policy?.payType?.find(
        v => v.value === this.policy?.productItem?.payType
      );

      // 根据月缴或年缴区分缴费卡片内容
      if (payType?.label === "月缴") {
        result = {
          ...result,
          permium: `首月保费${this.policy?.downPayPrice || 0}元，次月起${this.policy
            ?.regularPrice || 0}元`,
          note: `注:微信将会在每月${this.policy.nextPayInfo.day}日在您的账户内扣除该保费。（您可以随时取消自动扣费）`
        };
      } else {
        result = {
          ...result,
          permium: `${this.policy?.downPayPrice || 0}元/年`,
          note: `合同终止前，每年${this.policy?.nextPayInfo?.day || "-"}月${this.policy?.nextPayInfo
            ?.day || "-"}日${this.policy?.company || "-"}保险公司将在您预留尾号为${this.policy
            ?.bankCardNoLast4 || "-"}的银行卡内扣除次年保费，请保证余额充足哦。`
        };
        // 缴费方式为“一次结清”时不显示扣费提醒
        if (!payType || payType === "一次交清") {
          result.isShowNote = false;
        }
      }

      // 根据产品是否存在保障期限确定保障期限文案
      if (this.policy?.policyPeriod?.length) {
        const policyPeriod = this.policy.policyPeriod.find(
          v => v.value === this.policy?.productItem?.policyPeriod
        );
        result.guaranteePeriodText = policyPeriod.label || "";
      }

      return result;
    }
  },
  methods: {
    goNext(type) {
      if (type === "product") {
        this.$router.push({
          path: "/goods/detail",
          query: { id: this.policy.id, type: this.policy.itype }
        });
      } else if (type === "policy") {
        this.$router.push(`/policy/detail/${this.policy.orderNo}`);
      }
    }
  }
};
</script>
<style lang="less" src="../../Detail/index.less" scoped></style>
