<template>
  <div>
  <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">
      {{ campaign_register_computed }}
    </div>
    <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ sales_consultant.sector.code }}
    </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-2 col-lg-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ sales_consultant.cpf }}
    </div>
    <div class="col-md-1 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ sales_consultant.shipping_address.city.state.uf }}
    </div>
    <div class="col-md-2 d-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ sales_consultant.shipping_address.city.name }}
    </div>
    <div class="col-md-2 d-none d-lg-flex py-1 text-left align-self-center akkurat-bold-italic ref-tag">
      {{ sales_consultant.shipping_address.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-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(sales_consultant.id)"
      >
      <font-awesome-icon icon="bars" class="align-self-center" />

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

<script>
import moment from "moment";


export default {
  name: 'orders-info-card',
  props: {
    sales_consultant:{
      type: Object
    },
    page: {
      required: false,
    }
  },
  data: () => ({
    modal_info: false
  }),
  computed:{
    status_computed(){
      if(this.sales_consultant.status.length > 0){
        switch(this.sales_consultant.status[this.sales_consultant.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';
      }
    },
    campaign_register_computed(){
      if(this.sales_consultant.campaign_register)
        return this.sales_consultant.campaign_register.code;
      else
        return '';
    },
    name_computed(){
        return this.sales_consultant.name.length > 15 ? this.sales_consultant.name.substr(0, 15) + '...' : this.sales_consultant.name;
    },
    payment_type(){
        return parseInt(this.sales_consultant.credit_limit) > 0 ? 'BOL' : 'CC';
    }
  },
  methods:{
    openModal(id){
      this.$emit('modal', 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>
