<template>
	<v-row class="search-box" align="center" >
		<v-col v-if="item.label" :cols="item.labelCols" class="py-0">
			<label for="" class="search-box-label">
				<v-icon 
					v-if="item.iconShow" 
					small 
					:color="item.required ? '#fb8200' : 'primary'"
					:class="['mr-1', item.required ? 'icon-orange' : 'icon-blue']"
				>
					$icoBulletPoint
				</v-icon>
				{{ item.label }}
			</label>
		</v-col>
		<v-col :cols="item.label ? item.textCols : ''" class="py-0">
			<v-text-field ref="formRef" :value="InputValue" class="v-input__custom" :disabled="item.disabled"
				:readonly="item.readonly" outlined :hide-details="true" @keyup.enter="search" @keydown="keydownEvent"
				@keyup="keyupEvent" @input="inputEvent($event, item.valueNm)" :placeholder="item.placeholder"></v-text-field>
		</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,
		},
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
			menuData: 'menuData',
			myBindingData(state) {
				if (!this.bindingData) {
					return state.pageData[this.parentPrgmId]['rowGridSelectData'];
				} else {
					return state.pageData[this.parentPrgmId][this.bindingData][
						'rowGridSelectData'
					];
				}
			},
		}),
		InputValue: {
			get() {
				return this.myBindingData ? this.myBindingData[this.item.valueNm] : ' ';
			},
			set(value) {
				this.$emit('getValue', {
					key: this.item.valueNm,
					value: value,
				});
				return this.newValue(value);
			},
		},
	},
	created() { },
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		search() {
			if (this.searchOption === true) {
				this.setPageData({ isFind: true });
			}
		},
		inputEvent(str, n) {
			var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣\s]*/i)[0];
			var regExp = /[^a-z]*/;
			temp = temp.match(regExp)[0];
			this.$refs.formRef.lazyValue = temp;
			const dt = {
				columnName: n,
				value: this.newValue(this.$refs.formRef.lazyValue)
			};
			this.$emit('gridEditingFinish', dt);
		},
		keydownEvent($event) {

		},
		keyupEvent($event) {

		},
		newValue(value) {
			let returnVal = value.trim();
			if (this.item.decimalPlaces) {
				const x = returnVal.replace('.', '');
				const y = 10 ** -this.item.decimalPlaces;
				let z = x * y;
				// console.log(x * y);
				if (z === 0) {
					z = 10 ** -(this.item.decimalPlaces + 1);
				}
				// console.log(Utility.setFormatDecimal(z, this.item.decimalPlaces));
				returnVal = Utility.setFormatDecimal(z, this.item.decimalPlaces);
			}
			return returnVal;
		},
	},
};
</script>

<style></style>
