export default {
    emits: ['onSearch', 'onClear'],
    props: {
        id: { type: String, required: true },
        showClearButton: { type: Boolean, required: false, default: false }
    },
    data() {
        return {
            showClear: false
        }
    },
    created: function() {
        if (this.showClearButton) 
            this.showClear = true;        
    },
    updated: function () {
        if (this.showClearButton)
            this.showClear = true;   
    },
    methods: {
        searchHandler: function () {
            clearAllMsgs();
            this.showClear = true;
            this.$emit('onSearch');
        },
        clearHandler: function () {
            clearAllMsgs();
            this.showClear = false;
            this.$emit('onClear');
        },
        getString: function (key) {
            return Translation[key];
        }
    },
    template: `
                <div class="panel-group search-panel" :id="id + '-search-panel'" role="tablist" aria-multiselectable="true">
                            <div class="col-xs-12" role="tab" :id="id + '-wrapper'">
                                <div class="card">
                                    <div class="header" role="button" data-toggle="collapse" :data-parent="'#'+ id + '-search-panel'" :href="'#' + id + '-body'" aria-expanded="true" :aria-controls="id + '-wrapper'">
                                        <h3>
                                            {{getString("GN0000395")}}
                                        </h3>
                                    </div>
                                    <div :id="id + '-body'" runat="server" class="body panel-collapse collapse" role="tabpanel" :aria-labelledby="id + '-wrapper'" aria-expanded="true">
                                        <div class="row">
                                            <slot></slot>
                                        </div>   
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="form-group">
                                                    <button class="btn btn-primary"  @click.prevent="searchHandler">{{getString("GN0000391")}}</button>
                                                    <button class="btn btn-primary" v-if="showClear" @click.prevent="clearHandler">{{getString("String289")}}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`
}