<template>
	<v-row
		class="search-box"
		align="center"
		no-gutters
		style="margin: 14px 0px 0px"
	>
		<v-col v-if="item.label" :cols="labelCols">
			<label for="" class="search-box-label">
				<v-icon x-small color="primary" class="mr-1">mdi-record-circle</v-icon>
				{{ item.label }}
			</label>
		</v-col>
		<v-col :cols="labelCols ? 11 - labelCols : ''">
			<v-select
				v-model="selectValue"
				:items="searchParam[item.resKey + 'List']"
				item-text="text"
				item-value="code"
				solo
				outlined
				:hide-details="true"
				append-icon="mdi-chevron-down"
				class="v-select__custom"
			></v-select>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
		}),
		selectValue: {
			get() {
				return this.searchParam[this.item.resKey];
			},
			set(value) {
				return this.setPageData({ [this.item.resKey]: value });
			},
		},
		labelCols() {
			let myCols = 0;
			if (this.item.label) {
				myCols = this.item.labelCols || '4';
			}
			return myCols;
		},
		// chkVlue() {
		//   return this.searchParam.blocId;
		// },
		chkBefoerLoad() {
			return this.item.befoerLoad
				? this.searchParam[this.item.befoerLoad]
				: null;
		},
	},
	watch: {
		selectValue() {
			if (this.item.autoLoad) this.setPageData({ isFind: true });
		},
		chkBefoerLoad() {
			if (this.item.befoerLoad)
				this.loadData(
					Object.assign(this.item.sendParam, {
						[this.item.paramKey]: this.searchParam[this.item.befoerLoad],
					}),
				);
		},
	},
	created() {
		if (!this.item.befoerLoad) this.loadData(this.item.sendParam || {});
	},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({
			getSearchList: 'modules/search/getSearchList',
		}),
		loadData(params) {
			this.getSearchList({
				apiKey: this.item.apiKey,
				resKey: this.item.resKey,
				dataCd: this.item.dataCd,
				dataNm: this.item.dataNm,
				addAll: this.item.addAll,
				params,
				// addAll: this.item.addAll || false
			});
		},
	},
};
</script>

<style></style>
