<template>
  <div class="d-flex product-card my-2">

    <div class="d-flex mx-4 px-3 py-1 align-self-center akkurat-bold-italic ref-tag">
      {{number}}
    </div>
    <div class="d-flex mx-4 px-3 py-1 align-self-center ref-tag">
      {{bank}}
    </div>
    <div class="d-flex mx-4 px-2 py-1  align-self-center ref-tag">
      <span v-if="isEmpty(installment)"> - </span>
      <span v-else>{{installment}}</span>
    </div>
    <div class="d-flex mx-4 px-3 py-1 align-self-center ref-tag">
      {{created_at}}
    </div>
    <div class="d-flex mx-5 px-3 py-1 align-self-center ref-tag">
      {{due_date}}
    </div>
    <div class="d-flex mx-4 px-3 py-1 align-self-center ref-tag" style="white-space: nowrap;">
      R$ {{ parseFloat(amount) | formatCoin}}
    </div>
    <div class="d-flex mx-5 px-3 py-1 align-self-center ref-tag">
      {{campaign}}
    </div>
    <div class="d-flex mx-5 px-2 py-1 align-self-center justify-content-center text-success">
        <font-awesome-icon icon="file-alt" />
    </div>

  </div>
</template>

<script>
export default {
  name: 'finance-info-card',
  props: {
    number: {
      required: true,
    },

    bank: {
      type: String,
      required: true,
    },
    installment: {
      
      required: true,
    },
    created_at: {
      type: String,
      required: true,
    },
    due_date: {
      // type: String,
      required: true,
    },
    amount: {
      required: true,
    },
    campaign:{
        required: true
    },

  },
  methods:{
    isEmpty(toTest){
      return Object.keys(toTest).length === 0 && toTest.constructor === Object;
    }
  }
};
</script>

<style lang="scss" scoped>
.product-card {
  border-radius: 5px;
  background: white;
  height: 49px;
  box-shadow: 0px 0px 4px #00000022;

}

.product-name{
  font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.ref-tag {
  font-size: 0.8em;
  color: #5A5A5A;
  letter-spacing: 0.35px;
}

.min-text {
  font-size: 0.625rem;
}
</style>
