<template>
  <div class="d-flex product-card my-2">
   <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ sector }}
    </div>
    <div class="col-md-2 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ name_computed }}
    </div>
    <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ cpf }}
    </div>
    <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ state }}
    </div>
    <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ city }}
    </div>
    <div class="col-md-2 d-none d-md-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ neighborhood }}
    </div>
    <div class="col-md-2 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ created_at | date }}
    </div>
    <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ daysLeft }}
    </div>
  </div>
</template>

<script>
import moment from "moment";


export default {
  name: 'orders-info-card',
  props: {
    name: {
      type: String
    },
    cpf: {
      type: String
    },
    state:{
      type: String
    },
    city:{
      type: String
    },
    neighborhood:{
      type: String
    },
    sector:{
      type: String
    },
    created_at:{
      type: String
    },
    page: {
      required: false,
    }
  },
  computed:{
    daysLeft(){
      var created_at = moment(this.created_at, "YYYY-MM-DD HH:mm:ss");
      var today = moment();

      return today.diff(created_at, 'days');
    },
    name_computed(){
        return this.name.length > 15 ? this.name.substr(0, 15) + '...' : this.name;
    }
  },
  filters:{
    date(date){
      return moment(date, "YYYY-MM-DD HH:mm").format('DD/MM/YYYY HH:mm')
    }
  }
};
</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;
  line-height: 1;
}

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