<template>
	<v-row class="search-box" align="center" no-gutters>
		<v-col v-if="item.label" :cols="labelCols">
			<label for="" class="search-box-label">
				{{ item.label }}
			</label>
		</v-col>
		<v-col :cols="labelCols ? 11 - labelCols : ''">
			<v-checkbox
				v-model="chkValue"
				:color="isDarkMode ? '#fff' : '#4777d9'"
			></v-checkbox>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
	},
	data() {
		return {};
	},
	computed: {
		...mapState({
			isDarkMode: state => state.isDarkMode,
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
		}),
		chkValue: {
			get() {
				return this.searchParam[this.item.valueKey];
			},
			set(value) {
				return this.setPageData({ [this.item.valueKey]: value });
			},
		},
		labelCols() {
			let myCols = 0;
			if (this.item.label) {
				myCols = this.item.labelCols || '4';
			}
			return myCols;
		},
	},
	watch: {
		chkValue() {
			if (this.item.autoLoad) this.setPageData({ isFind: true });
		},
	},
	created() {},
	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
	},
};
</script>

<style></style>
