<template>
  <div>
    <status-desc
      :firstTitle="data.cardConfig.detailText"
      :secondTitle="data.cardConfig.statusText"
      :recordText="data.cardConfig.recordText"
    ></status-desc>
    <pay-cost
      v-if="showPayCost"
      :statusKey="data.cardConfig.key"
      :payCostConfig="data.cardConfig.payCostConfig"
    ></pay-cost>
    <refund
      v-else
      :refundConfig="data.cardConfig.refundConfig"
      :amount="amount"
      :payTime="payTime"
    ></refund>
    <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 { parseTime } from "@/service/utils";

export default {
  name: "Guarantee",
  components: {
    StatusDesc,
    Phone,
    Refund,
    PayCost
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    amount() {
      return this.data.cardConfig?.amount || 0;
    },
    payTime() {
      return parseTime(this.data.cardConfig?.payTime, "{y}-{m}-{d}") || 0;
    },
    showPayCost() {
      return ["4", "14", "13"].includes(this.data?.cardConfig?.key);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
