<template>
  <b-row class="product-card my-2">
    <div class="col-1 py-1 align-self-center text-left akkurat-bold-italic ref-tag">
      {{ campaign }}
    </div>
    <div class="col-2 py-1 align-self-center text-left akkurat-bold-italic ref-tag">
      {{ cpf }}
    </div>
    <div class="col-2 col-md-3 py-1 align-self-center text-left akkurat-bold-italic ref-tag">
      {{ nome }}
    </div>
    <div class="col-2 py-1 align-self-center text-left ref-tag">
      {{ date | date }}
    </div>
    <div class="col-1 py-1 align-self-center text-left ref-tag">
      {{ restrition }}
    </div>
    <div class="col-1 py-1 align-self-center text-left ref-tag" v-if="!isDisable">
      {{ currentStatus }}
    </div>
    <div class="col-1 d-none d-lg-block py-1 align-self-center text-left ref-tag" v-bind:class="{'col-2': isDisable}">
      {{ protocolo }}
    </div>
    <div class="col-md-1 d-flex py-1 align-self-center akkurat-bold-italic ref-tag">
      <b-button
        v-if="!isDisable"
        class="
        btn
        btn-theme
        shadow-none
        align-items-center
        border-0
        akkurat-bold
      "
      @click="openModal"
      >
      <font-awesome-icon icon="bars" class="align-self-center" />

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

<script>
import moment from "moment";


export default {
  name: 'orders-info-card',
  props: {
    isDisable:{
      type: Boolean,
      default: false
    },
    campaign:{
      type: String
    },
    cpf: {
      type: String
    },
    credit_limit:{
      type: String
    },
    dados: {
      type: String
    },
    date:{
      type: String
    },
    page: {
      required: false,
    }
  },
  computed:{
    restrition(){
      var dados = JSON.parse(this.dados);
      if(dados.restricao){
        if(dados['alerta-documento']['resumo']['quantidade-total'] > 0)
          return 'Reprovado / Alerta de Documento';
        else
          return 'Reprovado';
      }
      return 'Aprovado';
    },
    currentStatus(){
      if(this.credit_limit)
        return this.credit_limit > 0 ? 'Aprovado' : 'Reprovado';
    },
    protocolo(){
      var dados = JSON.parse(this.dados);
      return dados.protocolo.numero;
    },
    nome(){
      var dados = JSON.parse(this.dados);
      return dados.consumidor['consumidor-pessoa-fisica']['nome'];
    }
  },
  methods:{
    openModal(){
      this.$emit('openModal', this.dados);
    }
  },
  filters:{
    date(date){
      return moment(date, "YYYY-MM-DD HH:mm:ss").format('DD/MM/YYYY HH:mm:ss')
    }
  }
};
</script>

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

.product-card {
  border-radius: 5px;
  background: white;
  max-height: 70px;
  box-shadow: 0px 0px 4px #00000022;

}

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

.btn-theme{
  background: $theme-color-blue;
}

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

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