<template>
    <div class="dropdown">
        <button :name='name' class="btn btn-primary btn-sm dropdown-toggle button-dropdownlist" aria-expanded="false" data-toggle="dropdown" :id="id" type="button" :label="label" :attribute="name" :group="group" :value="selectedValue">{{selectedText}}</button>
        <div class="dropdown-menu dropdown-menu-ds" :id="id">
            <a  class="dropdown-item" v-for="(option,i) in optionList" :key="i" @click="handleClick(i)">{{option.text}}</a>
        </div>
    </div>
    <div></div>
</template>

<script lang="ts">
export default {
    name: "DropDownListDS",
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        value: { type: String, default: '' },
        placeholder : { type: String, default: '' },
        group: { type: String, default: '' },
        optionList: [],
        invalid: { type: Boolean, default: false },
    },
    data: () => {
        return {
            selectedValue: "",
            selectedText: "",
            isEditing: false,
        }
    },
    methods:{
        handleClick(i : any) {
            console.log('text');
            this.selectedValue = this.optionList[i].value;
            this.selectedText = this.optionList[i].text;
            this.$emit('selectchange',  this.selectedValue);
        },
        changeSelectedText(selectedItem: string){
            this.selectedValue = selectedItem;
            let selected = this.optionList.find((item: any) => item.value == selectedItem);
            if(selected != undefined)this.selectedText = selected.text;
        },
    },
    mounted(){
        this.selectedText =  this.placeholder;
        if(this.value != ''){
            this.changeSelectedText(this.value);
        }
    },
    watch:{
        value: function(selectedItem){
            this.changeSelectedText(selectedItem);
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        }
    }
}
</script>

<style scoped>
.button-dropdownlist{
    background: #4e73df00 !important;
    color: #808080 !important;
    font-size: 14px !important;
    border-style: none !important;
}

.dropdown-menu-ds{
    width: 300px !important;
}

.validation-icon{
    color: #946464;
}
</style>