dr

<template>
    <div class="ui dropdown selection component" :id="id" v-bind:class="classes">
        <input type="hidden" v-model="selected" :id="`input_${id}`" :name="name">
        <i class="dropdown icon"></i>
        <div class="default text">{{ defaultText }}</div>
        <div class="menu">
            <div class="item" v-for="(value, index) in data" :data-value="valorItem(value, index)">{{ nombreItem(value, index) }}</div>
            <!--  @click="change(valorItem(value, index))"-->
        </div>
    </div>

</template>

<script>
    import Tools from '../../tools.js';

    export default {
        /* On load */
        mounted(){
            this.inicializarDropdown();
        },

        data(){
            return {
                id: Tools.id()
            }
        },

        /* Parametros recibidos */
        props: {
            data: {
                type: [Object, Array],
                required: true
            },

            dataKeyValue: {
                type: Boolean,
                default: false
            },
            dataInverted: {
                type: Boolean,
                default: false
            },
            selected: {
                type: [Number, String]
            },
            text: {
                type: String
            },
            value: {
                type: String
            },
            classes: {
                type: String
            },
            defaultText: {
                type: String,
                default: 'Seleccione'
            },
            useVModel:{
                type: Boolean,
                default: false
            },
            fullTextSearch:{
                type: [Boolean, String],
                default: false
            },
            name: {
                type: String,
                default: ''
            }
        },

        /* Metodos */
        methods:{
            inicializarDropdown(){
                $(`#${this.id}`).dropdown({
                    fullTextSearch: this.fullTextSearch,
                    forceSelection: false,
                    onChange: function(value){
                        this.onChange(value);
                    }.bind(this)
                });
            },
            onChange(value){
                if(this.useVModel){
                    this.$emit('input', value);
                }else{
                    this.$emit('change', value);
                }
            },

            nombreItem(name, index){
                return (this.dataKeyValue) ?
                    (this.dataInverted ? name : index) : name[this.text];
            },

            valorItem(value, index){
                return (this.dataKeyValue) ?
                    (this.dataInverted ? index : value) : value[this.value];
            },



        },
        watch: {
            selected: function(value) {
                $(`#${this.id}`).dropdown('set selected', value);
            },
            data: function(value) {
                Vue.nextTick(() => {
                    this.inicializarDropdown();
                    $(`#${this.id}`).dropdown('set selected', this.selected);
                });

            }
        }

    }

</script>