<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 x-small :color="required ? '#fb8200' : 'primary'" class="mr-1"
					>mdi-record-circle</v-icon
				>
				{{ label }}
			</label>
		</v-col>
		<v-col :cols="label ? textCols : ''">
			<v-text-field
				v-model="InputValue"
				class="v-input__custom"
				:disabled="disabled"
				outlined
				:hide-details="true"
				:maxLength="maxLength"
				:placeholder="placeholder"
				@keyup.enter="search"
			></v-text-field>
			<div v-if="regExBool" style="color:red">{{ validCheckText }}</div>
		</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,
		},
		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,
		},
		regEx: {
			type: RegExp,
			require: false,
		},
		maxLength: {
			type: Number,
			require: false,
		},
		placeholder: {
			type: String,
			require: false,
		},
		validCheckText: {
			type: String,
			require: false,
		},
	},
	data() {
		return {
			regExBool: false,
		};
	},
	computed: {
		...mapState({
			searchParam: state => state.pageData,
			menuData: 'menuData',
		}),
		InputValue: {
			get() {
				return this.searchParam[this.parentPrgmId][this.valueNm];
			},
			set(value) {
				if (!this.diffModel) {
					return this.setPageData({ [this.valueNm]: value });
				}
			},
		},
	},
	watch: {
		InputValue(value) {
			if (value != '') {
				this.checkRegEx();
			}
		},
	},
	created() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		search() {
			if (this.searchOption === true) {
				this.setPageData({ isFind: true });
			}
		},
		checkRegEx() {
			var phonRegExp = this.regEx;
			if (!phonRegExp.test(this.InputValue)) {
				this.regExBool = true;
				this.$emit('regExCheck' + this.valueNm, {
					valueNm: this.valueNm,
					flag: false,
				});
			} else {
				this.regExBool = false;
				this.$emit('regExCheck' + this.valueNm, {
					valueNm: this.valueNm,
					flag: true,
				});
			}
		},
	},
};
</script>

<style></style>
