<template>
    <v-card   class="mb-1 pa-1">
        <v-layout row>
            <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="btn-search one-btn-icon ma-1" color="success" @click="searchs" >
                        <span class="icon-search"><span>
                    </v-btn>
                    
                    <!--<v-btn class="flex xs6 ma-1" color="success" @click="searchs" >
                        Search
                    </v-btn>-->
                </v-layout>
            </v-flex>

            <v-flex xs3 class="text-xs-right">
                <v-layout row wrap>
                    <v-flex xs6 class="text-xs-left pt-1">
                        <img v-if="img_lang" :src="'../../../libs/image/' + img_lang_2(lang.code, lang.is_si)" height="36" style="float:left" alt="" />
                        <!-- <div class="mt-1">
                            <v-btn dark fab small color="success" class="ma-0 btn-legend">MR</v-btn>
                            <v-btn dark fab small color="red" class="ma-0 btn-legend">MR</v-btn>
                            Multi Rule</div> -->
                        <!-- <div class="mt-1">
                            <v-btn dark fab small color="success" class="ma-0 btn-legend">D</v-btn>
                            <v-btn dark fab small color="red" class="ma-0 btn-legend">D</v-btn>
                            Delta Check</div> -->
                    </v-flex>
                    <v-flex xs6>
                        <v-btn
                            color="red"
                            class="white--text ma-1"
                            @click="save_result"
                            >
                            UnValidasi
                            <v-icon right dark>save_alt</v-icon>
                        </v-btn>
                    </v-flex>
                </v-layout>
                

                
            </v-flex>
        </v-layout>
    </v-card>
</template>

<style scoped>
.btn-legend {
    height: 25px;
    width: 25px;
    border-radius: 0%;
}

button {
    height: 48px;
}

.btn-search {
    font-size: 1.5em
}
</style>

<script>
module.exports = {
    computed : {
        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) }
        },

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

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

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

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

        histories() {
            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"
        }
    }
}
</script>