<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"
				outlined
				:multiple="multiple"
				:hide-details="true"
				:class="['v-select__custom', customClass]"
				:disabled="disabled"
				:readonly="readonly"
				append-icon=""
				><template v-slot:append>
					<v-icon>$icoChevronDown</v-icon>
				</template></v-select>
		</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: 8,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		itemList: {
			type: Array,
			require: true,
			default: () => [],
		},
		propsValue: {
			type: Array,
			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
		},
		multiple:{
			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>
