<template>
  <div>
    <p class="Pdb-status" v-if="cardConfig.detailText">{{ cardConfig.detailText }}</p>
    <p class="Pdb-status">{{ cardConfig.statusText }}</p>
    <div class="Pdb-tips" v-if="cardConfig.recordText" @click="goNext">
      <span class="Pdb-tips-text">{{ cardConfig.recordText }}</span>
      <svg-icon class-name="Pdb-tips-svg" v-if="isShowIcon" icon-class="payment-record" />
    </div>
  </div>
</template>
<script>
export default {
  name: "StatusDesc",
  props: {
    cardConfig: {
      type: Object,
      default: () => ({
        detailText: "",
        statusText: "",
        recordText: "",
        status: ""
      })
    },
    policySecId: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {};
  },
  computed: {
    secondTitleText() {
      return this.cardConfig.detailText
        ? `${this.cardConfig.statusText}...`
        : this.cardConfig.statusText;
    },
    isShowIcon() {
      return !["13", "14"].includes(this.cardConfig.key);
    }
  },
  methods: {
    goNext() {
      const arr = ["6.2-3", "6.1-3", "6.3", "8", "9-5", "9-6", "10"];
      if (arr.includes(this.cardConfig?.status)) {
        this.$router.push(`/policy/payment-record/${this.policySecId}/${this.cardConfig.status}`);
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
