<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"
                        v-model="order_date"
                        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"
                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'">
                            
                        </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'">
                            {{ item.methode_name }}
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            {{ item.note }}
                        </td>
                        <td class="text-left" v-if="item.is_result == 'Y'">
                            <div class="d-flex justify-center">
                                <div
                                    :dark="item.validation_old != 'Y'"
                                    :disabled="item.validation_old == 'Y'"
                                    v-show="item.verification == '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
                                    v-show="item.verification == 'Y'"
                                    :class="item.validation=='Y'?'pointer bg-success-lighten rounded-lg ml-2':'pointer bg-success rounded-lg ml-2'" 
                                    style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                                >
                                    <iconify-icon
                                        :class="item.validation=='Y'? 'text-success':'text-white'"
                                        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>
    .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: "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: 'result', 
                        sortable: false,
                        width: "10%",
                        title: this.$t('message.tableDetailPatient.header.result'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'flag', 
                        sortable: false,
                        width: "10%",
                        title: this.$t('message.tableDetailPatient.header.flag'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'nilai', 
                        sortable: false,
                        width: "10%",
                        title: this.$t('message.tableDetailPatient.header.normalvalue'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'unit', 
                        sortable: false,
                        width: "10%",
                        title: this.$t('message.tableDetailPatient.header.unit'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'metode', 
                        sortable: false,
                        width: "15%",
                        title: this.$t('message.tableDetailPatient.header.method'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'note', 
                        sortable: false,
                        width: "15%",
                        title: this.$t('message.tableDetailPatient.header.note'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                    { 
                        align: 'start',
                        key: 'validasi', 
                        sortable: false,
                        width: "5%",
                        title: this.$t('message.tableDetailPatient.header.validation'),
                        class: "bg-secondary-lighten font-weight-bold",
                    },
                ],
            };
        },
        computed: {
            xdetails() {
                return this.$store.state.validation.details
            },
            selected_detail () {
                let x = this.$store.state.validation.selected_detail
                console.log(x)
                if (x)
                    return x
                return {}
            },
            order_date() {
                let d = this.selected_detail.T_OrderHeaderDate
                let e = ''
                try {
                    e = d.substr(0,10).split('-').reverse().join('-')
                } catch(e) { /*console.log(e.message)*/ }
                
                return e
            },
        },
        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>