<template>
    <v-card   class="mb-1 pa-1">
        <v-layout row>
            <v-flex xs12>
                <v-layout>
                    <one-date-picker
                        label="Start Date"
                        :date="null"
                        @change="startDateChange"
                        :data="null"
                        :max_date="null"
                        class="mr-4"
                        hint="DD-MM-YYYY"
                     ></one-date-picker>
                     <v-layout>
                    <one-date-picker
                        label="End Date"
                        :date="null"
                        @change="endDateChange"
                        :data="null"
                        :max_date="null"
                        class="mr-4"
                        hint="DD-MM-YYYY"
                     ></one-date-picker>
                        <v-text-field class="flex xs8 ma-1"
                                    label=""
                                    placeholder="Nama"
                                    single-line
                                    solo
                                    hide-details
                                    v-model="search"
                                    ></v-text-field>

                        <v-btn class="flex xs6 ma-1" color="success" @click="searchs" >
                        Search
                    </v-btn>
                </v-layout>
            </v-flex>
        </v-layout>
    </v-card>
</template>

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

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

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

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

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

        endDateChange(prm) {
            this.$store.commit('io_left_px_list/update_edate', prm.new_date)
        }
    }
}
</script>