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

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

                <template v-slot:headers="{ columns }">
                    <tr>
                        <template v-for="column in columns" :key="column.key">
                            <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
                                <span>{{ column.title }}</span>
                            </td>
                        </template>
                    </tr>
                </template>

                <template v-slot:item="{ item }">
                    <tr v-bind:class="{ 'bg-primary-lighten': isSelected(item) }" @click="selectMe(item)">
                        <td>
                            <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>
                            <p>{{ item.name }}</p>
                        </td>
                        <td>
                            <p>{{ item.group }}</p>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-container>
    </div>
</template>

<style scoped>
.row-pointer>>>tbody tr :hover {
    cursor: pointer;
}
</style>

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

    }
}
</script>