<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-text-field
				ref="formRef"
				:value="InputValue"
				class="v-input__custom"
				:disabled="disabled"
				:readonly="readonly"
				outlined
				:hide-details="true"
				@keyup.enter="search"
				@keydown="keydownEvent"
				@keyup="keyupEvent"
				@input="inputEvent"
				:placeholder="placeholder"
			></v-text-field>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		diffModel: {
			type: String,
			require: false,
		},
		label: {
			type: String,
			require: true,
		},
		valueNm: {
			type: String,
			require: true,
		},
		disabled: {
			type: Boolean,
			require: false,
			default: false,
		},
		readonly: {
			type: Boolean,
			require: false,
			default: false,
		},
		labelCols: {
			type: Number,
			require: false,
			default: 4,
		},
		textCols: {
			type: Number,
			require: false,
			default: 7,
		},
		searchOption: {
			type: Boolean,
			require: false,
		},
		required: {
			type: Boolean,
			require: false,
			default: false,
		},
		iconShow:{
			type:Boolean,
			require:false,
			default:true
		},
		replaceList:{
			type:Array,
			require:false,
			default:null
		},
		placeholder:{
			type:String,
			require:false
		}
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
			menuData: 'menuData',
		}),
		InputValue: {
			get() {
				return this.searchParam[this.parentPrgmId][this.valueNm];
			},
			set(value) {
				if (!this.diffModel) {
					if(this.replaceList){
						for(var i=0; i<this.replaceList; i++){
							value.replaceAll(this.replaceList[i]);
						}
					}
					return this.setPageData({ [this.valueNm]: value });
				}
			},
		},
	},
	created() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		search() {
			if (this.searchOption === true) {
				this.setPageData({ isFind: true });
			}
		},
		inputEvent(str){
            // console.log("str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|0-9\s]*/i):",str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|0-9\s]*/i))
			var temp = str.match(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|0-9\s]*/i)[0];
            var regExp = /[^a-z]*/;
            temp = temp.match(regExp);
			this.$refs.formRef.lazyValue = temp;
		},
		keydownEvent($event){
			
			// if(this.replaceList){
			// 	console.log("event : ",$event)
			// // 	console.log("InputValue : ", this.InputValue);
			// // 	// var regExp = /[A-Z]/;
			// 	var regExp = /^[0-9a-z\s]/
			// 	if(regExp.test($event.key)){
			// 		// if($event.code == 'ShiftLeft')
					
					
			// 		// console.log("test", regExp)
			// 	// if($event.key){
			// 		this.InputValue = this.InputValue.replaceAll(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');
			// 		$event.preventDefault();
			// 	}
			// 	// }
			// this.InputValue = this.InputValue.replaceAll(this.replaceList[0], '');
			// for(var i=0; i<this.replaceList.length; i++){
				// this.InputValue = this.InputValue.replaceAll(this.replaceList[i], '');
			// }
			// }
			// this.setPageData({ [this.valueNm]: this.InputValue });
		},
		keyupEvent($event){
			
		}
	},
};
</script>

<style></style>
