<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import antreanOperasiData from '~/data/mock/antreanOperasi.json';
import spesialisData from '~/data/mock/spesialis.json';
import type { AntreanOperasi } from '~/types/antrean';

const route = useRoute();
const kodeSpesialis = route.params.kode as string;

// Find spesialis info
const spesialisInfo = spesialisData.find(s => s.kode === kodeSpesialis);

definePageMeta({
  middleware: 'auth'
});

const page = ref({ 
    title: spesialisInfo ? `List Antrian ${spesialisInfo.spesialis}` : 'List Antrian Spesialis' 
});

const breadcrumbs = ref([
    {
        text: 'Antrean',
        disabled: false,
        href: '/antrean'
    },
    {
        text: 'List Spesialis',
        disabled: false,
        href: '/antrean/list-spesialis'
    },
    {
        text: spesialisInfo ? spesialisInfo.spesialis : kodeSpesialis,
        disabled: true,
        href: '#'
    }
]);

const search = ref('');
const antreanList = ref<AntreanOperasi[]>(
    antreanOperasiData.filter(antrian => antrian.kodeSpesialis === kodeSpesialis)
);

const headers = [
    { title: 'No. Urut Spesialis', key: 'no', sortable: false },
    { title: 'No. Urut Sub Spesialis', key: 'no', sortable: false },
    { title: 'Jenis Kelamin', key: 'jenisKelamin', sortable: true },
    { title: 'Nama Pasien', key: 'namaPasien', sortable: true },
    { title: 'No Ktp', key: 'noKtp', sortable: true },
    { title: 'No Rekam Medis', key: 'noRekamMedis', sortable: true },
    { title: 'Status', key: 'status', sortable: true }
];
</script>

<template>
    <v-row>
        <v-col cols="12">
            <BaseBreadcrumb :title="page.title" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
        </v-col>
        <v-col cols="12">
            <v-card elevation="10">
                <v-card-text>
                    <div class="d-flex justify-space-between align-center mb-4">
                        <v-text-field
                            v-model="search"
                            placeholder="Search..."
                            variant="outlined"
                            density="comfortable"
                            hide-details
                            prepend-inner-icon="mdi-magnify"
                            style="max-width: 400px;"
                        ></v-text-field>
                        
                        <!-- <v-btn
                            color="primary"
                            prepend-icon="mdi-plus"
                            :to="`/antrean/pendaftaran?kodeSpesialis=${kodeSpesialis}`"
                        >
                            Daftar Antrean Operasi Baru
                        </v-btn> -->
                    </div>

                    <TableAntrian
                        :headers="headers"
                        :items="antreanList"
                        :search="search"
                    >
                        <template #item.no="{ index }">
                            {{ index + 1 }}
                        </template>
                    </TableAntrian>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template>
