<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="item.label" cols="4">
			<label for="" class="search-box-label">
				<v-icon
					x-small
					:color="item.required ? '#fb8200' : 'primary'"
					class="mr-1"
					>mdi-record-circle</v-icon
				>
				{{ item.label }}
				<span v-if="item.essential">*</span>
			</label>
		</v-col>
		<v-col :cols="item.label ? 8 : ''">
			<v-row>
				<template v-for="(groupItem, idx) in item.groups">
					<v-col
						:cols="groupItem.cols"
						:class="groupItem.class"
						:key="'SelectBoxes' + idx"
					>
						<template v-if="groupItem.text">
							<span>{{ groupItem.text }}</span>
						</template>
						<template v-else>
							<component
								:is="'SelectBox'"
								:parentPrgmId="parentPrgmId"
								:item="groupItem"
								@gridEditingFinish="gridEditingFinish"
							/>
						</template>
					</v-col>
				</template>
			</v-row>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import SelectBox from './SelectBox';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		// gridEditingFinish: {
		//   // type: function
		//   // require: true
		// }
	},
	components: {
		SelectBox,
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			rowGridSelectData(state) {
				if (!this.bindingData) {
					return state.pageData[this.parentPrgmId]['rowGridSelectData'];
				} else {
					return state.pageData[this.parentPrgmId][this.bindingData][
						'rowGridSelectData'
					];
				}
			},
		}),
	},
	created() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		gridEditingFinish(data) {
			const newData = {
				[data.columnName]: data.value,
			};
			this.setPageData({
				rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
			});
			this.$emit('gridEditingFinish', data);
		},
	},
};
</script>

<style></style>
