<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col
			v-if="item.label"
			cols="4"
			:style="item.padding ? 'padding-left:10px' : ''"
		>
			<label for="" class="search-box-label">
				<v-icon
					x-small
					:color="item.required ? '#fb8200' : 'primary'"
					class="mr-1"
					>mdi-record-circle</v-icon
				>
				{{ item.label }}
			</label>
		</v-col>
		<v-col :cols="item.label ? (item.textCols ? item.textCols : 7) : ''">
			<v-select
				v-model="selectValue"
				:items="typeof item.list != 'string' ? item.list : myListData"
				:item-text="typeof item.list != 'string' ? 'text' : item.itemText"
				:item-value="typeof item.list != 'string' ? 'value' : item.itemValue"
				outlined
				:hide-details="true"
				append-icon="mdi-chevron-down"
				class="v-select__custom"
				:disabled="item.disabled || false"
				:readonly="item.readonly || false"
				:required="item.required || false"
				@change="modifyValue($event, item.valueNm)"
			></v-select>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		item: {
			type: Object,
			require: true,
		},
		// myGrid: {
		//   require: true
		// }
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			myListData(state) {
				let list = [...state.pageData[this.parentPrgmId][this.item.list]];
				list.forEach((item, idx) => {
					if (item.commCdNm && item.commCdNm == '전체') {
						list.splice(idx, 1);
					}
					if (this.item.addNull && idx == 0) {
						list.unshift({
							commCd: '',
							commCdNm: '',
							commCdAbbrnm: '',
							commGrpCd: 'EM_ECC_KIND',
						});
					}
				});
				return list;
			},
			myBindingData(state) {
				if (!this.bindingData) {
					return state.pageData[this.parentPrgmId]['rowGridSelectData'];
				} else {
					return state.pageData[this.parentPrgmId][this.bindingData][
						'rowGridSelectData'
					];
				}
			},
			selectRow(state) {
				return state.pageData[this.parentPrgmId][
					this.bindingData + 'SelectKey'
				];
			},
		}),
		selectValue: {
			get() {
				return this.myBindingData ? this.myBindingData[this.item.valueNm] : '';
			},
			set(value) {
				this.$emit('getValue', {
					key: this.item.valueNm,
					value: value,
				});
				return value;
				// return this.setGridDataEdit({
				//   gridKey: this.bindingData,
				//   selectRow: this.selectRow,
				//   objKey: this.item.valueNm,
				//   value
				// });
			},
		},
	},
	created() {},
	methods: {
		...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
		modifyValue(v, n) {
			const dt = {
				columnName: n,
				value: v,
			};
			this.$emit('gridEditingFinish', dt);
		},
	},
};
</script>

<style></style>
