<template>
  <div>
    <p class="Pdb-status" v-if="firstTitle">{{ firstTitle }}</p>
    <p class="Pdb-status">{{ secondTitleText }}</p>
    <div class="Pdb-tips" v-if="recordText">
      <span class="Pdb-tips-text">{{ recordText }}</span>
      <svg-icon class-name="Pdb-tips-svg" icon-class="payment-record" />
    </div>
  </div>
</template>
<script>
export default {
  name: "StatusDesc",
  props: {
    firstTitle: {
      type: String,
      default: ""
    },
    secondTitle: {
      type: String,
      default: ""
    },
    recordText: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  computed: {
    secondTitleText() {
      return this.firstTitle ? `${this.secondTitle}...` : this.secondTitle;
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
