<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: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 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 >
                            <p>{{ item.patient_fullname }}</p>
                        </td>
                        <td >
                            <p class="font-weight-medium">{{ item.test_name }}</p>
                        </td>
                        <td class="text-center" >
                            <div class="d-flex justify-center">
                                <div :dark="item.validation_old != 'Y'"
                                    class="pointer bg-error-lighten rounded-lg"
                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;">
                                    <iconify-icon class="text-error" style="font-size: 1.5rem;"
                                        icon="fluent:dismiss-24-regular"></iconify-icon>
                                </div>
                                <div :disabled="item.validation == 'Y'"
                                    class="pointer bg-success-lighten rounded-lg ml-2"
                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;">
                                    <iconify-icon class="text-success" style="font-size: 1.5rem;"
                                        icon="fluent:checkmark-24-regular"></iconify-icon>
                                </div>
                            </div>
                        </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: "verificationLeftList",
    data() {
        return {
            headers: [
                {
                    align: 'center',
                    key: 'name',
                    sortable: false,
                    width: "10%",
                    title: this.$t('message.tableListPatient.noreg'),
                    class: "font-weight-bold",
                },
                {
                    align: 'center',
                    key: 'name',
                    sortable: false,
                    width: "40%",
                    title: this.$t('message.tableListPatient.name'),
                    class: "font-weight-bold",
                },
                {
                    align: 'left',
                    key: 'name',
                    sortable: false,
                    width: "45%",
                    title: this.$t('message.tableListPatient.examination'),
                    class: "font-weight-bold",
                },
                {
                    align: 'center',
                    key: 'validasi',
                    sortable: false,
                    width: "5%",
                    title: this.$t('message.tableListPatient.verification'),
                    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.trx_id == this.$store.state.verification.selected_patient.trx_id
        },
        selectMe(data) {
            this.$store.commit("verification/setSelectedPatient", data)
        }
    },
    wacth: {

    }
}
</script>