<template>
	<v-row class="search-box">
		<v-col v-if="label" :cols="labelCols" class="pa-0">
			<label for="" class="search-box-label">
				<v-icon v-if="labelPrepend">mdi-checkbox-blank-circle</v-icon>
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''" class="pa-0">
			<v-text-field
				v-model="textModel"
				@keyup="textChangeEvt($event)"
				class="v-input__custom"
			></v-text-field>
		</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,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
	},
	watch: {
		model(value) {
			this.textModel = value;
		},
	},
	data() {
		return {
			textModel: null,
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.textModel = this.model;
		},
		textChangeEvt(e) {
			this.$emit('update:model', e.target.value);
			this.$emit('textChangeEvt', e.target.value);
		},
	},
};
</script>
<style scoped lang="scss">
::v-deep {
	.v-text-field__details {
		display: none;
	}
	.v-input__slot {
		margin-bottom: 0;
	}
}
</style>
