qris_bank_jatim/pages/index.vue

<template>
  <div class="medical-payment-app">
    <v-container fluid class="pa-0 full-height">
      <v-row justify="center" no-gutters class="full-height">
        <v-col cols="12" class="full-height">
          <v-card
            class="payment-card mx-auto"
            elevation="0"
            :class="{
              'contact-fullscreen': paymentStore.currentStep === 1,
              'payment-centered': paymentStore.currentStep !== 1,
            }"
          >
            <component :is="activeComponent" v-if="hasIpAddress" />
            <div v-else class="text-center pa-10">
              <v-progress-circular indeterminate color="primary"></v-progress-circular>
              <p class="mt-4">Memeriksa konfigurasi...</p>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup>
import { usePaymentStore } from '~/stores/payment';
import Home from '~/components/Home.vue';
import QRISPayment from '~/components/QRISPayment.vue';
import Success from '~/components/PembayaranSukses.vue';
import Gagal from '~/components/PembayaranGagal.vue';
import { onMounted, onUnmounted, ref, computed, watch } from 'vue';

const paymentStore = usePaymentStore();
const router = useRouter();
const localIpAddress = ref(null);
const pollingInterval = ref(null);

const hasIpAddress = computed(() => !!localIpAddress.value);
const apiURL = 'http://10.10.150.67:8084/api/v1/qris/allstatus';

const paymentSteps = {
  1: Home,
  2: QRISPayment,
  3: Success,
  4: Gagal,
};

const activeComponent = computed(() => {
  return paymentSteps[paymentStore.currentStep] || Home;
});

// Watch untuk debugging perubahan step
watch(() => paymentStore.currentStep, (newStep, oldStep) => {
  console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
}, { immediate: true });

const startPolling = () => {
  if (pollingInterval.value) {
    clearInterval(pollingInterval.value);
    console.log('🛑 Stopping previous polling');
  }

  pollingInterval.value = setInterval(async () => {
    try {
      console.log(`🔄 POLLING - Step: ${paymentStore.currentStep}`);
      const response = await $fetch(apiURL);
      
      if (response?.data?.length > 0) {
        
        if (paymentStore.currentStep === 1) {
          // Step 1: Find data by IP address (original logic)
          console.log('🔍 Step 1: Looking for IP:', localIpAddress.value);
          const relevantData = response.data.find(item => item.ip === localIpAddress.value);
          
          if (relevantData) {
            console.log('✅ Data found for IP:', relevantData);
            paymentStore.updatePayment({ data: [relevantData] });
            paymentStore.currentStep = 2;
          } else {
            console.log('⏳ No data found for IP:', localIpAddress.value);
          }
        } 
        
        else if (paymentStore.currentStep === 2) {
          // Step 2: Monitor payment status for THE SAME PATIENT
          console.log('🔍 Step 2: Monitoring payment status...');
          
          // Get patient identifiers from store (data yang sudah di-load di step 1)
          const currentPatientBill = paymentStore.qrData.display_nobill;
          const currentPatientName = paymentStore.qrData.display_name;
          
          console.log('👤 Current patient:', {
            name: currentPatientName,
            bill: currentPatientBill
          });
          
          if (!currentPatientBill || !currentPatientName) {
            console.warn('⚠️ Patient data incomplete in store');
            return;
          }
          
          // Find ALL records for this same patient (same name + bill)
          const samePatientRecords = response.data.filter(item => {
            const sameBill = item.display_nobill === currentPatientBill;
            const sameName = item.display_name === currentPatientName;
            
            console.log(`🔄 Checking record: ${item.display_name} (${item.display_nobill}) status=${item.status}`);
            console.log(`   → Same patient? ${sameBill && sameName}`);
            
            return sameBill && sameName;
          });
          
          console.log(`📊 Found ${samePatientRecords.length} records for same patient:`, 
            samePatientRecords.map(r => `status: ${r.status}`));
          
          
          const successRecord = samePatientRecords.find(record => record.status === "2");
          const failRecord = samePatientRecords.find(record => record.status === "0");
          
          if (successRecord) {
            console.log('🎉 SUCCESS STATUS FOUND!', successRecord);
            paymentStore.updatePayment({ data: [successRecord] });
            paymentStore.currentStep = 3;
            clearInterval(pollingInterval.value);
            
            
            setTimeout(() => {
              console.log('🏠 Auto return to home');
              paymentStore.reset();
              startPolling();
            }, 20000);
            
          } else if (failRecord) {
            console.log('❌ FAIL STATUS FOUND!', failRecord);
            paymentStore.updatePayment({ data: [failRecord] });
            paymentStore.currentStep = 4;
            clearInterval(pollingInterval.value);
            
            
            setTimeout(() => {
              console.log('🏠 Auto return to home');
              paymentStore.reset();
              startPolling();
            }, 20000);
            
          } else {
            console.log('⏳ Still waiting for final status...');
            console.log('Current statuses for this patient:', 
              samePatientRecords.map(r => r.status));
          }
        }
      } else {
        console.log('📭 No data in API response');
      }
    } catch (error) {
      console.error("❌ Polling error:", error);
    }
  }, 20000);
  
  console.log(`🚀 Polling started - IP-based patient detection`);
};

const checkAndRedirect = () => {
  const savedIp = localStorage.getItem('loketIp');
  if (!savedIp) {
    console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
    router.push('/setupip');
  } else {
    localIpAddress.value = savedIp;
    console.log('IP Address ditemukan:', savedIp);
    startPolling();
  }
};

onMounted(() => {
  console.log('Component mounted, step saat ini:', paymentStore.currentStep);
  checkAndRedirect();
});

onUnmounted(() => {
  if (pollingInterval.value) {
    clearInterval(pollingInterval.value);
    console.log('Polling dihentikan saat unmount.');
  }
});
</script>

<style scoped>
.medical-payment-app {
  background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
  min-height: 100vh;
  height: auto;
}

.full-height {
  min-height: 100vh;
  height: auto;
}

.contact-fullscreen {
  max-width: none !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 100vh;
}

.payment-centered {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 1rem auto !important;
  border-radius: 16px !important;
  height: auto !important;
  min-height: calc(100vh - 2rem);
}

.payment-card {
  background: rgb(224, 224, 224);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  height: auto !important;
  min-height: inherit;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .payment-centered {
    max-width: 500px !important;
    margin: 1rem !important;
  }
}

@media (orientation: landscape) and (min-width: 768px) {
  .payment-centered {
    max-width: 1400px !important;
    margin: 0.5rem auto !important;
    min-height: calc(100vh - 1rem);
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .medical-payment-app {
    min-height: 600px;
  }
  
  .contact-fullscreen,
  .payment-centered {
    min-height: 600px;
  }
}
</style>