<template>
    <div>
        <v-row>
            <v-col cols="12">
                <v-container class="bg-white rounded-lg">

                    <v-data-table
                        :headers="headers"
                        :items="xpatients"
                        return-object
                        hide-default-footer
                    >
                        <template v-slot:top>
                            <v-toolbar flat class="bg-secondary-lighten">
                                <v-toolbar-title>{{ $t('message.toolbalTitle') }}</v-toolbar-title>
                            </v-toolbar>
                        </template>

                        <template v-slot:item="{ item }">
                            <tr>
                                <td v-bind:class="{'blue-lighten-5':isSelected(item)}" @click="selectMe(item)">
                                    <div>
                                        <p class="mt-2 mb-2">{{ item.noreg }}</p>
                                        <p class="mb-2" >
                                            <v-chip label size="small">
                                            {{ item.orderdate }}
                                            </v-chip>
                                        </p>
                                    </div>
                                </td>
                                <td v-bind:class="{'blue-lighten-5':isSelected(item)}" @click="selectMe(item)">
                                    <p>{{ item.name }}</p>
                                </td>
                            </tr>
                        </template>
                    </v-data-table>
                </v-container>
            </v-col>
        </v-row>
    </div>
</template>
    
<style scoped>

</style>
    
<script type="module">
    export default {
        name: "ListPatient",
        data() {
            return {
                headers: [
                    {
                        align: 'start',
                        key: 'name',
                        sortable: false,
                        width: "50%",
                        title: this.$t('message.table.noreg'),
                        class: "font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "50%",
                        title: this.$t('message.table.name'),
                        class: "font-weight-bold",
                    },
                ],
            };
        },
        computed: {
            xpatients() {
                return this.$store.state.verification.patients
            },
            selected_patient: {
                get() {
                    return this.$store.state.verification.selected_patient
                },
                set(val) {
                    this.$store.commit("verification/setSelectedPatient", val)
                }
            }
        },
        methods: {
            isSelected(p) {
                return p.id == this.$store.state.verification.selected_patient.id
            },
            selectMe(c) {
                console.log(c)
            }
        },
        wacth: {

        }
    }
</script>