<template>
	<v-row class="search-box">
		<v-col v-if="label" :cols="labelCols" class="pa-0">
			<label for="" class="search-box-label">
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''" class="pa-0">
			<v-select
				v-model="selectModel"
				:items="selectItems"
				:label="placeholder"
				:item-text="itemText"
				:item-value="itemValue"
				@change="selectChangeEvt($event)"
				solo
				append-icon="mdi-chevron-down"
				class="v-select__custom"
			></v-select>
		</v-col>
	</v-row>
</template>
<script>
export default {
	props: {
		model: {
			require: true,
		},
		label: {
			type: String,
			default: '',
			require: false,
		},
		labelPrepend: {
			type: Boolean,
			default: true,
			require: false,
		},
		placeholder: {
			type: String,
			default: '',
			require: false,
		},
		selectItems: {
			type: Array,
			default: [],
			require: true,
		},
		itemText: {
			type: String,
			default: '',
			require: false,
		},
		itemValue: {
			type: String,
			default: '',
			require: false,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
	},
	watch: {
		model(value) {
			this.selectModel = value;
		},
	},
	data() {
		return {
			selectModel: null,
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.selectModel = this.model;
		},
		selectChangeEvt(e) {
			this.$emit('update:model', e);
			this.$emit('selectChangeEvt', e);
		},
	},
};
</script>
<style scoped lang="scss">
::v-deep {
	.v-text-field__details {
		display: none;
	}
	.v-input__slot {
		margin-bottom: 0;
	}
}
</style>
