<template>
    <div>
        <v-container class="bg-white rounded-lg" fluid>
            <v-data-table :headers="headers" :items="xdetails" return-object hide-default-footer class="pt-5">
                <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>
                        <td class="text-center">
                            <v-checkbox v-model="item.chex" @change="selectMe()" />
                        </td>
                        <td class="text-center">
                            <div>
                                <p class="mt-2 mb-2">{{ item.ordernumber }}</p>
                                <p class="mb-2">
                                    <v-chip label size="small">
                                        {{ item.orderdate }}
                                    </v-chip>
                                </p>
                            </div>
                        </td>
                        <td class="text-center">
                            <p class="font-weight-medium">{{ item.patient_fullname }}</p>
                        </td>
                        <td class="text-center">
                            <p class="mt-2 mb-2">{{ item.group_name }}</p>
                            <p class="mb-2">
                                <v-chip label size="small">
                                    {{ item.delivery }}
                                </v-chip>
                            </p>
                        </td>
                        <td class="text-center">
                            <p>{{ item.test_name }}</p>
                        </td>
                    </tr>
                </template>
            </v-data-table>
        </v-container>
    </div>
</template>

<style scoped>
.pointer {
    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;
}
</style>

<script type="module">
export default {
    name: "verificationRightList",
    data() {
        return {
            menu: false,
            headers: [
                {
                    align: 'center',
                    key: 'select',
                    sortable: false,
                    width: "5%",
                    title: "",  // kolom untuk checkbox
                    class: "font-weight-bold",
                },
                {
                    align: 'center',
                    key: 'noreg',
                    sortable: false,
                    width: "25%",
                    title: this.$t('message.tableDetailPatient.noreg'),
                    class: "font-weight-bold",
                },
                {
                    align: 'center',
                    key: 'name',
                    sortable: false,
                    width: "25%",
                    title: this.$t('message.tableDetailPatient.name'),
                    class: "font-weight-bold",
                },
                {
                    align: 'center',
                    key: 'group',
                    sortable: false,
                    width: "25%",
                    title: this.$t('message.tableDetailPatient.group'),
                    class: "font-weight-bold",
                },
                {
                    align: 'center',
                    key: 'examination',
                    sortable: false,
                    width: "25%",
                    title: this.$t('message.tableDetailPatient.examination'),
                    class: "font-weight-bold",
                },
            ],
        };
    },
    computed: {
        xdetails() {
            return this.$store.state.verification.details
        },
        btn_hide: {
            get() {
                return this.$store.state.verification.btn_hide
            },
            set(val) {
                this.$store.commit("verification/update_btn_hide", val)
            }
        },
    },
    methods: {
        selectMe() {
            this.btn_hide = true
            // Ambil item yang dipilih
            var selectedItems = this.xdetails.filter(item => item.chex);
            console.log("Selected items:", selectedItems);
            if (selectedItems.length > 0) {
                this.btn_hide = false
            }

            // Kirim data yang dipilih ke store
            this.$store.commit("verification/setSelectedTransaction", selectedItems);
        }
    },
    wacth: {

    }
}
</script>