<template>
	<v-card class="searchFilter">
		<v-row align="center" no-gutters style="margin: 14px 0px 0px">
			<v-col
				v-if="chkSearchOptions"
				:cols="chkSearchOptions.cols || '12'"
				:class="chkSearchOptions.class || ''"
			>
				<v-row align="center" no-gutters>
					<template v-for="(item, index) in chkSearchOptions.list">
						<!-- <v-col
              :cols="item.cols"
              :class="item.class || ''"
              :key="'searchOptions' + index"
            >
              <component
                :is="item.type ? item.type : null"
                :parentPrgmId="parentPrgmId"
                :item="item"
              />
            </v-col> -->
						<v-col :cols="item.cols" :key="'searchOptions' + index">
							<component
								:is="item.type ? item.type : null"
								:parentPrgmId="parentPrgmId"
								:item="item"
							/>
						</v-col>
					</template>
				</v-row>
			</v-col>
			<v-spacer v-if="chkSearchOptions && chkSearchButtons"></v-spacer>
			<v-col
				v-if="chkSearchButtons"
				:cols="chkSearchButtons.cols || '12'"
				:class="chkSearchButtons.class || ''"
			>
				<template v-for="(item, index) in chkSearchButtons.list">
					<component
						:key="'searchButtons' + index"
						:is="item.type ? item.type : null"
						:parentPrgmId="parentPrgmId"
						:gridName="item.bindingData"
						:class="{ 'mr-1': index < chkSearchButtons.list.length - 1 }"
					/>
				</template>
			</v-col>
		</v-row>
	</v-card>
</template>

<script>
import { mapState } from 'vuex';
import SearchSelect from './SearchSelect';
import SearchInput from './SearchInput';
import SearchCmCycle from './SearchCmCycle';
import DatePicker from './CustomDatepicker';
import CheckBox from './CheckBox';
import BtnSearch from '~/components/common/button/BtnSearch';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import FtnPlcMultiPop from '~/components/common/modal/FtnPlcMultiPop';
import UserPopPage from '~/components/common/modal/UserPopPage';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
	},
	components: {
		SearchSelect,
		SearchInput,
		SearchCmCycle,
		DatePicker,
		CheckBox,
		BtnSearch,
		BtnExcelDownload,
		FtnPlcMultiPop,
		UserPopPage,
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			searchItems(state) {
				return state.pageData[this.parentPrgmId].searchItems;
			},
		}),
		chkSearchOptions() {
			// console.log("chkSearchOptions", this.searchItems);
			return this.searchItems.options;
		},
		chkSearchButtons() {
			// console.log("chkSearchButtons", this.searchItems);
			return this.searchItems.buttons;
		},
	},
	created() {},
	methods: {},
};
</script>

<style></style>
