<template>
    <v-layout class="fill-height" column>
        <v-dialog v-model="dialogsuccess" persistent max-width="290">
            <v-card>
                <v-card-title color="success" class="headline">Berhasil !</v-card-title>
                <v-card-text>
                    {{msgsuccess}}
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat @click="closeDialogSuccess">OK</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-card class="mb-2 pa-2 searchbox">
            <v-layout>
               
                <v-text-field class="xs6 ma-1" label="Nama Test" outline @keyup.enter="searchPatient" v-model="name" hide-details></v-text-field>

                <!-- <span @click="searchPatient"  class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>-->
                
            </v-layout>
            <v-layout row v-if="onsearch"><v-progress-linear :indeterminate="true"></v-progress-linear></v-layout>
        </v-card>
        <v-card>
            <v-layout style="height:650px;overflow: auto;" row>
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table :headers="headers" :items="patients" :loading="isLoading" hide-actions class="elevation-1">
                        <template slot="items" slot-scope="props">
                            <td class="text-xs-left pa-2" 
                                v-bind:class="{'amber lighten-4':isSelected(props.item)}" 
                                @click="selectMe(props.item)">
                                    {{ props.item.Nat_TestName}}
                            </td>
                        </template>
                    </v-data-table>
                    <!--<v-pagination  style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curr_page" :length="xtotal_page"></v-pagination>-->
                </v-flex>
            </v-layout>
        </v-card>
        <one-dialog-alert :status="openalertconfirmation" :msg="msgalertconfirmation" @forget-dialog-alert="forgetAlertConfirmation()"
            @close-dialog-alert="closeAlertConfirmation()"></one-dialog-alert>
        </v-layout>
</template>

<style scoped>
    .searchbox .v-input.v-text-field .v-input__slot {
        min-height: 60px;
    }

    .searchbox .v-btn {
        min-height: 60px;
    }

    table.v-table tbody td,
    table.v-table tbody th {
        height: 40px;
    }

    table.v-table thead tr {
        height: 40px;
    }
</style>

    <script>
        module.exports = {
            components: {
                'one-dialog-info': httpVueLoader('../../../../common/oneDialogInfo.vue'),
                'one-dialog-alert': httpVueLoader('../../../../common/oneDialogAlert.vue')
            },
            mounted() {
                //this.$store.dispatch("patient/getsexreg")
                this.$store.dispatch("patient/search", {
                    name: this.name,
                    lastid:-1
                })
            },
            methods: {
                isSelected(p) {
                    return p.NonlabTemplateMappingID == this.$store.state.patient.selected_patient.NonlabTemplateMappingID
                },
                searchPatient() {
                    this.$store.dispatch("patient/search", {
                        name: this.name,
                        lastid:-1
                    })
                    this.$store.commit("patient/update_current_page", 1)
                },
                selectMe(pat) {
                    if (this.$store.state.patient.no_save == 0) {
                        this.$store.commit("patient/update_selected_patient", pat)
                        this.$store.commit("patient/update_act", 'edit')
                        this.$store.commit("patient/update_last_id", pat.NonlabTemplateID)
                        this.$store.dispatch("patient/gettemplatedetail",pat)
                    } else {
                        this.$store.commit("patient/update_open_alert_confirmation", true)
                    }

                },
                closeAlertConfirmation() {
                    this.$store.commit("patient/update_open_alert_confirmation", false)
                },
                forgetAlertConfirmation() {
                    this.$store.commit("patient/update_no_save", 0)
                    this.$store.commit("patient/update_open_alert_confirmation", false)
                },
                updateAlert_success(val) {
                    this.$store.commit("patient/update_alert_success", val)
                },
                closeDialogSuccess() {
                    let arrpatient = this.$store.state.patient.patients
                    var idx = _.findIndex(arrpatient, item => item.NonlabTemplateID === this.$store.state.patient.last_id)
                    console.log(idx)
                    this.$store.dispatch("patient/search", {
                        name: this.name,
                        lastid: idx
                    })
                    this.$store.commit("patient/update_dialog_success", false)
                }
            },
            computed: {
                name: {
                    get() {
                        return this.$store.state.patient.name
                    },
                    set(val) {
                        this.$store.commit("patient/update_name", val)
                    }
                },
                onsearch(){
                    return this.$store.state.patient.onsearch
                },
                dialogsuccess: {
                    get() {
                        return this.$store.state.patient.dialog_success
                    },
                    set(val) {
                        this.$store.commit("patient/update_dialog_success", val)
                    }
                },
                msgsuccess() {
                    return this.$store.state.patient.msg_success
                },
                snackbar: {
                    get() {
                        return this.$store.state.patient.alert_success
                    },
                    set(val) {
                        this.$store.commit("patient/update_alert_success", val)
                    }
                },
                isLoading() {
                    return this.$store.state.patient.search_status == 1
                },
                patients() {
                    return this.$store.state.patient.patients
                },
                totalpatient() {
                    return this.$store.state.patient.total_patient
                },
                curr_page: {
                    get() {
                        return this.$store.state.patient.current_page
                    },
                    set(val) {
                        this.$store.commit("patient/update_current_page", val)
                        this.$store.dispatch("patient/search", {
                            name: this.name,
                            snorm: this.snorm,
                            current_page: val,
                            lastid: -1
                        })
                    }
                },
                xtotal_page: {
                    get() {
                        return this.$store.state.patient.total_patient
                    },
                    set(val) {
                        this.$store.commit("patient/update_total_patient", val)
                    }
                },
                openalertconfirmation: {
                    get() {
                        return this.$store.state.patient.open_alert_confirmation
                    },
                    set(val) {
                        this.$store.commit("patient/update_open_alert_confirmation", val)
                    }
                },

            },
            data() {
                return {
                    msgalertconfirmation: "Perubahan yang telah dilakukan belum disimpan dong !",
                    items: [],
                    snorm: '',
                    page: 1,
                    headers: [

                        {
                            text: "TEST",
                            align: "left",
                            sortable: false,
                            value: "status",
                            width: "15%",
                            class: "pa-2 blue lighten-3 white--text"
                        }
                    ],
                    pagination: {
                        descending: false,
                        page: 1,
                        rowsPerPage: 5,
                        sortBy: 'Nat_TestName',
                        totalItems: this.$store.state.patient.total_patients
                    }
                };
            }
        }
    </script>