<template>
	<div class="l-layout">
		<!-- 조회조견 -->
		<common-page-title />
		<v-row ref="searchFilter" class="mt-2">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="end" no-gutters>
						<v-col :cols="2.5">
							<InputText :parentPrgmId="myPrgmId" label="배치ID" valueNm="batchId" :searchOption="true"
								:customClass="'input-large'" />
						</v-col>
						<v-col :cols="2.5">
							<InputText :parentPrgmId="myPrgmId" label="배치명" valueNm="batchNm" :searchOption="true"
								:customClass="'input-large'" />
						</v-col>
						<v-col :cols="2.5">
							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'배치 실행 구분'"
								:dataKey="'searchBatchExecTp'"
								:sendParam="{ commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' }" :addAll="true"
								:customClass="'select-large'" />
						</v-col>
						<v-col :cols="2.5" class="pr-4">
							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'"
								:dataKey="'searchUseFg'" :sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
								:customClass="'select-large'" />
						</v-col>
						<BtnSearch size="large" class="mr-2" />

					</v-row>
				</v-card>
			</v-col>
		</v-row>

		<v-row ref="contents" class="mt-4 h100">
			<!-- 배치 리스트 -->
			<v-col :cols="6" class="pr-2">
				<v-card class="pb-5">
					<div class="d-flex align-center justify-space-between pa-4">
						<!-- <v-card-title>
					     	<span class="tit ft-size_20 ft-weight_600">배치 리스트</span>
					    </v-card-title> -->
						<v-card-title class="pa-0"> 배치 리스트 </v-card-title>
						<!-- <v-card-actions> -->
						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :detailList="detailList"
							:btnActionsFnc="btnActions" />
					</div>
					<div class="px-4">
						<div ref="gridParent" class="h100 w100" style="height:calc(100% - 70px)">
							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :parentPrgmId="myPrgmId"
								:gridName="gridName" @getRowsData="getRowData" />
						</div>
						<!-- </v-card-actions> -->
					</div>
				</v-card>
			</v-col>
			<!-- 배치 상세 -->
			<v-col :cols="6" class="pl-3">
				<v-card class="pd-y-20 h100">
					<v-card-title class="d-flex justify-space-between align-end pa-4">
						<span class="tit ft-size_20 ft-weight_600">배치 상세</span>
					</v-card-title>
					<v-card-actions>
						<div ref="gridParent" class="w100 pa-2 pb-6">
							<component :is="'Form'" :parentPrgmId="myPrgmId" :detailList="detailList"
								@gridEditingFinish="gridEditingFinish" @inputClick="inputClick" />
						</div>
					</v-card-actions>
				</v-card>
			</v-col>
			<v-dialog ref="popModal" v-model="dialog" width="800" overlay-color="#000" overlay-opacity="0.8" scrollable>
				<v-card style="height: 100%">
					<v-card-title class="v-card__title d-flex align-center justify-space-between">
						<span class="custom-title-4">DB 프로시져 파라메터 설정</span>
						<a-button icon="close" type="text" @click="dialog = false"></a-button>

					</v-card-title>
					<div class="pa-5">
						<v-row align="end" no-gutters>
							<v-col cols="12" class="d-flex justify-end">

								<Buttons :parentPrgmId="myPrgmId" :bindingData="gridNameParam"
									:btnActionsFnc="btnActionsParam" />

							</v-col>
						</v-row>
					</div>
					<v-card-text style="height: 300px;">
						<div id="gridParent" class="mt-6" style="height:calc(100% - 36px);">
							<div style="height:calc(100% - 36px);">
								<Grid :ref="gridNameParam" :is="paramLoadGrid && dialog ? 'Grid' : null"
									:gridName="gridNameParam" :parentPrgmId="myPrgmId" :editorGrid="true"
									@getRowsData="getGridNameParamRowData" />
							</div>
						</div>
					</v-card-text>
					<v-card-actions class="px-6 py-4 d-flex align-center justify-end">
						<a-button :ripple="false" @click="dialog = false" class="mr-2">닫기</a-button>
						<a-button :ripple="false" type="primary" @click="setParamChangeData()">확인</a-button>
					</v-card-actions>
				</v-card>
			</v-dialog>
		</v-row>
	</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
// import { mapState, mapMutations, mapActions } from "vuex";
import selectCodeList from '@/components/common/select/selectCodeList';
import InputText from '@/components/common/input/InputText';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import Grid from '~/components/common/Grid';
import Form from '~/components/common/form/Form';
import Utility from '~/plugins/utility';
import { mapActions } from 'vuex';

let myTitle;
//const myPrgmId = 'PRG0019';
let myPrgmId;
export default {
	mixins: [mixinGlobal, resize],
	asyncData(context) {
		const myState = context.store.state;
		myPrgmId = context.route.query.prgmId;
		context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle = myState.activeMenuInfo.menuNm;
		// console.log(myPrgmId, "asyncData = ", myState);
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		selectCodeList,
		InputText,
		Form,
		Grid,
		BtnSearch,
		Buttons,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			loadGrid: false,
			gridName: 'rowGrid',

			// rowGridOrigin: [],
			detailList: myDetail,

			// 파라메터 셋팅용 변수
			dialog: false,
			gridNameParam: 'paramGrid',
			paramLoadGrid: false,
			selectedGridNameParamRow: null,
		};
	},
	computed: {
		// ...mapState({
		//   pageData: state => state.pageData[myPrgmId]
		// }),
		chkIsFind() {
			// 조회 플래그
			// console.log("조회 플래그 ", this.pageData.isFind);
			return this.pageData.isFind;
		},
		chkUseFg() {
			// 사용여부 선택 감지
			return this.pageData.searchUseFg;
		},
		chkBatchExecTp() {
			// 배치 실행 구분 선택 감지
			return this.pageData.searchBatchExecTp;
		},
		chkRowGridSelectKey() {
			return this.pageData.rowGridSelectKey;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkUseFg() {
			this.setPageData({ isFind: true });
		},
		chkBatchExecTp() {
			this.setPageData({ isFind: true });
		},
	},
	async beforeCreate() {
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
		// console.log("3.vue::beforeCreate");
	},
	created() {
		this.getCodeList({
			dataKey: 'batchExecTp',
			params: { commGrpCd: 'CO_BATCH_EXEC_TP', useFg: '1' },
			addAll: false,
		}),
			this.getCodeList({
				dataKey: 'batchDupExecFg',
				params: { commGrpCd: 'CO_BATCH_DUP_EXEC_FG', useFg: '1' },
				addAll: false,
			});
	},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
		}),
		init() {
			// this.layoutInit();
			this.gridInit();
			this.gridParamInit();
		},
		// layoutInit() {
		//   console.log(">>>> 레이아웃 그리기");
		//   const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
		//   this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px)`;
		//   console.log(">>>> 레이아웃 그리기 끝");
		// },
		gridInit() {
			this.loadGrid = false;
			const gridHeight = this.$refs.gridParent.offsetHeight - 30;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				header: {
					height: 37,
				},
				rowHeight: 37,
			};
			this.setGridOption({
				gridKey: this.gridName,
				// value: myOptions
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});

			const _this = this;
			const myColumns = [
				{ header: '배치ID', name: 'batchId', align: 'right', width: 100 },
				{ header: '배치명', name: 'batchNm', minWidth: 200 },
				{
					header: '배치 실행 구분',
					name: 'batchExecTp',
					align: 'left',
					minWidth: 190,
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.batchExecTpList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{ header: '배치 중복 여부', name: 'batchDupExecFg', hidden: true },
				{
					header: '사용여부',
					name: 'useFg',
					width: 145,
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.searchUseFgList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{ header: '초', name: 'execCyclSecVal', hidden: true },
				{ header: '분', name: 'execCyclMinVal', hidden: true },
				{ header: '시', name: 'execCyclHhVal', hidden: true },
				{ header: '일', name: 'execCyclDdVal', hidden: true },
				{ header: '월', name: 'execCyclMmVal', hidden: true },
				{ header: '요일', name: 'execCyclWdayVal', hidden: true },
				{ header: '년', name: 'execCyclYyyyVal', hidden: true },
				{ header: '실행명령', name: 'execCmnd', hidden: true },
				{ header: '실행 명령 경로', name: 'execCmndPath', hidden: true },
				{ header: '후속배치', name: 'fllwBatchId', hidden: true },
				{ header: '참조값1', name: 'refVal1', hidden: true },
				{ header: '참조값2', name: 'refVal2', hidden: true },
				{ header: '참조값3', name: 'refVal3', hidden: true },
				{ header: '등록자NO', name: 'regUserNo', hidden: true },
				{ header: '등록일시', name: 'regDttm', hidden: true },
				{ header: '수정자NO', name: 'procUserNo', hidden: true },
				{ header: '수정일시', name: 'procDttm', hidden: true },
				{ header: 'rowStat', name: 'rowStat', hidden: true },
			];

			this.setGridColumn({
				gridKey: this.gridName,
				value: myColumns,
			});

			// this.getRowGridData();

			this.loadGrid = true;
		},
		async search() {
			// console.log("search");
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		async getRowGridData() {
			const res = await this.postApiReturn({
				apiKey: 'selectBatchMng',
				resKey: 'batchMngData',
				sendParam: {
					useFg: this.pageData.searchUseFg,
					batchId: this.pageData.batchId, // 검색키워드: 배치ID
					batchNm: this.pageData.batchNm, // 검색키워드: 배치명
					batchExecTp: this.pageData.searchBatchExecTp, //배치 실행 구분
				},
			});
			const newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
					fllwBatchId:
						item.fllwBatchId == undefined ? '없음' : item.fllwBatchId,
					useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
				};
				return newObj;
			});

			// 엑셀 다운로드용 데이터 재정렬
			this.xlsDataBind(res);
			// this.rowGridOrigin = Utility.copyObj(newRes);
			// console.log("this.rowGridOrigin = ", this.rowGridOrigin);
			this.setGridData({
				gridKey: this.gridName,
				value: newRes,
			});

			this.$nextTick(() => {
				if (newRes.length > 0) {
					this.$refs[this.gridName].focus({
						//rowKey: 0,
						//rowKey: this.chkRowGridSelectKey || 0,
						rowKey:
							this.pageData.rowGridSelectKey == '' ||
								this.pageData.rowGridSelectKey == null
								? 0
								: this.pageData.rowGridSelectKey ==
									this.$refs[this.gridName].getData().length - 1
									? this.pageData.rowGridSelectKey
									: 0,
						setScroll: true,
					});
				}
			});
		},
		async getRowData(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			this.getFllwBatchList(data);
		},
		getGridNameParamRowData(data) {
			this.selectedGridNameParamRow = data.rowKey;
		},
		async getFllwBatchList(data) {
			this.pageData.fllwBatchIdList = await this.postApiReturn({
				apiKey: 'selectFllwBatchList',
				resKey: 'fllwBatchListData',
				sendParam: {
					//useFg: this.pageData.searchUseFg,
					batchId: data['batchId'], // 선택된 row의 batchId
				},
			});
		},
		compareData(type, newDt) {
			if (this.selectedCommCdData[type] == newDt) {
				return true;
			} else {
				return false;
			}
		},
		gridEditingFinish(data) {
			this.$refs[this.gridName].editingFinish(data);
		},
		async btnActions(action) {
			switch (action) {
				case 'add':
					let defaultRow = {
						batchId: null,
						batchNm: null,
						batchExecTp: 'BM',
						batchDupExecFg: 'Y',
						execCyclSecVal: null,
						execCyclMinVal: null,
						execCyclHhVal: null,
						execCyclDdVal: null,
						execCyclMmVal: null,
						execCyclWdayVal: null,
						execCyclYyyyVal: null,
						execCmnd: null,
						execCmndPath: null,
						fllwBatchId: '',
						refVal1: null,
						refVal2: null,
						refVal3: null,
						useFg: true,
						regUserNo: null,
						regDttm: null,
						procUserNo: null,
						procDttm: null,
						rowStat: null,
					};
					this.$refs[this.gridName].addRow(defaultRow);
					break;

				case 'remove':
					this.$refs[this.gridName].removeRow();
					break;

				case 'save':
					var dataArr = this.$refs[this.gridName].save();
					var validCheck = true;
					if (dataArr.length > 0) {
						dataArr.filter(item => {
							if (item.rowStat === 'I') {
								if (
									item.batchNm == null ||
									item.execCyclSecVal == null ||
									item.execCyclMinVal == null ||
									item.execCyclHhVal == null ||
									item.execCyclDdVal == null ||
									item.execCyclMmVal == null ||
									item.execCyclWdayVal == null ||
									item.execCyclYyyyVal == null ||
									item.execCmnd == null ||
									item.execCmndPath == null ||
									item.refVal1 == null ||
									item.fllwBatchId == null ||
									item.fllwBatchId == ''
								) {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
							} else if (item.rowStat === 'U') {
								if (
									item.batchNm == '' ||
									item.execCyclSecVal == '' ||
									item.execCyclMinVal == '' ||
									item.execCyclHhVal == '' ||
									item.execCyclDdVal == '' ||
									item.execCyclMmVal == '' ||
									item.execCyclWdayVal == '' ||
									item.execCyclYyyyVal == '' ||
									item.execCmnd == '' ||
									item.execCmndPath == '' ||
									item.refVal1 == '' ||
									item.fllwBatchId == ''
								) {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
							}
							if (item.fllwBatchId == '없음') {
								item.fllwBatchId = null;
							}
						});
						// console.log(dataArr);
						if (validCheck) {
							const sendParam = {
								datas: {
									dsBatchMng: dataArr.map(item => ({
										...item,
										useFg: item.useFg ? '1' : '0',
									})),
								},
								params: {},
							};
							await this.postUpdateApi({
								apiKey: 'saveBatchMng',
								sendParam: sendParam,
							});
							this.setPageData({ isFind: true });
						}
					} else {
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},
		async btnActionsParam(action) {
			let dataArr = [];
			switch (action) {
				case 'add':
					let defaultRow = {
						id: '',
						mode: 'in',
						type: 'str',
						val: '',
						rowStat: 'I',
					};
					this.$refs[this.gridNameParam].addRow(defaultRow);
					break;

				case 'remove':
					this.$refs[this.gridNameParam].removeRow(
						'immediately',
						this.selectedGridNameParamRow,
					);
					let gridData = this.$refs[this.gridNameParam].getData();
					if (gridData.length > 0) {
						try {
							this.$refs[this.gridNameParam].focus({
								rowKey: gridData[0].rowKey,
								setScroll: true,
							});
						} catch (error) {
							console.log('error[nextTick grid] : ', error);
						}
					}
					break;

				default:
					break;
			}
		},
		gridParamInit() {

			const gridHeight = this.$refs.gridParent.offsetHeight - 36;
			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				bodyHeight: gridHeight,
				minBodyHeight: gridHeight,
				selectionUnit: 'row',
				editingEvent: 'click',
				scrollX: false,
				header: {
					height: 37,
				},
				rowHeight: 37,
			};
			this.setGridOption({
				gridKey: this.gridNameParam,
				value: myOptions,
			});
			setTimeout(() => { });

			let modeList = [];
			const modeIn = { text: 'IN', value: 'IN' };
			const modeOut = { text: 'OUT', value: 'OUT' };
			modeList.push(modeIn);
			modeList.push(modeOut);
			let typeList = [];
			const typeInt = { text: 'INT', value: 'int' };
			const typeStr = { text: 'STRING', value: 'str' };
			const typeFunc = { text: 'FUNCTION', value: 'function' };
			typeList.push(typeInt);
			typeList.push(typeStr);
			typeList.push(typeFunc);

			const myColumns = [
				{ header: 'ID', name: 'id', editor: 'text' },
				{
					header: 'MODE',
					name: 'mode',
					formatter({ value }) {
						return value == ('OUT' || 'out') ? 'OUT' : 'IN';
					},
					editor: {
						type: 'select',
						options: {
							listItems: modeList,
						},
					},
				},
				{
					header: 'Type',
					name: 'type',
					align: 'center',
					formatter({ value }) {
						let retVal = '';
						switch (value) {
							case 'int':
								retVal = 'INT';
								break;
							case 'str':
								retVal = 'STRING';
								break;
							case 'function':
								retVal = 'FUNCTION';
								break;
						}
						return retVal;
					},
					editor: {
						type: 'select',
						options: {
							listItems: typeList,
						},
					},
				},
				{ header: '값', name: 'val', editor: 'text' },
				{ header: 'rowStat', name: 'rowStat', hidden: true },
			];

			this.setGridColumn({
				gridKey: this.gridNameParam,
				value: myColumns,
			});
			this.paramLoadGrid = true;
			// this.getRowParamData();
		},
		getRowParamData() {
			this.paramLoadGrid = false;
			let res = [];

			// /* this.pageData.paramStrData 처리 */
			// // console.log("this.pageData.paramStrData : ", JSON.parse(this.pageData.paramStrData));
			let rowData = {};
			if (
				this.pageData.paramStrData.startsWith('{') &&
				this.pageData.paramStrData.endsWith('}')
			) {
				rowData = JSON.parse(this.pageData.paramStrData);
			}
			var keys = Object.keys(rowData); //키를 가져옵니다. 이때, keys 는 반복가능한 객체가 됩니다.
			for (var i = 0; i < keys.length; i++) {
				var key = keys[i];
				res.push(rowData[key]);
			}

			const newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
					id: item.id || '',
					mode: item.mode || 'in',
					type: item.type || 'str',
					val: item.val || '',
				};
				return newObj;
			});


			this.setGridData({
				gridKey: this.gridNameParam,
				value: newRes,
			});
			this.$nextTick(() => {
				if (newRes.length > 0) {
					try {
						this.$refs[this.gridNameParam].focus({
							//rowKey: 0,
							rowKey: 0,
							setScroll: true,
						});
					} catch (error) {
						console.log('error[nextTick grid] : ', error);
					}
				}
			});
			this.paramLoadGrid = true;
		},
		xlsDataBind(res) {
			const xlsRowData = res.map(item => {
				var retVal;
				const newValue = this.pageData.batchExecTpList.filter(
					batchItem => batchItem.commCd == item.batchExecTp,
				);
				if (newValue.length > 0) {
					retVal = newValue[0].commCdNm;
				}
				const obj = {
					...item,
					useFg: item.useFg == '1' ? '사용' : '사용안함',
					batchExecTp: retVal,
				};
				return obj;
			});
			this.setPageData({
				xlsFileInfo: {
					[this.gridName]: {
						rowData: xlsRowData,
					},
				},
			});
		},
		inputClick(event, item, valueNm) {
			if (valueNm == 'refVal1') {
				const rowIdxKey = this.$refs[this.gridName].gridInstance.invoke(
					'getFocusedCell',
				).rowKey;
				const selectRowData = this.$refs[this.gridName].gridInstance.invoke(
					'getRow',
					rowIdxKey,
				);

				if (selectRowData.batchExecTp == 'DP') {
					// 여기에 팝업 레이어 띠우기 기능 추가
					this.pageData.paramStrData = event.target.value;
					this.pageData.paramChangeDataTarget = event.target;
					this.getRowParamData();
					this.dialog = true;
				}
			}
		},
		setParamChangeData() {
			let dataArr = [];
			let retVal = {};
			// editing 중 확인 버튼 클릭 시 editingFinish 주기
			if (this.selectedGridNameParamRow != null) {
				this.$refs[this.gridNameParam].editingFinish({
					rowKey: this.selectedGridNameParamRow,
				});
			}

			dataArr = this.$refs[this.gridNameParam].getData();
			for (var i = 1; i <= dataArr.length; i++) {
				const tmpRow = dataArr[i - 1];
				let retRow = {};
				retRow['id'] = tmpRow['id'];
				retRow['mode'] = tmpRow['mode'];
				retRow['type'] = tmpRow['type'];
				retRow['val'] = tmpRow['val'];

				retVal[i] = retRow;
			}

			// console.log("setParamChangeData retVal : ", retVal);
			// console.log("setParamChangeData retVal str : ", JSON.stringify(retVal));
			// this.pageData.paramChangeDataTarget.value = JSON.stringify(retVal);
			this.dialog = false;
			// console.log(this.pageData.rowGrid.data[this.pageData.rowGridSelectKey]);
			// this.pageData.rowGrid.data[this.pageData.rowGridSelectKey]["refVal1"] = JSON.stringify(retVal);
			// console.log('this.pageData.paramStrDat', this.pageData.paramStrDat);
			// console.log('JSON.stringify(retVal)',JSON.stringify(retVal));
			if (this.pageData.paramStrData != JSON.stringify(retVal)) {
				// 변경 내용이 있을경우만 수정 처리
				const dt1 = {
					columnName: 'refVal1',
					value: JSON.stringify(retVal),
					// rowKey: this.pageData.rowGrid.data[this.pageData.rowGridSelectKey].rowKey,
					rowKey: this.pageData.rowGridSelectKey,
				};
				this.gridParamEditingFinish(dt1);
				this.$refs[this.gridName].focusChangeEvt(dt1);
			}
		},
		gridParamEditingFinish(data) {
			this.$refs[this.gridName].editingFinish(data);
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	searchUseFg: '1',
	searchBatchExecTp: false,
	searchUseFgList: [],
	searchBatchExecTpList: [],
	batchId: '',
	batchNm: '',

	batchExecTpList: [],
	batchDupExecFgList: [],
	fllwBatchIdList: [],
	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정

	/* 파라메터 설정요 변수 */
	/* { "1": {"id": "comId", "type": "str", "val": "COM01"},  
	   "2": {"id": "toStrDt", "type": "function", "val": "DATE_FORMAT(NOW(), '%Y%h%d')"},  
	   "3": {"id": "userId", "type": "str", "val": "3"},  
	   "4": {"id": "retCd", "mode":"OUT","type": "int", "val": "-1"},  
	   "5": {"id": "retMsg", "mode":"OUT","type": "str", "val": "전달"}} */
	paramStrData: '',
	paramChangeDataStr: '',
	paramChangeDataTarget: null,
	paramGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			id: '',
			mode: 'in',
			type: 'str',
			val: '',
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: false,
			excel: false,
		},
	},

	/* data 세팅 */
	rowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			batchId: null,
			batchNm: null,
			batchExecTp: 'BM',
			batchDupExecFg: 'Y',
			execCyclSecVal: null,
			execCyclMinVal: null,
			execCyclHhVal: null,
			execCyclDdVal: null,
			execCyclMmVal: null,
			execCyclWdayVal: null,
			execCyclYyyyVal: null,
			execCmnd: null,
			execCmndPath: null,
			fllwBatchId: '',
			refVal1: null,
			refVal2: null,
			refVal3: null,
			useFg: true,
			regUserNo: null,
			regDttm: null,
			procUserNo: null,
			procDttm: null,
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: true,
		},
	},
	rowGridSelectKey: 0,
	rowGridSelectData: null,
	rowGridModify: false,

	xlsFileInfo: {
		// 출력하려는 grid 와 같은 이름으로 세팅
		rowGrid: {
			rowData: [],
			// 엑셀변환시 데이타 가공이 추가로 필요하게 된다면 여기에 가공된 rowData 를 넣어야 할듯
			fileName: null, // 갑이 없으면 해당 페이지 메뉴명
			sheetName: null, //  갑이 없으면 'Sheet1'
		},
	},
};

const myDetail = [
	{
		type: 'InputText',
		label: '배치ID',
		valueNm: 'batchId',
		readonly: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: false,
		placeholder: '시스템 자동입력',
	},
	{
		type: 'InputText',
		label: '배치명',
		valueNm: 'batchNm',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'SelectBox',
		label: '배치 실행 구분',
		valueNm: 'batchExecTp',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		list: 'batchExecTpList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		required: true,
	},
	{
		type: 'SelectBox',
		label: '배치 중복 여부',
		valueNm: 'batchDupExecFg',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		list: 'batchDupExecFgList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(초)',
		valueNm: 'execCyclSecVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(분)',
		valueNm: 'execCyclMinVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(시)',
		valueNm: 'execCyclHhVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(일)',
		valueNm: 'execCyclDdVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(월)',
		valueNm: 'execCyclMmVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(요일)',
		valueNm: 'execCyclWdayVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행주기(년)',
		valueNm: 'execCyclYyyyVal',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'SelectBox',
		label: '후속배치',
		valueNm: 'fllwBatchId',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		list: 'fllwBatchIdList',
		itemText: 'batchIdNm',
		itemValue: 'batchId',
		required: true,
	},
	{
		type: 'InputText',
		label: '실행명령',
		valueNm: 'execCmnd',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '실행 명령 경로',
		valueNm: 'execCmndPath',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '참조값1',
		valueNm: 'refVal1',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		required: true,
	},
	{
		type: 'InputText',
		label: '참조값2',
		valueNm: 'refVal2',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
	},
	{
		type: 'InputText',
		label: '참조값3',
		valueNm: 'refVal3',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
	},
	{
		type: 'CheckBox',
		label: '사용여부',
		valueNm: 'useFg',
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		value: { '1': true, '0': false },
		required: true,
	},
	{
		type: 'InputText',
		label: '등록자NO',
		valueNm: 'regUserNo',
		disabled: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		placeholder: '시스템 자동입력',
	},
	{
		type: 'InputText',
		label: '등록일시',
		valueNm: 'regDttm',
		disabled: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		placeholder: '시스템 자동입력',
	},
	{
		type: 'InputText',
		label: '수정자NO',
		valueNm: 'procUserNo',
		disabled: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		iconShow: true,
		placeholder: '시스템 자동입력',
	},
	{
		type: 'InputText',
		label: '수정일시',
		valueNm: 'procDttm',
		disabled: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		iconShow: true,
		placeholder: '시스템 자동입력',
	},
];
</script>
