<template>
  <div class="payment-record">
    <p class="payment-record-status">{{ termStatistics.titelText }}</p>
    <p
      :class="[
        { 'payment-record-desc_owe': $route.params.status === '6.3' },
        'payment-record-desc'
      ]"
    >
      {{ termStatistics.refundTimeText }}
    </p>
    <div class="payment-record-term" v-if="isShowCard">
      <div class="Pr-term-item">
        <span>{{ termStatistics.amount }}</span>
        <span>{{ termStatistics.amountText }}</span>
      </div>
      <div class="Pr-term-item">
        <span>{{ termStatistics.termText }}</span>
        <span>已缴/总期数</span>
      </div>
      <div class="Pr-term-item">
        <span>{{ termStatistics.delayTerm }}</span>
        <span>已欠缴期数</span>
      </div>
    </div>
    <div class="payment-record-detail">
      <div class="Pr-detail-title Pr-detail-title_year">
        <span>缴费明细</span>
        <span>{{ payPeriodText }}</span>
      </div>
      <div class="Pr-detail-content" v-for="(item, index) in termList" :key="index">
        <div class="Prd-content-amount">
          <span>{{ item.termNoText }}</span>
          <span>{{ item.amountText }}</span>
        </div>
        <div class="Prd-content-time">
          <span>{{ item.recordDate }}</span>
          <span>{{ item.payStatusText }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getPayRecord } from "@/api/policy";

export default {
  name: "paymentRecord",
  data() {
    return {
      record: {},
      termStatistics: {},
      termList: [],
      List: [],
      title: "",
      desc: "",
      clauseStatistics: {
        amount: 0,
        paidTerm: "",
        delayTerm: "",
        totalTerm: ""
      }
    };
  },
  async created() {
    this.record = await getPayRecord(this.$route.params.policySecId);
    this.getTermStatistics();
    this.getTermList();
  },
  computed: {
    payPeriodText() {
      return this.record.payPeriod === 1 ? "按月缴费" : "按年缴费";
    },
    isShowCard() {
      return this.record?.payPeriod === 1 && !["8", "10"].includes(this.$route.params.status);
    }
  },
  methods: {
    getTermStatistics() {
      const status = this.$route.params.status;
      const isMonthPay = this.record?.payPeriod === 1;
      let result = {
        titelText: "",
        refundTimeText: "",
        amount: "",
        amountText: "",
        termText: "",
        delayTerm: ""
      };
      // 不同状态对应的缴费记录
      if (["6.2-3", "6.1-3", "6.3"].includes(status)) {
        result = {
          titelText: isMonthPay ? "持续缴费中" : "缴费成功",
          refundTimeText:
            isMonthPay && this.$route.params.isAClear === "false"
              ? `预计下次扣费时间 ${this.record.nextPayDate}`
              : "",
          amount: `${this.record?.nextTermAmount || 0}元`,
          amountText: "下期应缴金额",
          termText: `${this.record.paidTerm}/${this.record.totalTerm}期`,
          delayTerm: `${this.record.delayTerm}期`
        };
        if (status === "6.3") {
          result.refundTimeText = `保单已欠费，欠缴${this.record?.delayAmount}元`;
        }
      } else if (["8", "9-5", "9-6", "10"].includes(status)) {
        result = {
          titelText: `共缴纳${this.record.totalPaidAmount}元`,
          refundTimeText: "保障已终止",
          amount: `${this.record?.nextTermAmount || 0}元`,
          amountText: "应退金额",
          termText: `${this.record.paidTerm}/${this.record.totalTerm}期`,
          delayTerm: `${this.record.delayTerm}期`
        };
      }

      this.termStatistics = result;
    },
    getTermList() {
      const status = this.$route.params.status;
      const list =
        this.record?.recordTerm?.map(v => ({
          termNoText: this.record?.payPeriod === 1 ? `第${v.termNo}期保费` : "1年保费",
          recordDate: v.recordDate,
          amountText: `${v.amount}元`,
          payStatusText:
            v.currentPayState === -1 ? "已欠费" : v.currentPayState === 3 ? "缴费成功" : "-"
        })) || [];

      if (["9-5", "9-6"].includes(status) && this.record?.refundRecord) {
        list.unshift({
          termNoText:
            this.record?.refundRecord?.currentState === 2
              ? "退款中"
              : this.record?.refundRecord?.currentState === 3
              ? "退款成功"
              : "-",
          recordDate: this.record?.refundRecord?.payTime || "-",
          amountText: `${this.record?.refundRecord?.amount}元`,
          payStatusText:
            this.record?.refundRecord?.currentState === 2
              ? "应退金额"
              : this.record?.refundRecord?.currentState === 3
              ? "已退金额"
              : "-"
        });
      }

      this.termList = list;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
