<template>
	<select class="selectpicker"
		v-model="value"
		:disabled="disabled"
		:multiple="fieldOptions.multiSelect"
		:title="placeholder"
		data-width="100%"
		:name="inputName">
		<option :disabled="schema.required"
			v-if="fieldOptions.multiSelect !== true"
			:value="null"
			:selected="value == undefined" ></option>
		<option v-for="item in items"
			:key="getItemValue(item)"
			:value="getItemValue(item)"> {{ getItemName(item) }}</option>
	</select>
</template>

<script>
/* global $ */
import abstractField from "../abstractField";

export default {
	name: "field-selectex",
	mixins: [abstractField],

	computed: {
		items() {
			let values = this.schema.values;
			if (typeof values == "function") {
				return values.apply(this, [this.model, this.schema]);
			} else return values;
		}
	},

	methods: {
		getItemValue(item) {
			if (item instanceof Object) {
				if (typeof this.fieldOptions["value"] !== "undefined") {
					return item[this.fieldOptions.value];
				} else {
					// Use 'id' instead of 'value' cause of backward compatibility
					if (typeof item["id"] !== "undefined") {
						return item.id;
					} else {
						throw "`id` is not defined. If you want to use another key name, add a `value` property under `fieldOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items";
					}
				}
			} else {
				return item;
			}
		},

		getItemName(item) {
			if (item instanceof Object) {
				if (typeof this.fieldOptions["name"] !== "undefined") {
					return item[this.fieldOptions.name];
				} else {
					if (typeof item["name"] !== "undefined") {
						return item.name;
					} else {
						throw "`name` is not defined. If you want to use another key name, add a `name` property under `fieldOptions` in the schema. https://icebob.gitbooks.io/vueformgenerator/content/fields/select.html#select-field-with-object-items";
					}
				}
			} else {
				return item;
			}
		}
	},

	watch: {
		model: function() {
			if (typeof $.fn !== "undefined" && $.fn.selectpicker) $(this.$el).selectpicker("refresh");
		}
	},

	mounted() {
		this.$nextTick(() => {
			if (typeof $.fn !== "undefined" && $.fn.selectpicker) {
				$(this.$el)
					.selectpicker("destroy")
					.selectpicker(this.fieldOptions);
			} else {
				console.warn(
					"Bootstrap-select library is missing. Please download from https://silviomoreto.github.io/bootstrap-select/ and load the script and CSS in the HTML head section!"
				);
			}
		});
	},

	beforeDestroy() {
		if ($.fn.selectpicker) $(this.$el).selectpicker("destroy");
	}
};
</script>


<style>
.vue-form-generator .field-selectEx .bootstrap-select .dropdown-menu li.selected .text {
	font-weight: bold;
}
</style>
