<template>
    <v-card   class="mb-1 pa-1">
        <v-layout row>
            <v-flex xs2 pt-1>
                <one-date-picker
                        label="Start Date"
                        :date="null"
                        :solo="true"
                        @change="startDateChange"
                        :max_date="null"
                        class="mr-2"
                     ></one-date-picker>
            </v-flex>
            <v-flex xs2 pt-1>
                <one-date-picker
                        label="End Date"
                        :date="null"
                        :solo="true"
                        @change="endDateChange"
                        :max_date="null"
                        class="mr-4"
                     ></one-date-picker>
            </v-flex>
            <v-flex xs4>
                <v-layout>
                    <v-text-field class="flex xs4 ma-1"
                                placeholder="No Lab"
                                single-line
                                solo
                                hide-details
                                v-model="nolab"
                                ></v-text-field>
                        <v-text-field class="flex xs8 ma-1"
                                    label=""
                                    placeholder="Nama"
                                    single-line
                                    solo
                                    hide-details
                                    v-model="search"
                                    ></v-text-field>
                </v-layout>
            </v-flex>

            <!-- <v-flex xs3 pt-1 pl-2>
                <v-select
                    :items="groups"
                    v-model="selected_group"
                    item-text="name"
                    item-value="id"
                    label="Grup Pemeriksaan"
                    return-object
                    solo
                    hide-details
                ></v-select>                
            </v-flex> -->
            <v-flex xs2>
                <v-layout>
                    <v-btn class="ma-1 one-btn-icon" color="success" @click="searchs">
                        <span class="icon-search"></span>
                    </v-btn>
                    <v-btn @click="edit" color="grey" class="ma-1 one-btn-icon" dark>
                        <span class="icon-edit"></span>
                     </v-btn>
                </v-layout>
            </v-flex>

            <v-flex xs2 class="text-xs-right">
                
                <v-btn @click="sendAll" color="blue" :dark="checked.length > 0" :disabled="checked.length < 1">
                        Kirim
                     </v-btn>
            </v-flex>
        </v-layout>
    </v-card>
</template>

<style scoped>
button {
    height: 48px;
}

.one-btn-icon span {
  font-size: 1.5em;
}

.one-btn-icon .v-btn__content {
  /* padding-left: 16px; */
}
</style>

<script>
module.exports = {
    components : {
        'one-date-picker' : httpVueLoader('./oneDatePicker2.vue')
    },

    computed : {
        nolab : {
            get () { return this.$store.state.ro_patient.nolab },
            set (v) { return this.$store.commit('ro_patient/update_nolab', v) }
        },

        search : {
            get () { return this.$store.state.ro_patient.search },
            set (v) { this.$store.commit('ro_patient/update_search', v) }
        },

        groups () {
            return [] // this.$store.state.re_px.groups
        },

        selected_group : {
            get () { return {} /*this.$store.state.re_px.selected_group*/ },
            set (v) { return /*this.$store.commit('re_px/update_selected_group', v)*/ }
        },

        checked () {
            return this.$store.state.ro_patient.selected_patients
        }   
    },

    methods : {
        searchs() {
            this.$store.dispatch('ro_patient/search')
        },

        startDateChange (prm) {
            this.$store.commit('ro_patient/update_sdate', prm.new_date)
        },

        endDateChange (prm) {
            this.$store.commit('ro_patient/update_edate', prm.new_date)
        },

        edit () {
            this.$store.commit('ro_master/update_dialog_main', true)
        },

        sendAll () {
            this.$store.commit('ro_send/update_dialog_all', true)
        }
    }
}
</script>