<template>
    <div>
        <v-container class="bg-white rounded-lg" fluid>
            <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
                <h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
            </div>
            <v-data-table
                v-model="selected_patients"
                :items="patients"
                :headers="headers"
                hide-default-footer
                class="row-pointer"
            >
                <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 @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
                        <td>
                            <p class="font-weight-medium">{{ item.tanggal }}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{ item.noreg }}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{ item.kelpelanggan }}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{ item.nama }}</p>
                        </td>
                        <td>
                            <p class="font-weight-medium">{{ item.status }}</p>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-container>
    </div>
</template>

<script>
export default {
    name: "leftcomp",
    components: {},
    mounted() {
        
    },
    data() {
        return {
            menu: false,
            visible: false,
            selectedItems: [],
            headers: [
                {
                    title: this.$t('message.tablePatient.date'),
                    align: "left",
                    sortable: false,
                    key: "date",
                    width: "15%",
                    class: "font-weight-bold",
                },
                {
                    title: this.$t('message.tablePatient.noreg'),
                    align: "start",
                    sortable: false,
                    key: "noreg",
                    width: "20%",
                    class: "font-weight-bold",
                },
                {
                    title: this.$t('message.tablePatient.group'),
                    align: "start",
                    sortable: false,
                    key: "group",
                    width: "25%",
                    class: "font-weight-bold",
                },
                {
                    title: this.$t('message.tablePatient.name'),
                    align: "start",
                    sortable: false,
                    key: "name",
                    width: "25%",
                    class: "font-weight-bold",
                },
                {
                    title: this.$t('message.tablePatient.status'),
                    align: "start",
                    sortable: false,
                    key: "status",
                    width: "15%",
                    class: "font-weight-bold",
                },
            ],
        };
    },
    computed: {
        patients() {
            return this.$store.state.collection.patients;
        },
        selected_patients: {
            get() {
                return this.$store.state.collection.selected_patients;
            },
            set(data) {
                this.$store.commit("setSelectedPatients", data);
            }
        }
    },
    methods: {
        selectItem(data) {
            // this.$store.commit("setSelectedPatients", data);
            this.selected_patients = data;
        },
        isItemSelected(data) {
            return data.noreg === this.$store.state.collection.selected_patients.noreg
        }
    },
};
</script>

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