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

            <v-row>
                <v-col cols="2">
                    <v-text-field 
                        :label="$t('message.tableDetailPatient.navbar.date')"
                        variant="outlined"
                        hide-details
                    ></v-text-field>
                </v-col>
                <v-col cols="5">
                    <v-text-field 
                        :label="$t('message.tableDetailPatient.navbar.noreg')"
                        variant="outlined"
                        hide-details
                    ></v-text-field>
                </v-col>
                <v-col cols="2.5">
                    <v-text-field 
                        :label="$t('message.tableDetailPatient.navbar.dob')"
                        variant="outlined"
                        hide-details
                    ></v-text-field>
                </v-col>
                <v-col cols="2.5">
                    <v-text-field 
                        :label="$t('message.tableDetailPatient.navbar.sender')"
                        variant="outlined"
                        hide-details
                    ></v-text-field>
                </v-col>
            </v-row>

            <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-left" v-if="item.is_result == 'N'" colspan="8">
                            <p class="font-weight-medium">{{ item.t_testname }}</p>
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            <p class="font-weight-medium">{{ item.t_testname }}</p>
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            <div class="pt-3 pb-3">
                                <v-text-field 
                                    density="compact"
                                    label="" 
                                    variant="outlined"
                                    hide-details
                                    auto-grow
                                ></v-text-field>
                            </div>
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            <p>{{ item.result_flag }}</p>
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            {{ item.normal_note }}
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            {{ item.unit_name }}
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            <div class="d-flex justify-space-between align-center">
                                <div>
                                    {{ item.methode_name }}
                                </div>
                                <v-btn
                                    variant="text"
                                    small
                                    color="primary"
                                    class="bg-primary-lightens ma-0 float-left">
                                    <iconify-icon
                                        style="font-size: 1.5rem;"
                                        icon="fluent:edit-20-regular"
                                    ></iconify-icon>
                                </v-btn>
                            </div>
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            <div class="pt-3 pb-3">
                                <v-text-field 
                                    density="compact"
                                    label="" 
                                    variant="outlined"
                                    hide-details
                                    auto-grow
                                ></v-text-field>
                            </div>
                        </td>
                    </tr>
                </template>
            </v-data-table>

        </v-container>
    </div>
</template>
    
<style scoped>
    .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: "DetailPatient",
        data() {
            return {
                menu: false,
                headers: [
                    {
                        align: 'start',
                        key: 'name',
                        sortable: false,
                        width: "15%",
                        title: this.$t('message.tableDetailPatient.header.name'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "20%",
                        title: this.$t('message.tableDetailPatient.header.result'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "5%",
                        title: this.$t('message.tableDetailPatient.header.flag'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "10%",
                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "10%",
                        title: this.$t('message.tableDetailPatient.header.unit'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "20%",
                        title: this.$t('message.tableDetailPatient.header.method'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "20%",
                        title: this.$t('message.tableDetailPatient.header.note'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                ],
            };
        },
        computed: {
            xdetails() {
                return this.$store.state.entry.details
            },
        },
        methods: {
            formatDate() {
                if (!this.date) return null;

                return moment(this.date).format("DD-MM-YYYY");
            },
            deFormatedDate(date) {
                if (!date) return null;

                const [day, month, year] = date.split("-");
                return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
            },
        },
        wacth: {

        }
    }
</script>