<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 }}
			</label>
		</v-col>
		<v-col :cols="item.label ? 7 : ''">
			<v-checkbox
				v-model="chkValue"
				style= "height: 36px; align-items: center;"
				:disabled="disabledFlag"
				:readonly="item.readonly || false"
				:required="item.required || false"
				:false-value="false"
				:color="isDarkMode ? '#fff' : '#4777d9'"
				@change="modifyValue"
			></v-checkbox>
		</v-col>
	</v-row>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		bindingData: {
			type: String,
			require: false,
		},
		item: {
			type: Object,
			require: true,
		},
		// myGrid: {
		//   require: true
		// }
	},
	data() {
		return {
			chkValue: false,
			testData: false,
			disabledFlag: false,
		};
	},
	//rowGridSelectKey
	computed: {
		...mapState({
			isDarkMode: state => state.isDarkMode,
			myBindingData(state) {
				// if(state.pageData[this.parentPrgmId]["rowGridSelectData"] != null){
				//   state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] = state.pageData[this.parentPrgmId]["rowGridSelectData"][this.item.valueNm] == "1"? true : false;
				// }
				// return state.pageData[this.parentPrgmId]["rowGridSelectData"];
				if (!this.bindingData) {
					return state.pageData[this.parentPrgmId]['rowGridSelectData'];
				} else {
					return state.pageData[this.parentPrgmId][this.bindingData][
						'rowGridSelectData'
					];
				}
			},
			pageData(state) {
				return state.pageData[this.parentPrgmId];
			},
			selectRow(state) {
				return state.pageData[this.parentPrgmId][
					this.bindingData + 'SelectKey'
				];
			},
		}),
		// checkValue: {
		//   get() {
		//     return this.myBindingData ? this.myBindingData[this.item.valueNm] : "";
		//   },
		//   set(value) {
		//     console.log(value);
		//     return value;
		//     // return this.setGridDataEdit({
		//     //   gridKey: this.bindingData,
		//     //   selectRow: this.selectRow,
		//     //   objKey: this.item.valueNm,
		//     //   value
		//     //   // value: this.getKeyByValue(this.item.value, value)
		//     // });
		//   }
		// },
		// checkValue: {
		//   get() {
		//     return this.myBindingData[this.selectRow]
		//       ? this.item.value[
		//           this.myBindingData[this.selectRow][this.item.valueNm]
		//         ]
		//       : false;
		//   },
		//   set(value) {
		//     return this.setGridDataEdit({
		//       gridKey: this.bindingData,
		//       selectRow: this.selectRow,
		//       objKey: this.item.valueNm,
		//       value: this.getKeyByValue(this.item.value, value)
		//     });
		//   }
		// }
	},
	watch: {
		myBindingData: {
			deep: true,
			handler(val) {
				if (val) {
					this.chkValue = val[this.item.valueNm];
					// 대상 유형이 'TAG' 일 때만 계산 여부 disabled 처리
					if (
						this.item.valueNm == 'calcFg' &&
						val[this.item.disabledFg] == 'TAG'
					) {
						this.disabledFlag = true;
					} else {
						this.disabledFlag = this.item.disabled || false;
					}
				}
			},
		},
	},
	created() {},
	methods: {
		...mapMutations({ setGridDataEdit: 'setGridDataEdit' }),
		// getKeyByValue(object, value) {
		//   // 추후 utility 로 빼야할 듯,, 값을 이용해서 키를 찾는 기능
		//   return Object.keys(object).find(key => object[key] === value);
		// },
		modifyValue(e) {
			const dt = {
				columnName: this.item.valueNm,
				value: e,
			};
			this.$emit('gridEditingFinish', dt);
		},
	},
};
</script>

<style></style>
