<template>
    <div>
        <v-row>
            <v-col cols="12">
                <v-container class="bg-white rounded-lg">

                    <v-row class="pb-5">
                        <v-col cols="2">
                            <v-menu
                                v-model="menu"
                                :close-on-content-click="false"
                                transition="scale-transition"
                                offset-y
                                min-width="auto"
                                max-width="290px"
                            >
                                <template v-slot:activator="{ props  }">
                                <v-text-field
                                    :model-value="formatDate()"
                                    label="Tanggal Mulai"
                                    prepend-inner-icon="mdi-calendar"
                                    hide-details
                                    readonly
                                    variant="outlined"
                                    v-bind="props"
                                ></v-text-field>
                                </template>
                                <v-date-picker
                                hide-header
                                show-adjacent-months
                                rounded="lg"
                                color="primary"
                                v-model="date"
                                @update:modelValue="menu=false"
                                ></v-date-picker>
                            </v-menu>
                        </v-col>
                        <v-col cols="4">
                            <v-text-field 
                                label="No Reg / Nama / Jenis Kelamin" 
                                variant="outlined"
                                hide-details
                            ></v-text-field>
                        </v-col>
                        <v-col cols="3">
                            <v-text-field 
                                label="DOB / Umur" 
                                variant="outlined"
                                hide-details
                            ></v-text-field>
                        </v-col>
                        <v-col cols="3">
                            <v-text-field 
                                label="Pengirim" 
                                variant="outlined"
                                hide-details
                            ></v-text-field>
                        </v-col>
                    </v-row>

                    <v-data-table
                        :headers="headers"
                        :items="xdetails"
                        return-object
                        hide-default-footer
                    >
                        <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">
                                        <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: 2rem;"
                                                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>
            </v-col>
        </v-row>
    </div>
</template>
    
<style scoped>
</style>
    
<script type="module">
    export default {
        name: "DetailPatient",
        data() {
            return {
                menu: false,
                headers: [
                    {
                        align: 'start',
                        key: 'name',
                        sortable: false,
                        width: "15%",
                        title: "NAMA PEMERIKSAAN",
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "20%",
                        title: "HASIL",
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "5%",
                        title: "FLAG",
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "15%",
                        title: "NILAI NORMAL",
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "10%",
                        title: "UNIT",
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "15%",
                        title: "METODE",
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'name', 
                        sortable: false,
                        width: "20%",
                        title: "CATATAN",
                        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>