<template>
    <v-card   class="mb-1 pa-1">
        <v-layout row>
            <v-flex xs8>
                <v-layout>
                    <one-date-picker
                        label="Tanggal"
                        :date="sdate"
                        class="mydate"
                        data="0"
                        @change="changeDate"
                    ></one-date-picker>
                    <v-text-field class="flex ma-1"
                                label=""
                                placeholder="No Reg / Nama"
                                single-line
                                solo
                                hide-details
                                v-model="search"
                                @keyup.native="keySearch"
                                ></v-text-field>
                    <v-autocomplete
		    v-model="company"
		    :items="companies"
		    :loading="loading_company"
		    :search-input.sync="search_company"
                    class="ma-1 ml-1 mr-1"
		    hide-no-data
                    filled
		    item-text="M_CompanyName"
		    item-value="M_CompanyID"
		    label=""
		    placeholder="Cari Kelompok Pelanggan"
		    return-object
		  ></v-autocomplete>  
                <v-select
                    :items="groups"
                    class="ma-1"
                    v-model="selected_group"
                    item-text="group_name"
                    item-value="group_id"
                    label="Grup Pemeriksaan"
                    return-object
                    solo
                    hide-details
                    
                    clearable
                ></v-select>                
                </v-layout>
            </v-flex>
            <v-flex xs2>
                <v-layout>
                    <v-btn class="btn-search one-btn-icon ma-1" color="success" @click="searchs" >
                        <span class="icon-search"><span>
                    </v-btn>
                </v-layout>
            </v-flex>

            <v-flex xs3 class="text-xs-right">
                <!-- <img :src="'../../../libs/image/' + img_lang" height="36" style="float:left" alt="" /> -->
                
                <v-btn v-show="false" v-for="(lang, n) in langs" v-bind:key="n" color="grey lighten-1" class="one-btn-icon pl-2 pr-2 ml-0 mr-1" depressed :outline="!lang_selected(lang)" @click="lang_change(lang)">
                    <img :src="'../../../libs/image/' + img_lang_2(lang.code, lang.is_si)" height="40" alt="" />
                </v-btn>

                <v-btn class="btn-search one-btn-icon ma-1" color="brown" @click="re_calc_age" dark >
                    Re. Age
                </v-btn>

                <v-btn v-show="!info_req_perfect" class="btn-search one-btn-icon ma-1" color="red" @click="info" dark >
                    <v-icon>info</v-icon>
                </v-btn>

                <v-btn class="btn-search one-btn-icon ma-1" color="red" @click="note" dark >
                    <v-icon>library_books</v-icon>
                </v-btn>

                <v-btn
                    color="blue-grey"
                    class="white--text ma-1"
                    @click="histories"
                    v-show="btn_history_show"
                    >
                    Histori
                </v-btn>

                <v-btn
                    color="blue"
                    class="white--text ma-1"
                    @click="save_result"
                    >
                    Simpan
                    <v-icon right dark>save_alt</v-icon>
                </v-btn>
            </v-flex>
        </v-layout>
    </v-card>
</template>

<style scoped>
.mydate {
   width:150px;
}
button {
    
    height: 48px;
}

.btn-search {
    font-size: 1.5em
}

</style>

<script>
module.exports = {
    components : {
        'one-date-picker' : httpVueLoader('./oneDatePicker.vue')
    },
    data() {
       return {
         search_company: ''
       }
    },
    watch : {
	search_company(n,o) {
		this.$store.dispatch('company/search',n)
	}
    },
    computed : {
	company: {
		get() { return this.$store.state.company.company },
		set(v) { this.$store.commit('company/update_company',v) }
	},
	companies() {
		return this.$store.state.company.companies
	},
	loading_company() { 
		return this.$store.state.company.loading
	},
        nolab : {
            get () { return this.$store.state.re_patient.nolab },
            set (v) { this.$store.commit('re_patient/update_nolab', v) }
        },
        search : {
            get () { return this.$store.state.re_patient.search },
            set (v) { this.$store.commit('re_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) { 
                this.$store.commit('re_px/update_selected_group', v) 
                this.$store.dispatch('re_patient/search')
            }
        },

        lang () {
            return this.$store.state.re_patient.selected_patient.M_LangCode
        },

        img_lang () {
            if (this.lang == "ID")
                return "inako.png"
                // return "flag-ina_48.png"
            else if (this.lang == "EN")
                return "engko.png"
                // return "flag-us_48.png"
        },

        langs () {
            return this.$store.state.re_patient.langs
        },

        sdate : {
            get () { return this.$store.state.re_patient.s_date },
            set (v) { this.$store.commit('re_patient/update_sdate', v) }
        },

        selected_patient () {
            return this.$store.state.re_patient.selected_patient
        },

        btn_history_show () {
            if (!this.selected_patient) return false
            if (!this.selected_patient.is_history) return false
            if (this.selected_patient.is_history == "N") return false

            return true
        },

        info_req_perfect () {
            let x = false
            try {
                x = this.$store.state.re_patient.info_req.is_perfect == 'Y';    
            } catch (error) {
            }
            
            return x
        }
    },

    methods : {
        searchs() {
            this.$store.dispatch('re_patient/search')
        },
        re_calc_age() {
           let orderID = this.$store.state.re_patient.selected_patient.T_OrderHeaderID
           this.$store.dispatch('helper/calc_age',orderID)
        },
        keySearch(e) {
            if (e.which == 13) {
                this.searchs()
            }
        },

        search_px() {
            this.$store.dispatch('re_px/search')
        },

        save_result() {
            this.$store.dispatch('re_px/save')
        },

        histories() {
            this.$store.dispatch('re_history/history')
            this.$store.commit('re_history/update_dialog_history', true)
        },

        img_lang_2 (lang, si) {
            
            if (lang == "ID" && si == "N")
                return "inako.png"
            if (lang == "ID" && si == "Y")
                return "inasi.png"
            if (lang == "EN" && si == "N")
                return "engko.png"
            if (lang == "EN" && si == "Y")
                return "engsi.png"
        },

        lang_change (lang) {
            this.$store.commit('re_patient/update_lang', lang)
            this.$store.dispatch('re_px/lang_export')
        },

        lang_selected (lang) {
            if (lang.code == this.$store.state.re_patient.lang_code)
                return true
            return false
        },

        changeDate(x) {
            this.sdate = x.new_date
            this.searchs()
        },

        note() {
            this.$store.commit('re_patient/update_dialog_note', true)
        },

        info() {
            this.$store.commit('re_patient/update_dialog_req', true)
        }
    },

    mounted () {
        this.$store.dispatch('re_px/search_group')
    }
}
</script>
