<template>
  <div>
  <b-modal id="consultas-spc-modal" size="xl" :no-close-on-backdrop="true">
        <template v-slot:modal-header="{  }">
          <b-container>
             <b-row class="d-flex justify-content-between mb-2 mt-1">
              <b-col class="d-flex modal-text-color ml-2" cols="8">
                <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
                  <font-awesome-icon icon="exclamation-circle" class="align-self-center" />
                </div>
                <div class="pt-1">
                  <div class="akkurat-bold max-header-text">Visualizar consulta</div>
                </div>
              </b-col>
              <b-col class="d-flex justify-content-end mr-2 mt-1">
                <span class="close-icon" @click="closeModal(false)">
                  <font-awesome-icon icon="times" class="align-self-center" />
                </span>
              </b-col>
            </b-row>
          </b-container>
        </template>
        
      <b-container >
        <b-row class="px-2">
          <b-col cols="12" class="text-center">
            <h5>Histórico</h5>
          </b-col>
          <b-col cols="12">

              <b-table hover v-if="salesConsultantSpc['spc']['resumo']['quantidade-total'] == 1" :items="[salesConsultantSpc['spc']['detalhe-spc']]" :fields="fieldsSpc" head-variant="dark" bordered="bordered" striped="striped" small="small">
                <template v-slot:cell(data-inclusao)="data">
                  {{ data.value | date }}
                </template>
              </b-table>
            

              <b-table hover v-else :items="salesConsultantSpc['spc']['detalhe-spc']" :fields="fieldsSpc" head-variant="dark" bordered="bordered" striped="striped" small="small">
                <template v-slot:cell(data-inclusao)="data">
                  {{ data.value | date }}
                </template>
              </b-table>
          </b-col>
        </b-row>
        <hr />
        <b-row class="justify-content-end">
          <b-col cols="6" class="text-right">
            <span class="mr-2">Qtde. de débitos <b>{{ salesConsultantSpc['spc']['resumo']['quantidade-total'] }}</b> -</span>
            <span>Valor de débitos <b>R$ {{ typeof salesConsultantSpc['spc']['resumo']['valor-total'] != 'undefined' ? formatPrice(salesConsultantSpc['spc']['resumo']['valor-total']) : 0 }}</b></span>
          </b-col>
        </b-row>
        <hr />
        
        <b-row class="px-2">
          <b-col cols="12" class="text-center">
            <h5>Cheques</h5>
          </b-col>
         <b-col cols="12">
            
            
            <b-table hover :items="salesConsultantChecks" :fields="fieldsChecks" head-variant="dark" bordered="bordered" striped="striped" small="small">
              <template v-slot:cell(data-inclusao)="data">
                {{ data.value | date }}
              </template>
              <template v-slot:cell(cheque-inicial)="data">
                {{ data.item['cheque-inicial']['numero'] }}
              </template>
              <template v-slot:cell(cheque-final)="data">
                {{ data.item['cheque-final']['numero'] }}
              </template>
              <template v-slot:cell(valor)="data">
                {{ data.item['cheque-inicial']['valor'] }}
              </template>
            </b-table>


         </b-col>
        </b-row>
        <hr />

        <b-row class="px-2">
          <b-col cols="12" class="text-center">
            <h5>Alertas</h5>
          </b-col>
         <b-col cols="12">
            <b-table hover :items="salesConsultantAlert" :fields="fieldsAlert" head-variant="dark" bordered="bordered" striped="striped" small="small">
              <template v-slot:cell(data-inclusao)="data">
                {{ data.value | date }}
              </template>
              <template v-slot:cell(data-ocorrencia)="data">
                {{ data.value | date }}
              </template>
              <template v-slot:cell(tipo-documento-alerta)="data">
                {{ typeof data.item['tipo-documento-alerta'][0] != 'undefined' ? data.item['tipo-documento-alerta'][0]['nome'] : data.item['tipo-documento-alerta']['nome'] }}
              </template>
            </b-table>
         </b-col>
        </b-row>

        <b-row v-if="!viewOnly">
          <b-col cols="12">
             <b-form-group class="col-md-6 col-sm-12">
                <div class="text-left label"><label for="status">Status:</label></div>
                <b-form-select
                  v-model="selectedStatus"
                  :options="statusList"
                  id="status"
                  class="radius-theme"
                />
              </b-form-group>
          </b-col>
        </b-row>
      </b-container>

      <template v-slot:modal-footer="{  }">
        <b-container>
          <b-row>
            <b-col class="d-flex justify-content-center my-3 px-3">
              <b-button
                class="mr-2 btn shadow-none border-0 btn-default btn-red"
                @click="closeModal(false)"
              >
                Cancelar
              </b-button>

              <b-button
                v-if="!viewOnly"
                class="mr-2 btn shadow-none border-0 btn-default"
                @click="done"
              >
                Salvar
              </b-button>
            </b-col>
          </b-row>
          </b-container>
        </template>
          
  </b-modal>
  


  </div>
</template>

<script>
import SalesConsultantStatusService from "@/services/resources/SalesConsultantStatusService";
import SalesConsultantService from "@/services/resources/SalesConsultantsWebService";
import moment from "moment";

const service = SalesConsultantStatusService.build();

export default {
  name: 'accept-credit-card',
  props:{
    viewOnly:{
      type: Boolean,
      default: false
    },
    sales_consultant_id:{
      type: Number,
      default: 0
    },
    spc: {
      type: String
    },
    status:{
      type: Array,
      default: () => {
          return [];
      }
    }
  },
  data: () => ({
    fieldsSpc:[
      {key: 'nome-associado', label: 'Instituição'},
      {key: 'data-inclusao', label: 'Data inclusão'},
      {key: 'valor', label: 'Valor'}
    ],
    fieldsAlert:[
      {key: 'motivo', label: 'Motivo'},
      {key: 'entidade-origem', label: 'Entidade'},
      {key: 'data-ocorrencia', label: 'Data ocorrência'},
      {key: 'data-inclusao', label: 'Data inclusão'},
      {key: 'tipo-documento-alerta', label: 'Tipo alerta'}
    ],
    fieldsChecks:[
      {key: 'nome-entidade', label: 'Entidade'},
      {key: 'data-inclusao', label: 'Data inclusão'},
      {key: 'nome-associado', label: 'Nome associado'},
      {key: 'cheque-inicial', label: 'Cheque inicial'},
      {key: 'cheque-final', label: 'Cheque final'},
      {key: 'valor', label: 'Valor'}
    ],
    selectedStatus: -1,
    statusList: [{text: 'SELECIONE UM STATUS', value: -1}, {text: 'NEGADO', value: 0}, {text: 'APROVADO', value: 1}]
  }),
  computed:{
    salesConsultantSpc(){
      return JSON.parse(this.spc);
    },
    salesConsultantAlert(){
      
      if(this.salesConsultantSpc['alerta-documento']['resumo']['quantidade-total'] == 1){
        return [this.salesConsultantSpc['alerta-documento']['detalhe-alerta-documento']];
      }else if(this.salesConsultantSpc['alerta-documento']['resumo']['quantidade-total'] > 0){
        return this.salesConsultantSpc['alerta-documento']['detalhe-alerta-documento'];
      }
      return [];
    },
    salesConsultantChecks(){

      if(this.salesConsultantSpc['cheque-lojista']['resumo']['quantidade-total'] == 1){
        return [this.salesConsultantSpc['cheque-lojista']['detalhe-cheque-lojista']];
      }else if(this.salesConsultantSpc['cheque-lojista']['resumo']['quantidade-total'] > 0){
        return this.salesConsultantSpc['cheque-lojista']['detalhe-cheque-lojista'];
      }

      return [];
    },
    spcReanalyzeID(){
      for(var i = 0; i < this.status.length; i++){
          if(this.status[i].status == 'SPC_REANALYZE' && !this.status[i].approved){
            return this.status[i].id;
          }
      }

      return -1;
    }
  },
  methods: {
    closeModal(reload){
      this.$emit('close', reload);
      this.$bvModal.hide('consultas-spc-modal');
    },
    done() {
      
        if(this.spcReanalyzeID != -1 && this.selectedStatus != -1 && !this.viewOnly){

          let data = {
            sales_consultant_status_id: this.spcReanalyzeID,
            sales_consultant_id: this.sales_consultant_id,
            status: this.selectedStatus == 0 ? 'REPROVED' : 'APPROVED'
          };

          service
          .create(data)
          .then(response => {
            this.closeModal(true);
          })
          .catch(err => {
            
          });
        }

    },
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',');
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
  },
  filters:{
    date(date){
      return moment(date, "YYYY-MM-DD").format('DD/MM/YYYY')
    }
  }
};
</script>

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

.wrap-modal-body{
  height: 400px;
  overflow-y: auto;
}

.item-attachment{
  height: 150px;
  overflow: hidden;
  cursor: pointer;
}

.modal-text-color {
  color: #3E3E3E;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}


.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #278937;
}

.btn-red {
  background: #CB2D2D;
}


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

.wrap-attachment-preview{
  position: relative;
  left: 0;
  top: 0;

  .state-icon{
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
  }
}

</style>
