<template>
	<v-row no-gutters>
		<template v-for="(item, index) in detailList">
			<v-col
				v-if="!item.showValue"
				:cols="item.cols"
				:class="item.class"
				:key="index"
			>
				<component
					:is="item.type"
					:parentPrgmId="parentPrgmId"
					:item="item"
					:myGrid="myGrid"
					:bindingData="bindingData"
					@gridEditingFinish="gridEditingFinish"
					@inputClick="inputClick"
				/>
			</v-col>
		</template>
	</v-row>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import InputText from './InputText';
import InputNumber from './InputNumber';
import TextArea from './TextArea';
import SelectBox from './SelectBox';
import SelectBoxes from './SelectBoxes';
import CheckBox from './CheckBox';
import ChangeUserPswdPopPage from '../modal/ChangeUserPswdPopPage';
import EnrgReadPlacePop2Page from '../modal/EnrgReadPlacePop2Page';
import EnrgCostCenterPop from '../modal/EnrgCostCenterPop';
import ReadPlcPop from '../modal/ReadPlcPop';
import EvtObjPop from '../modal/EvtObjPop';
import FtnPlcFormPop from '../modal/FtnPlcFormPop';
import FtnPlcMultiFormPop from '../modal/FtnPlcMultiFormPop';
import ElecPowChrgPop from '../modal/ElecPowChrgPop';
import Label from './Label';
import BatchPop from '../modal/BatchPop';
import OnlnBasicUnitAddInfoPop from '../modal/OnlnBasicUnitAddInfoPop';
import EgrpPysclQtyPop from '../modal/EgrpPysclQtyPop';
import EqpmCalcPop from '../modal/EqpmCalcPop';
import EqpmBaseInfoPop from '../modal/EqpmBaseInfoPop';
import InputTextReg from './InputTextReg';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		detailList: {
			type: Array,
			require: false,
			default: () => {
				return [];
			},
		},
		bindingData: {
			type: String,
			require: false,
		},
		myGrid: {
			require: true,
		},
	},
	components: {
		InputText,
		InputNumber,
		TextArea,
		SelectBox,
		SelectBoxes,
		CheckBox,
		ChangeUserPswdPopPage,
		EnrgReadPlacePop2Page,
		EnrgCostCenterPop,
		ReadPlcPop,
		OnlnBasicUnitAddInfoPop,
		ElecPowChrgPop,
		EvtObjPop,
		Label,
		FtnPlcFormPop,
		BatchPop,
		FtnPlcMultiFormPop,
		EgrpPysclQtyPop,
		EqpmCalcPop,
		EqpmBaseInfoPop,
		InputTextReg
	},
	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',
			setGridSelectData: 'setGridSelectData',
		}),
		gridEditingFinish(data) {
			const newData = {
				[data.columnName]: data.value,
			};

			if (!this.bindingData) {
				this.setPageData({
					rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
				});
			} else {
				this.setGridSelectData({
					gridKey: this.bindingData,
					rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
				});
			}
			this.$emit('gridEditingFinish', data, this.bindingData);
		},
		inputClick(event, item, valueNm) {
			this.$emit('inputClick', event, item, valueNm);
		},
	},
};
</script>

<style></style>
