<template>
    <div>
        <v-container class="bg-white rounded-lg" fluid>

            <v-data-table
                :headers="headers"
                :items="xpatients"
                return-object
                hide-default-footer
            >
                <template v-slot:headers="{ columns }">
                    <tr>                        
                        <td width="15%" class="pa-4 bg-secondary-lighten font-weight-bold">
                            {{ $t('message.headerWorklist.test') }}
                        </td>
                        <td class="pa-1 bg-secondary-lighten font-weight-bold">
                            <span class="position-relative" style="top:6px;">
                                {{ $t('message.headerWorklist.patient') }}
                            </span>
                            <span class="text-black float-right mr-3" style="font-size:20px;">
                                {{ staff }}
                            </span>
                        </td>
                    </tr>
                </template>

                <template v-slot:item="{ item }">
                    <tr>
                        <td>
                            <p class="mt-2 font-weight-medium text-uppercase">{{ item.T_TestName }}</p>
                            <p class="text-grey">{{ item.T_TestCode }}</p>
                            <p class="mb-2 text-black">Total pasien : {{ item.patients.length }}</p>
                        </td>
                        <td>
                            <v-row class="flex-wrap">
                                <v-sheet v-for="(p, i) in item.patients" v-bind:key="i" class="pr-3 row-pointer">
                                    <v-sheet :class="p.is_received == 'Y' ? 'text-uppercase bg-primary-lighten text-primary box-y':'text-uppercase text-black box-n'">
                                        <p class="font-weight-medium">{{ p.name }}</p>
                                        <p >{{ p.number }}</p>
                                    </v-sheet>
                                </v-sheet>
                            </v-row>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-container>
    </div>
</template>
    
<style scoped>
    .row-pointer :hover {
        cursor: pointer;
    }

    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
    .v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
    .v-table .v-table__wrapper > table > thead > tr > th {
        border-bottom: dashed 1px #EEEEEE;
    }

    .box-y {
        display: flex;
        width: 202px;
        padding: 8px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        border-radius: 4px;
        border: 1px solid #E3F2FD;
    }
    .box-n {
        display: flex;
        width: 202px;
        padding: 8px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        border-radius: 4px;
        border: 1px solid #E0E0E0;
    }

</style>
    
<script type="module">
    export default {
        name: "ListPatient",
        data() {
            return {
                staff: "BELUM ADA STAFF",
                headers: [
                    {
                        align: 'start',
                        key: 'test',
                        sortable: false,
                        width: "15%",
                        title: this.$t('message.headerWorklist.test'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'patient', 
                        sortable: false,
                        width: "85%",
                        title: this.$t('message.headerWorklist.patient'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                ],
            };
        },
        computed: {
            xpatients() {
                return this.$store.state.worklist.patients
            },
            selected_patient: {
                get() {
                    return this.$store.state.worklist.selected_patient
                },
                set(val) {
                    this.$store.commit("worklist/setSelectedPatient", val)
                }
            }
        },
        methods: {

        },
        wacth: {

        }
    }
</script>