<template>
    <div class="mt-1 relative rounded-sm shadow-sm">
        <select class="form-input block w-full rounded-sm sm:text-sm sm:leading-5 pr-10"
                :name="name"
                v-model="selected"
                @change="setAsSelected($event)"
        >
            <option v-if="placeholder" value="">{{ placeholder }}</option>
            <option v-for="(option, key) in options" :value="key">
                {{ option }}
            </option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
            <svg class="fill-current h-4 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
            </svg>
        </div>
    </div>
</template>

<script>
export default {
    props : {
        name : {
            type : String,
            required : true
        },
        options : {
            type : Array,
            required : true
        },
        value : {
            default : null
        },
        placeholder : {
            type : String,
            default : null
        },
    },
    data() {
        return {
            selected : 0,
        }
    },
    methods : {
        isSelected(item, index) {
            return index === this.selected;
        },
        setAsSelected(event) {
            this.selected = parseInt(event.target.value);
            this.$emit('selected', this.selected);
        }
    },
    mounted() {
        if (this.value) {
            this.selected = parseInt(this.value);

        } else if (this.placeholder) {
            this.selected = this.placeholder;
        }
    }
}
</script>
