<template>
  <div class="d-flex product-card my-2">
    <div class="col-2 col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ campaign_register_computed }}
    </div>
    <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-2 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ city }}
    </div>
    <div class="col-md-1 d-none d-lg-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ neighborhood }}
    </div>
    <div class="col-md-1 d-flex py-1 align-self-center akkurat-bold-italic ref-tag">
      <font-awesome-icon icon="barcode" style="font-size: 2em;" class="align-self-center mx-2" v-if="payment_type == 'BOL'" />
      <font-awesome-icon icon="credit-card" style="font-size: 2em;" class="align-self-center mx-2" v-if="payment_type == 'CC'" />
    </div>
    <div class="col-md-1 d-none d-md-flex py-1 align-self-center akkurat-bold-italic ref-tag">
      {{ pending }}
    </div>
    <div class="col-md-1 d-flex py-1 align-self-center akkurat-bold-italic ref-tag">
      <b-button
        class="
        btn
        btn-theme
        shadow-none
        align-items-center
        border-0
        akkurat-bold
      "
      @click="openModal(id)"
      >
      <font-awesome-icon icon="file-image" class="align-self-center" />

      </b-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";


export default {
  name: 'orders-info-card',
  props: {
    id:{
      type: Number
    },
    name: {
      type: String
    },
    cpf: {
      type: String
    },
    state:{
      type: String
    },
    city:{
      type: String
    },
    neighborhood:{
      type: String
    },
    address:{
      type: String
    },
    campaign_register:{
      type: Object
    },
    sector:{
      type: String
    },
    credit_limit:{
      type: String
    },
    status:{
      type: Array
    },
    page: {
      required: false,
    }
  },
  computed:{
    status_computed(){
      if(this.status.length > 0){
        switch(this.status[this.status.length - 1].status){
          case 'APPROVED':
            return 'Aprovado';
          case 'REANALYZE':
            return 'Reanalisar';
          case 'WAITING_APPROVATION':
            return 'Aguardando aprovação';
          case 'PENDING':
            return 'Pendente';
          case 'OUT_DEFINITION':
            return 'Fora da definição';
        }
      }else{
        return 'Aprovado';
      }
    },
    pending(){
        var count = 0;
        this.status.forEach(element => {
          if((element.status == 'PENDING' || element.status == 'ATTACHMENT_PENDING') && !element.approved){
            count++;
          }
        });
        return count;
    },
    name_computed(){
        return this.name.length > 15 ? this.name.substr(0, 15) + '...' : this.name;
    },
    campaign_register_computed(){
      if(this.campaign_register)
        return this.campaign_register.code;
      else
        return '';
    },
    payment_type(){
        return parseInt(this.credit_limit) > 0 ? 'BOL' : 'CC';
    }
  },
  methods:{
    openModal(id){
      this.$emit('open', id);
    }
  },
  filters:{
    date(date){
      return moment(date, "YYYY-MM-DD").format('DD/MM/YYYY')
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../../../assets/css/main.scss';


.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;
}

.btn-theme{
  background: $theme-color-blue;
}
</style>
