<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon
					v-if="iconShow"
					small
					:class="['mr-1', required ? 'icon-orange' : 'icon-blue']"
					>$icoBulletPoint</v-icon
				>
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''">
			<v-select v-model="innerValue" :items="itemList" item-text="text" item-value="value" solo outlined
				:hide-details="true" append-icon="" :class="['v-select__custom', customClass]" :disabled="disabled"
				:readonly="readonly"><template v-slot:append>
					<!-- Custom SVG icon -->
					<v-icon>$icoChevronDown</v-icon>


				</template></v-select>
			<!-- @change="updateBlocCode($event)" -->
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	props: {
		autoLoad: {
			type: Boolean,
			require: false,
			default: true,
		},
		label: {
			type: String,
			require: false,
			default: null,
		},
		textCols: {
			type: Number,
			require: false,
			default: 12,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 12,
		},
		itemList: {
			type: Array,
			require: true,
			default: () => [],
		},
		propsValue: {
			type: String,
			require: true,
			default: null,
		},
		required: {
			type: Boolean,
			require: false,
			default: false
		},
		iconShow: {
			type: Boolean,
			require: false,
			default: true
		},
		disabled: {
			type: Boolean,
			require: false,
			default: false
		},
		readonly: {
			type: Boolean,
			require: false,
			default: false
		},
		customClass: {
			type: String,
			require: false,
		},
	},
	emits: ['update:propsValue'],
	data() {
		return {};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
		}),
		innerValue: {
			get() {
				return this.propsValue;
			},
			set(value) {
				// console.log('value[setValue] : ', value)
				this.$emit('update:propsValue', value);
			},
		},
	},
	created() {
		// console.log('created SelectBox')
		// console.log('itemList : ', this.itemList);
		// console.log('propsValue : ', this.propsValue);
	},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({}),
	},
};
</script>

<style></style>
