<template>
  
    <v-dialog
      v-model="dialog"
      max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline grey lighten-2 pt-2 pb-2"
                primary-title
            >
            Form Pemeriksaan
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout>
                    <v-flex style="padding-bottom:0" xs12>
                         <v-checkbox
                            v-model="cito"
                            label="Cito"
                            >Cito</v-checkbox>
                    </v-flex>
                </v-layout>
                <v-layout row>
                    <v-flex pr-2 xs12>
                        <v-autocomplete
                            label="Pemeriksaan"
                            v-model="xselected_px"
                            :items="xpxs"
                            :search-input.sync="search"
                            auto-select-first
                            no-filter
                            return-object
                            item-text="pxname"
                            :loading="is_loading"
                            no-data-text="Pilih Pemeriksaan"
                            >
                            <template
                                slot="item"
                                slot-scope="{ item }"
                                >
                                <v-list-tile-content>
                                    <v-list-tile-title v-text="item.pxname"></v-list-tile-title>
                                </v-list-tile-content>
                            </template>

                        </v-autocomplete>
                    </v-flex>
                </v-layout>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="dialog = false"
                >
                Tutup
                </v-btn>
                <v-btn
                    color="primary"
                    flat
                    @click="addPx()"
                >
                Tambahkan
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  
</template>

<style scoped>
</style>

<script>
module.exports = {
    data(){
        return {
            datatext : '',
            search : '',
            cito:false
        }
    },
    computed : {
        vtext : {
            get() {
                return this.datatext
            },
            set(val) {
                this.datatext = val
            }
        },
        dialog: {
            get() {
                return this.$store.state.px.dialog_px_is_active
            },
            set(val) {
                this.$store.commit('px/update_dialog_px_is_active',val)
            }
        },
        xselected_px: {
            get() {
                this.$store.state.px.selected_px
            },
            set(val) {
                this.$store.commit("px/update_selected_px",val)
            }
        },
        xpxs() {
            return this.$store.state.px.pxs
        },
        is_loading() {
            return this.$store.state.px.search_status == 1
        }
    },
    methods: {
        addPx() {
            this.dialog = false
            var prm = {'id':0,'chex':false,'pxid':this.$store.state.px.selected_px.id,'flagcito':this.$store.state.px.selected_px.flagcito,'pxname':this.$store.state.px.selected_px.pxname,'bruto':this.$store.state.px.selected_px.bruto,'discount':this.$store.state.px.selected_px.discount,'total':this.$store.state.px.selected_px.total,'addon':true}
            this.cito = false
            this.search = ''
            this.datatext = ''
            this.$emit('add-data-px', prm)
        },
        thr_search: _.debounce( function () {
            this.$store.dispatch("px/search",this.cito)
        },2000)
    },
    watch: {
      search(val,old) {
         if (val == old ) return
         if (! val) return
         if (val.length < 1 ) return
         if (this.$store.state.px.search_status == 1 ) return  
         this.$store.commit("px/update_search",val)
         this.thr_search()
      }
   }
}
</script>
