<template>
	<v-row class="search-box" align="center">
		<v-col v-if="item.label" :cols="item.label ? (item.textCols ? item.textCols : 4) : ''"
			:style="item.padding ? 'padding-left:10px' : ''" class="py-0">
			<label for="" class="search-box-label">
				<v-icon
					v-if="item.iconShow"
					small
					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
					>$icoBulletPoint</v-icon
				>
				{{ item.label }}
			</label>
		</v-col>
		<v-col :cols="item.label ? (item.textCols ? item.textCols : 8) : ''" class="py-0">
			<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"
				class="v-select__custom" :disabled="item.disabled || false" :readonly="item.readonly || false"
				:required="item.required || false" @change="modifyValue($event, item.valueNm)" append-icon="">

				<template v-slot:append>
					<!-- Custom SVG icon -->
					<v-icon>$icoChevronDown</v-icon>


				</template>
			</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) {
				try{
					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;
				}catch(err) {
					return [];
				}
			},
			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>
