<template>
	<v-row class="search-box" align="end" 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
				v-model="InputValue"
				class="v-input__custom"
				:class="customClass"
				:disabled="disabled"
				:readonly="readonly"
				outlined
				:hide-details="true"
				@keyup.enter="search"
				@keydown="keydownEvent"
				@keyup="keyupEvent"
				:placeholder="placeholder"
			></v-text-field>
			<!-- <a-input v-model:value="InputValue" class="v-input__custom" :disabled="disabled" :readonly="readonly"
				:placeholder="placeholder" @pressEnter="search" @keydown="keydownEvent" @keyup="keyupEvent" :size="size" /> -->

		</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: 12,
		},
		textCols: {
			type: Number,
			require: false,
			default: 12,
		},
		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
		},
		size: {
			type: String,
			require: false,
			default: "middle",
		},
		customClass: {
			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 });
			}
		},
		keydownEvent($event) {
		},
		keyupEvent($event) {
			if (this.replaceList) {
				for (var i = 0; i < this.replaceList.length; i++) {
					this.InputValue = this.InputValue.replaceAll(this.replaceList[i], '');
				}
			}
			this.setPageData({ [this.valueNm]: this.InputValue });
		}
	},
};
</script>

<style></style>
