front_ponto_eletronico/src/components/modals/HolidayModal.vue

<template>
  <v-dialog v-model="dialogVisible" max-width="500px">
    <v-card class="pa-6 rounded-xl elevation-2 card-modal">
      <v-card-title class="text-h5 font-weight-bold pb-0">
        <span class="text-h5">Editar Feriado</span>
      </v-card-title>
      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-text-field v-model="localHoliday.name" label="Feriado *" clearable required />
            </v-col>
            <v-col cols="12">
              <v-text-field v-model="localHoliday.type" label="Tipo do Feriado *" clearable required />
            </v-col>
            <v-col cols="12">
              <v-text-field v-model="localHoliday.date" label="Data do feriado *" type="date" clearable
                :rules="[v => !!v || 'Data é obrigatória']" required />
            </v-col>
            <v-col cols="12">
              <v-text-field v-model="localHoliday.municipio" label="Municipio" type="municipio" clearable />
            </v-col>
            <v-col cols="12">
              <v-text-field v-model="localHoliday.estado" label="Estado" type="estado" clearable />
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn text color="blue-darken-1" @click="$emit('cancel')">Cancelar</v-btn>
        <v-btn text class="text-white salvar-btn" @click="handleSave" :loading="holidayStore.loading">
          Salvar
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useHolidayStore } from '../../stores/holiday';
import { useAuthStore } from '../../stores/auth';

const props = defineProps({
  modalValue: Boolean,
  holiday: Object
});

const emit = defineEmits(['update:modalValue', 'save']);

const holidayStore = useHolidayStore();
const authStore = useAuthStore();

// Controle local da visibilidade do diálogo
const dialogVisible = ref(false);

// Estado local do feriado
const localHoliday = ref({
  id: null,
  name: '',
  type: '',
  date: '',
  estado: '',
  municipio: '',
  parent_id: authStore.userId,
  service_instance_id: authStore.service_instance_id || 2
});

// Carregar dados do feriado para edição
const loadHolidayData = async () => {
  console.log('Carregando dados do feriado ID:', props.holiday?.id);
  
  try {
    if (!props.holiday || !props.holiday.id) {
      console.error('Feriado não encontrado ou sem ID');
      return;
    }

    // Carregar dados completos do feriado
    const holidayData = await holidayStore.fetchHolidayById(props.holiday.id);
    
    if (holidayData) {
      console.log('Dados carregados com sucesso:', holidayData);
      // Preencher dados do formulário
      localHoliday.value = {
        id: holidayData.id,
        name: holidayData.name || '',
        type: holidayData.type || '',
        date: holidayData.date
          ? new Date(holidayData.date).toISOString().split('T')[0]
          : '',
        estado: holidayData.estado || '',
        municipio: holidayData.municipio || '',
        parent_id: authStore.userId,
        service_instance_id: authStore.service_instance_id || 2,
        adicional_he: Number(localHoliday.value.adicional_he), // Garante tipo numérico
        recorrente: localHoliday.value.recorrente
      };
    } else if (props.holiday) {
      // Fallback para os dados recebidos via props
      console.log('Usando dados de holiday props como fallback');
      localHoliday.value = {
        ...props.holiday,
        date: props.holiday.date
          ? new Date(props.holiday.date).toISOString().split('T')[0]
          : ''
      };
    } else {
      console.error('Não foi possível carregar dados do feriado');
    }
  } catch (error) {
    console.error('Erro ao carregar dados do feriado:', error);
    // Tenta usar os dados do props como fallback
    if (props.holiday) {
      localHoliday.value = {
        ...props.holiday,
        date: props.holiday.date
          ? new Date(props.holiday.date).toISOString().split('T')[0]
          : ''
      };
    }
  }
};

// Observar mudanças no modalValue
watch(() => props.modalValue, async (newVal) => {
  console.log('EditModal - modalValue mudou para:', newVal);
  dialogVisible.value = newVal;

  if (newVal) {
    // Espera até o holiday ter ID antes de tentar carregar
    const waitForHoliday = async () => {
      const maxTries = 10;
      let tries = 0;
      while (!props.holiday?.id && tries < maxTries) {
        await new Promise(resolve => setTimeout(resolve, 100)); // espera 100ms
        tries++;
      }
      if (props.holiday?.id) {
        console.log('Feriado encontrado após espera:', props.holiday.id);
        loadHolidayData();
      } else {
        console.warn('Holiday não disponível após espera.');
      }
    };

    waitForHoliday();
  }
});


// Observar mudanças no objeto holiday
watch(() => props.holiday, (newVal) => {
  console.log('Props holiday mudou:', newVal);
  if (newVal && newVal.id) {
    loadHolidayData();
  }
}, { deep: true });

// Atualizar o prop quando o diálogo local mudar
watch(dialogVisible, (newVal) => {
  if (props.modalValue !== newVal) {
    emit('update:modalValue', newVal);
  }
});

// Fechar o modal
const closeModal = () => {
  console.log('Fechando modal de edição');
  dialogVisible.value = false;
  emit('update:modalValue', false);
};

// Salvar as alterações no feriado
const handleSave = async () => {
  try {
    const holidayData = { ...localHoliday.value };
    console.log('Atualizando feriado:', holidayData);
    
    await holidayStore.updateHoliday(holidayData.id, holidayData);
    
    emit('save', holidayData);
    closeModal();
  } catch (error) {
    console.error('Erro ao atualizar feriado:', error);
  }
};

// Inicialização do componente
onMounted(() => {
  console.log('Modal de edição montado - holiday:', props.holiday);
  dialogVisible.value = props.modalValue;
  
  if (props.modalValue && props.holiday && props.holiday.id) {
    loadHolidayData();
  }
});
</script>

<style scoped>
.card-modal {
  background-color: #ffffff;
  border-radius: 16px;
}

.salvar-btn {
  background: linear-gradient(to right, #6b4eff, #2eb6ff);
  border-radius: 999px;
  text-transform: none;
  font-weight: 500;
}
</style>