<template>
  <div>
    <p class="Pdb-status" v-if="cardConfig.detailText">{{ cardConfig.detailText }}</p>
    <p class="Pdb-status">{{ secondTitleText }}</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: ""
    },
    payType: {
      type: Number,
      default: 0
    },
    payTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  computed: {
    secondTitleText() {
      if (this.cardConfig.statusText === "待支付") {
        return "保单待支付";
      }
      return this.cardConfig.detailText
        ? `${this.cardConfig.statusText}...`
        : this.cardConfig.statusText;
    },
    isShowIcon() {
      return !["4", "13", "14"].includes(this.cardConfig.key);
    }
  },
  methods: {
    goNext() {
      const arr = ["6.2-3", "6.1-3", "6.3", "8", "9-5", "9-6", "10"];
      const payTypeText = this.payTypeList?.find(v => v.value === this.payType);
      const isAClear = payTypeText?.label === "一次交清";
      if (arr.includes(this.cardConfig?.status)) {
        this.$router.push(
          `/policy/payment-record/${encodeURIComponent(this.policySecId)}/${
            this.cardConfig.status
          }/${isAClear}`
        );
      }
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
