<template>
  <b-modal id="pending-history" :no-close-on-backdrop="true" size="lg">
    <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">Histórico de status</div>
            </div>
          </b-col>
          <b-col class="d-flex justify-content-end mr-2 mt-1">
            <span class="close-icon" @click="closeModal">
              <font-awesome-icon icon="times" class="align-self-center" />
            </span>
          </b-col>
        </b-row>
      </b-container>
    </template>
      <b-container>
        <b-row>
          <b-col>
            <b-table hover :items="status" :fields="fieldsAnalyst" :tbody-tr-class="rowClass" head-variant="dark" bordered="bordered" striped="striped" small="small" v-if="!isDisable">
              <template v-slot:cell(status)="data" >
                {{ checkStatus(data.value) }}
              </template>
              <template v-slot:cell(approved)="data">
                {{ data.value ? 'Sim' : 'Não' }}
              </template>
              <template v-slot:cell(updated_at)="data">
                {{ data.value | date }} 
              </template>
              <template v-slot:cell(user)="data">
                {{ data.value.name }} 
              </template>
            </b-table>

            <b-table hover :items="status" :fields="fieldsManager" :tbody-tr-class="rowClass" head-variant="dark" bordered="bordered" striped="striped" small="small" v-else>
              <template v-slot:cell(status)="data">
                {{ checkStatus(data.value) }}
              </template>
              <template v-slot:cell(approved)="data">
                {{ data.value ? 'Sim' : 'Não' }}
              </template>
              <template v-slot:cell(updated_at)="data">
                {{ data.value | date }} 
              </template>
              <template v-slot:cell(user)="data">
                {{ data.value.name }} 
              </template>
            </b-table>

          </b-col>
        </b-row>
      </b-container>

    <template v-slot:modal-footer="{  }">
      <b-container>
        <b-row>
          <b-col cols="12" 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"
              >
                Fechar
            </b-button>
          </b-col>
        </b-row>
      </b-container>
    </template>
  </b-modal>
</template>

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

const service = SalesConsultantCrmService.build();

export default {
  name: 'pending-history-modal',
  props:{
    status:{
      type: Array
    },
    isDisable:{
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    fieldsAnalyst:[
        {key: 'status', label: 'Status'},
        {key: 'description', label: 'Descrição'},
        {key: 'updated_at', label: 'Última alteração'},
        {key: 'approved', label: 'Aprovado'},
        {key: 'user', label: 'Usuário'},
    ],
    fieldsManager:[
        {key: 'status', label: 'Status'},
        {key: 'description', label: 'Descrição'},
        {key: 'updated_at', label: 'Última alteração'},
        {key: 'approved', label: 'Aprovado'}
    ],
  }),
  methods: {
    rowClass(item, type) {
      if (!item.approved) return 'table-danger'
    },
    closeModal() {
      this.$bvModal.hide('pending-history');
    },
    checkStatus(status){
      switch(status){
        case 'WAITING_PHONE_VERIFICATION':
            return 'Aguardando confirmação';
        case 'REANALYZE':
            return 'Em análise';
        case 'PENDING':
            return 'Pendência geral';
        case 'ATTACHMENT_PENDING':
            return 'Anexo pendente';
        case 'ATTACHMENT_APPROVED':
            return 'Anexo aprovado'
        case 'APPROVED':
            return 'Aprovado';  
      }
    }
  },
  computed:{
    fields(){
      if(this.isDisable){
        return 
        [{key: 'status', label: 'Status'},
        {key: 'description', label: 'Descrição'},
        {key: 'updated_at', label: 'Última alteração'},
        {key: 'approved', label: 'Aprovado'}];

      }else{
        return 
        [{key: 'status', label: 'Status'},
        {key: 'description', label: 'Descrição'},
        {key: 'updated_at', label: 'Última alteração'},
        {key: 'approved', label: 'Aprovado'},
        {key: 'user', label: 'Usuário'}];
      }
    }
  },
  filters:{
    date(date){
      return moment(date, "YYYY-MM-DD HH:mm:ss").format('DD/MM/YYYY HH:mm')
    }
  }
};
</script>

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


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

</style>
