<template>
    <v-container fluid class="bg-white rounded-lg my-5">
        <div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
            <v-row>
                <v-col cols="11">
                    <h3>{{ $t('message.table.title') }}</h3>
                </v-col>
                <v-col cols="1" align="end">
                    <h3>6</h3>
                </v-col>
            </v-row>
        </div>
        <v-data-table
            :headers="headers"
            hide-default-footer
        >
            <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>
        </v-data-table>
    </v-container>
</template>

<script>
    export default {
        name: "contentcomp",
        components: {},
        mounted() {},
        data() {
            return {
                menu: false,
                visible: false,
                headers : [
                    {
                        title: this.$t('message.table.h_no'),
                        align: "start",
                        sortable: false,
                        key: "name",
                        width: "5%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_orderr'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "15%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_pasien'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "20%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_status'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_sample'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_proces'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_resver'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_resval'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                    {
                        title: this.$t('message.table.h_printt'),
                        align: "center",
                        sortable: false,
                        key: "name",
                        width: "10%",
                        class: "font-weight-bold",
                    },
                ]
            };
        },
    }
</script>