<template>
  <div>
    <status-desc :cardConfig="cardConfig" :policySecId="data.policySecId"></status-desc>
    <pay-cost
      v-if="showPayCost"
      :statusKey="data.cardConfig.key"
      :payCostConfig="data.cardConfig.payCostConfig"
    ></pay-cost>
    <refund
      v-show="showRefund"
      :refundConfig="data.cardConfig.refundConfig"
      :amount="amount"
      :payTime="payTime"
      :payTimeText="payTimeText"
    ></refund>
    <cr-button class="Pdb-button" v-if="showBackButton" @click="$router.push('/home')"
      >知道了，回首页</cr-button
    >
    <Phone></Phone>
  </div>
</template>
<script>
import StatusDesc from "../modules/StatusDesc";
import Phone from "../modules/Phone";
import Refund from "../modules/Refund";
import PayCost from "../modules/PayCost";
import detailPayMixin from "@/views/Policy/mixin/orderInfo.mixin";

export default {
  name: "Guarantee",
  mixins: [detailPayMixin],
  components: {
    StatusDesc,
    Phone,
    Refund,
    PayCost
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    amount() {
      return this.data.refundInfo?.amount || 0;
    },
    payTime() {
      return this.data.cardConfig.key === "8"
        ? this.data.refundInfo?.refundTime || "-"
        : this.data.refundInfo?.payTime || "-";
    },
    payTimeText() {
      return this.data.cardConfig.key === "8" ? "到账时间" : "支付时间";
    },
    showPayCost() {
      return ["14", "13"].includes(this.data?.cardConfig?.key);
    },
    showRefund() {
      return (
        !["14", "13"].includes(this.data?.cardConfig?.key) &&
        !["4", "5"].includes(this.data?.cardConfig?.status)
      );
    },
    showBackButton() {
      return ["7-5", "4", "5", "7-3"].includes(this.data?.cardConfig?.status);
    },
    cardConfig() {
      const result = this.data?.cardConfig;
      if (["4", "5"].includes(this.data?.cardConfig?.status)) {
        result.detailText = "核保失败";
        result.statusText = "您未通过保险公司的核保";
      }
      return result;
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
