<template>
	<div class="l-layout">
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="end" no-gutters>
						<v-col :cols="2.5">
							<component
								:is="'selectCodeList'"
								:parentPrgmId="myPrgmId"
								:label="'위치 종류'"
								dataKey="searchLocKind"
								:sendParam="{ commGrpCd: 'EM_LOC_KIND', useFg: '1' }"
								:addAll="true"
								:iconShow="true"
								customClass="select-large"
							/>
						</v-col>
						<v-col :cols="2.5">
							<component
								:is="'selectCodeList'"
								:parentPrgmId="myPrgmId"
								:label="'공정 종류'"
								dataKey="searchEccKind"
								:sendParam="{ commGrpCd: 'EM_ECC_KIND', useFg: '1' }"
								:addAll="true"
								:iconShow="true"
								customClass="select-large"
							/>
						</v-col>
						<!-- <v-col :cols="3">
							사업장
							<div style="visibility:hidden">
								<component
									:is="'SelectBlocMstr'"
									ref="SelectBlocMstr"
									:parentPrgmId="myPrgmId"
								/>
							</div>
						</v-col> -->
						<v-col :cols="2.5">
							<component
								:is="'selectCodeList'"
								:parentPrgmId="myPrgmId"
								:label="'사용여부'"
								dataKey="useFg"
								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
								:addAll="true"
								:iconShow="true"
								customClass="select-large"
							/>
						</v-col>
						<v-col :cols="2.5">
							<InputText
								:parentPrgmId="myPrgmId"
								label="공정명"
								valueNm="eccNm"
								:labelCols="12"
								:textCols="12"
								:searchOption="true"
								:iconShow="true"
								customClass="input-large"
							/>
						</v-col>
						<BtnSearch @click="search" size="large" />
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents">
			<v-col :cols="5" class="h100">
				<v-card class="pb-5">
					<div class="d-flex align-center justify-space-between pa-5">
						<v-card-title class="pa-0 custom-title-4">공정 정보</v-card-title>
						<Buttons
							:parentPrgmId="myPrgmId"
							:bindingData="gridName"
							:detailList="detailList"
							:btnActionsFnc="btnActions"
						/>
					</div>
					<div class="px-5" style="min-height:calc(100% - 76px)">
						<div ref="gridParent" class="w100 h100 pb-2">
							<component
								:ref="gridName"
								:is="loadGrid ? 'Grid' : null" 
								:gridName="gridName"
								:parentPrgmId="myPrgmId"
								@getRowsData="getRowData"
								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
								:selectedRowDataWatchFlag="true"
								:dataPath="dataPathMock"
							/>
						</div>
					</div>
				</v-card>
			</v-col>
			<v-col :cols="7" class="h100">
				<v-card class="pb-5">
					<v-card-title class="custom-title-4" style="min-height:76px;"
						>공정 상세
					</v-card-title>
					<div class="px-5" style="height:calc(100% - 76px)">
						<v-tabs v-model="tab">
							<v-tab
								v-for="item in items"
								:key="item.id"
								:disabled="item.disabledFlag"
							>
								{{ item.name }}
							</v-tab>
						</v-tabs>
						<v-tabs-items
							v-model="tab"
							style="height: calc(100% - 65px);"
							class="py-6"
						>
							<v-tab-item v-for="(item, idx) in items" :key="item.id">
								<component
									v-if="item.id == 'eccBaseInfoTab'"
									:is="'Form'"
									:parentPrgmId="myPrgmId"
									:detailList="detailList"
									@gridEditingFinish="gridEditingFinish"
								/>
								<EccAddInfoTab
									v-if="item.id == 'eccAddInfoTab'"
									:parentPrgmId="myPrgmId"
									:innerTabGridInfo="{ tab, idx }"
								/>
								<EccIaoTab
									v-if="item.id == 'eccIaoTab'"
									:parentPrgmId="myPrgmId"
									:innerTabGridInfo="{ tab, idx }"
								/>
							</v-tab-item>
						</v-tabs-items>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
import selectCodeList from '@/components/common/select/selectCodeList';
import SelectReadObj from '@/components/common/select/SelectReadObj';
import InputText from '@/components/common/input/InputText';
import Form from '~/components/common/form/Form';
import EccAddInfoTab from '@/components/pages/ems/EccInfo/EccAddInfoTab';
import EccIaoTab from '@/components/pages/ems/EccInfo/EccIaoTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';

let myTitle;
// const myPrgmId = "PRG0012";
let myPrgmId;
const globalComId = '';
export default {
	mixins: [mixinGlobal, resize],
	async asyncData(context) {
		const myState = context.store.state;
		// context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
		// myTitle = myState.activeMenuInfo.menuNm;
		myPrgmId = context.route.query.prgmId;
		await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle = await myState.activeMenuInfo.menuNm;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		BtnSearch,
		Buttons,
		SelectBlocMstr,
		selectCodeList,
		SelectReadObj,
		InputText,
		Form,
		EccAddInfoTab,
		EccIaoTab,
		Grid,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridName: 'rowGrid',
			loadGrid: false,
			tab: null,
			selectedRowKey: null,
			// rowSelectionStatus: {},
			dataPathMock : { },
			items: [
				{ name: '공정 정보', id: 'eccBaseInfoTab', disabledFlag: false },
				{ name: '공정 추가 정보', id: 'eccAddInfoTab', disabledFlag: false },
				{ name: '공정 연결 정보', id: 'eccIaoTab', disabledFlag: false },
			],
			detailList: myDetail,
		};
	},
	computed: {
		// ...mapState({
		//   pageData: state => state.pageData[myPrgmId]
		// }),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkBlocId() {
			return this.pageData.blocId;
		},
		chkLocKind() {
			// 시스템구분 선택 감지
			return this.pageData.searchLocKind;
		},
		chkEccKind() {
			// 시스템구분 선택 감지
			return this.pageData.searchEccKind;
		},
		chkUseFg() {
			// 사용여부 선택 감지
			return this.pageData.useFg;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkBlocId() {
			this.setPageData({ isFind: true });
		},
		chkLocKind() {
			this.setPageData({ isFind: true });
		},
		chkEccKind() {
			this.setPageData({ isFind: true });
		},
		chkUseFg() {
			this.setPageData({ isFind: true });
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	async created() {
		//
		this.getBlocMstrList({
			dataKey: 'blocId',
			params: { useFg: '1' },
			addAll: false,
		});

		// 공정 위치 유형 목록 조회
		this.getCodeList({
			dataKey: 'locKind',
			params: { commGrpCd: 'EM_LOC_KIND', useFg: '1' },
			addAll: false,
		});
		// 공정 유형 목록 조회
		this.getCodeList({
			dataKey: 'eccKind',
			params: { commGrpCd: 'EM_ECC_KIND', useFg: '1' },
			addAll: false,
		});

		/////////// 추가 정보 Tab 에서 사용
		// 데이터 유형 목록 조회
		this.getCodeList({
			dataKey: 'addInfoDataKind',
			params: { commGrpCd: 'CO_DATA_TYPE', useFg: '1' },
			addAll: false,
		});

		// 추가 정보 목록 조회
		this.getAddInfoList({
			dataKey: 'addInfo',
			params: { addGrpId: 'ECC_INFO', useFg: '1' },
			addAll: false,
		});

		this.getCodeList({
			dataKey: 'emMapDiv',
			params: { commGrpCd: 'EM_MAP_DIV', useFg: 1 },
			addAll: false,
		});

		this.getCodeList({
			dataKey: 'cmInout',
			params: { commGrpCd: 'CM_INOUT', useFg: 1 },
			addAll: false,
		});

		let ercList = [];
		const res = await this.postApiReturn({
			apiKey: 'selectErcInfo',
			resKey: 'ercInfoData',
			sendParam: {
				blocId: this.userInfo.blocId,
			},
		});
		res.forEach(item => {
			const it = { text: item.ercNm, value: item.ercId };
			ercList.push(it);
		});
		this.setPageData({ ercNmList: ercList });
	},
	mounted() {
		this.init();
		this.$nextTick(() => {
		// const checkbox = document.getElementById('headerCheckbox');
		// if (checkbox) {
		// 	checkbox.addEventListener('change', this.handleHeaderCheckboxChange);
		// }
		});
	},
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		handleHeaderCheckboxChange(event) {
			const checked = event.target.checked;
			this.dataPathMock.rowGrid.data.forEach(row => {
			row.selected = checked;
		});},

		...mapMutations({
			setPageData: 'setPageData',
		}),
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
			getBlocMstrList: 'modules/search/getBlocMstrList',
			getAddInfoList: 'modules/search/getAddInfoList',
		}),
		init() {
			this.gridInit();
			this.setPageData({
				blocId: this.userInfo.blocId,
			});
		},
		gridInitTest() {
			const rowGrid = {
				column: [
					{
						header: '',
						name: '',
						align: 'center',
						width: 50,
						formatter: (props) => {
							return `<label class="custom-radio">
										<span class="radio-mark"></span>
									</label>`;
						}
					},
					{ header: '공정 정보', name: 'eccNm', align: 'left' },
					{ header: '현재 상태', name: 'status', align: 'center' },
					{ header: '공정 유형', name: 'eccKind', align: 'left' },
					{ header: '사용 여부', name: 'useFg', align: 'center' },
				],
				data: dataMockExample,
				defaultRow: dataMockExample,
				option: {
					...gridOptions,
				},
			}
			this.dataPathMock = {rowGrid};
			this.$nextTick(() => {
				this.loadGrid = true;
			});
		},
		gridInit() {
			//  Test
			this.gridInitTest(); return;
			// End test

			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
			const gridWidth = this.$refs.gridParent.offsetWidth;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				treeColumnOptions: {
					name: 'eccNm',
				},
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});

			const _this = this;
			const myColumns = [
				{ header: '회사 ID', name: 'comId', hidden: true },
				{
					header: '공정 명',
					name: 'eccNm',
					width: gridWidth * 0.44,
					align: 'left',
				},
				{
					header: '공정 ID',
					name: 'eccId',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '상위 공정 ID',
					name: 'upEccId',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '상위 공정 명',
					name: 'upEccNm',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '위치 유형',
					name: 'locKind',
					width: gridWidth * 0.18,
					align: 'left',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.locKindList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{
					header: '공정 유형',
					name: 'eccKind',
					width: gridWidth * 0.18,
					align: 'left',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.eccKindList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{
					header: '사업장',
					name: 'blocId',
					width: 100,
					align: 'center',
					hidden: true,
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.blocIdList.filter(
							item => item.blocCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].blocNm;
						}
						return retVal;
					},
				},
				{
					header: '정렬 순서',
					name: 'sortSeq',
					width: 80,
					align: 'center',
					hidden: true,
				},
				{
					header: '공정 여부',
					name: 'eccFg',
					width: 80,
					align: 'center',
					hidden: true,
					formatter({ value }) {
						value = value === true ? '1' : '0';
						const newValue = _this.pageData.useFgList.filter(
							item => item.commCd == value,
						);
						return newValue[0].commCdNm;
					},
				},
				{
					header: '사용 여부',
					name: 'useFg',
					width: gridWidth * 0.18,
					align: 'center',
					formatter({ value }) {
						value = value === true ? '1' : '0';
						const newValue = _this.pageData.useFgList.filter(
							item => item.commCd == value,
						);
						return newValue[0].commCdNm;
					},
				},
			];

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

			this.loadGrid = true;

			this.getRowGridData();
		},
		async search() {
			this.loadGrid = false;
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		async getRowGridData() {
			let res = [];

			if (this.pageData.blocMstrList.length > 0) {
				res = await this.postApiReturn({
					apiKey: 'selectEccBaseInfo',
					resKey: 'eccBaseInfoData',
					sendParam: {
						comId: globalComId,
						blocId: this.pageData.blocId,
						locKind: this.pageData.searchLocKind,
						eccKind: this.pageData.searchEccKind,
						useFg: this.pageData.useFg,
						eccNmLike: this.pageData.eccNm,
					},
				});
			} else {
				this.setPageData({ isFind: false });
			}
			const newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
					eccIdNm: item.eccId,
					upEccId:
						item.upEccId == null || item.upEccId == '' ? 'ROOT' : item.upEccId,
					blocId: item.blocId,
					eccFg: item.eccFg === '1' ? true : false,
					useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
				};
				return newObj;
			});

			const setTreeData = await this.setTree({
				treeKey: 'ECC_ID',
				value: newRes,
			});
			this.loadGrid = true;
			this.setGridData({
				gridKey: this.gridName,
				value: setTreeData.ROOT || [],
				// value: newRes
			});

			this.$nextTick(() => {
				if (res.length > 0) {
					this.$refs[this.gridName].focus({
						// rowKey: 0,
						rowKey:
							this.pageData.rowGridSelectKey == '' ||
							this.pageData.rowGridSelectKey == null
								? 0
								: this.pageData.rowGridSelectKey ==
								  this.$refs[this.gridName].getData().length - 1
								? this.pageData.rowGridSelectKey
								: 0,
						columnName: 'eccNm',
						setScroll: true,
					});
				} else {
					this.detailDataInit();
				}
			});
		},
		async getRowData(data) {
			
			//Progess and fake radio 
			// const rowKey = data.rowKey;
			// this.selectedRowKey = rowKey;
			// Object.keys(this.rowSelectionStatus).forEach(key => {
			// this.$set(this.rowSelectionStatus, key, false);
			// });
			// this.$set(this.rowSelectionStatus, rowKey, true);


			this.setEccAddInfo(data);
			this.setEccIao(data);
			this.setGridSelectData({
				gridKey: 'rowEccIaoGrid',
				gridSelect: true,
				rowGridSelectKey: '',
				rowGridSelectData: Object.assign({}, {}),
			});

			this.setGridSelectData({
				gridKey: this.gridName,
				gridSelect: true,
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: Object.assign({}, data),
			});
			//fake radio need recheck  
			// this.$refs[this.gridName]?.repaint?.();

		},
		async setEccAddInfo(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			// 검침개소 추가 정보 처리
			const res = await this.postApiReturn({
				apiKey: 'selectEccAddInfoList',
				resKey: 'eccAddInfoData',
				sendParam: {
					comId: data.comId,
					blocId: data.blocId,
					eccId: data.eccId,
				},
			});

			const newRes = res.map(item => {
				const newObj = {
					...item,
					comId: item.comId || '',
					eccId: item.eccId || '',
					addInfoId: item.addInfoId || '',
					addInfoDataKind: item.addInfoDataKind || '',
					addInfoNumVal: item.addInfoNumVal || '',
					addInfoTxtVal: item.addInfoTxtVal || '',
					addInfoVal: item.addInfoVal || '',
					useFg: item.useFg || '1',
					rowStat: null,
				};
				return newObj;
			});

			this.setGridData({
				gridKey: 'rowDetailGrid',
				value: newRes,
			});
		},
		async setEccIao(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			// 검침개소 추가 정보 처리
			const res = await this.postApiReturn({
				apiKey: 'selectEccIao',
				resKey: 'eccIaoData',
				sendParam: {
					comId: data.comId,
					eccId: data.eccId,
				},
			});

			const newRes = res.map(item => {
				const newObj = {
					...item,
					comId: item.comId || '',
					eccId: item.eccId || '',
					objId: item.objId || '',
					ercId: item.ercId || '',
					objKind: item.objKind || '',
					inProdKind: item.inProdKind || '',
					// calcFg: item.calcFg || "",
					calcFg: item.calcFg === '1' ? true : false,
					distRt: item.distRt || '',
					blocId: item.blocId || '',
					rowStat: null,
				};
				return newObj;
			});

			this.setGridData({
				gridKey: 'rowEccIaoGrid',
				value: newRes,
			});
		},
		detailDataInit() {
			this.setPageData({
				rowGridSelectKey: null,
				rowGridSelectData: [],
			});
			this.setGridData({
				gridKey: 'rowDetailGrid',
				value: [],
			});
		},
		detailEccIaoInit() {
			this.setPageData({
				rowGridSelectKey: null,
				rowGridSelectData: [],
			});
			this.setGridData({
				gridKey: 'rowEccIaoGrid',
				value: [],
			});
		},
		getSelectedRowStatInfo(data) {
			if (data) {
				var rowStat = data.rowStat;
				if (rowStat === 'I') {
					this.tab = 0;
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = true;
					}
				} else if (rowStat === 'U') {
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = false;
					}
				} else if (rowStat === 'D') {
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = false;
					}
				} else if (rowStat === null) {
					for (var i = 1; i < this.items.length; i++) {
						this.items[i].disabledFlag = false;
					}
				}
			}
		},
		async btnActions(action) {
			let dataArr = [];
			switch (action) {
				case 'add':
					this.$refs[this.gridName].addTreeRow();
					break;

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

				case 'save':
					dataArr = this.$refs[this.gridName].save();
					if (dataArr.length > 0) {
						var validCheck = true;
						dataArr.forEach(item => {
							if (item.upEccId == '') item.upEccId = 'ROOT';

							if (
								item.eccNm == '' ||
								item.upEccId == '' ||
								item.locKind == ''
							) {
								validCheck = false;
								alert('필수 입력값을 입력해주세요.');
							}
						});

						if (validCheck) {
							const sendParam = {
								datas: {
									dsEccBaseInfo: dataArr.map(item => ({
										...item,
										blocId: item.blocId,
										useFg: item.useFg ? '1' : '0',
										eccFg: item.eccFg ? '1' : '0',
										sortSeq: parseInt(item.sortSeq),
									})),
								},
								params: {},
							};
							await this.postUpdateApi({
								apiKey: 'saveEccBaseInfo',
								sendParam: sendParam,
							});

							this.$nextTick(() => {
								this.setPageData({ isFind: true });
							});
						}
					} else {
						alert('저장할 내용이 없습니다.');
					}
					break;

				default:
					break;
			}
		},
		gridEditingFinish(data) {
			this.$refs[this.gridName].editingFinish(data);
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	eccNm: '',
	blocId: '',
	blocMstrList: [],
	blocIdList: [],
	searchLocKind: '',
	searchLocKindList: [],
	searchEccKind: '',
	searchEccKindList: [],
	locKind: '',
	locKindList: [],
	eccKind: '',
	eccKindList: [],
	useFg: '1',
	useFgList: [],
	ercNm: '',
	ercNmList: [],

	addInfoDataKind: '',
	addInfoDataKindList: [],
	addInfo: '',
	addInfoList: [],

	facInfo: {},
	isMulti: false,

	// 선택된 그룹코드 상세 데이터
	rowGridSelectKey: 0,
	rowGridSelectData: null,

	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
	/* data 세팅 */
	// 로컬 gridName 값과 동일한 이름으로 세팅
	rowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: '',
			eccId: '',
			eccNm: '',
			upEccId: '',
			upEccNm: '',
			locKind: '',
			eccKind: '',
			blocId: null,
			eccFg: '0',
			sortSeq: '0',
			useFg: '1',
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
	rowDetailGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: '',
			eccId: '',
			addInfoId: null,
			addInfoDataKind: null,
			addInfoNumVal: null,
			addInfoTxtVal: null,
			addInfoVal: null,
			useFg: '1',
			rowStat: 'I',
		},
		buttonAuth: {
			remove: false,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
	rowEccIaoGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: globalComId,
			eccId: '',
			objId: '',
			ercId: null,
			objKind: null,
			inProdKind: null,
			calcFg: null,
			distRt: null,
			blocId: null,
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
};

const myDetail = [
	{
		type: 'InputText',
		label: '공정 ID',
		valueNm: 'eccId',
		readonly: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 pr-4',
		required: false,
		placeholder: '시스템 자동입력',
		iconShow: true
	},
	{
		type: 'InputText',
		label: '공정 명',
		valueNm: 'eccNm',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 pl-4',
		required: true,
		iconShow: true
	},
	//CustomeInput fakedata and not using in real code
	// {
	// 	type: 'CustomInput',
	// 	labelContent: '상위 공정',
	// 	cols: 6,
	// 	valueNm: 'eccNm',
	// 	labelCols: 12,
	// 	textCols: 12,
	// 	class: 'py-2',
	// 	required: true,
	// 	iconShow: true
	// },
	{
		type: 'FtnPlcFormPop',
		valueNm: 'upEccId',
		valueNm2: 'upEccNm',
		labelContent: '상위 공정',
		disabled: false,
		required: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'pb-0 mb-0 pr-4',
		disableContent: true,
	},
	{
		type: 'SelectBox',
		label: '위치 유형',
		valueNm: 'locKind',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 mb-0 pb-0 pl-4',
		list: 'locKindList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		required: true,
		iconShow: true,
	},
	{
		type: 'InputText',
		valueNm: 'upEccNm',
		readonly: true,
		cols: 6,
		class: 'py-2 pr-4',
	},
	{
		// 공백 처리
		type: 'Label',
		cols: 6,
		class: 'py-2 pl-4',
		disabled: false,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
	},
	{
		type: 'SelectBox',
		label: '공정 유형',
		valueNm: 'eccKind',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 pr-4',
		list: 'eccKindList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		addNull: true,
		iconShow: true
	},
	{
		type: 'InputText',
		label: '정렬',
		valueNm: 'sortSeq',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 pl-4',
		inputType: 'number',
		iconShow: true
		// onkeydown : "if(this.value > 100) this.value = 100;if(this.value < 0) this.value = 0;if(this.value == '') this.value = 0;"
	},
	{
		type: 'SelectBox',
		label: '사업장',
		valueNm: 'blocId',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 pr-4',
		list: 'blocIdList',
		itemText: 'blocNm',
		itemValue: 'blocId',
		iconShow: true
	},
	{
		type: 'CheckBox',
		label: '사용 여부',
		valueNm: 'useFg',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-2 pl-4',
		value: { '1': true, '0': false },
		iconShow: true,
		required: true,
	},
	{
		type: 'CheckBox',
		label: 'ECC 공정 여부',
		valueNm: 'eccFg',
		disabled: false,
		cols: 6,
		class: 'py-2 pr-4',
		iconShow: true,
		value: { '1': true, '0': false },
	},
];

const dataMockExample = [
  {
    eccId: 'ECC000001',
    eccNm: 'EGP_HVAC_LT_CH001',
    status: '운영중',
    eccKind: '공정',
    useFg: '1',
    _children: [
      {
        eccId: 'ECC000002',
        eccNm: 'B01',
        status: '대기',
        eccKind: '공정',
        useFg: '1',
        _children: [
          {
            eccId: 'ECC000005',
            eccNm: 'B01-1',
            status: '운영중',
            eccKind: '공정',
            useFg: '1',
			_children: [
				{
					eccId: 'ECC000009',
					eccNm: 'B01-1-1',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
				{
					eccId: 'ECC0000010',
					eccNm: 'B01-1-2',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
				{
					eccId: 'ECC0000011',
					eccNm: 'B01-1-3',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
			]
          },
          {
            eccId: 'ECC000006',
            eccNm: 'B01-2',
            status: '점검중',
            eccKind: '공정',
            useFg: '0',
			_children: [
				{
					eccId: 'ECC0000013',
					eccNm: 'B01-2-1',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
				{
					eccId: 'ECC0000014',
					eccNm: 'B01-1-2',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
				{
					eccId: 'ECC0000015',
					eccNm: 'B01-1-3',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
			]
          },
          {
            eccId: 'ECC000007',
            eccNm: 'B01-3',
            status: '운영중',
            eccKind: '공정',
            useFg: '1',
			_children: [
				{
					eccId: 'ECC000009',
					eccNm: 'B01-3-1',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
				{
					eccId: 'ECC0000010',
					eccNm: 'B01-3-2',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
				{
					eccId: 'ECC0000011',
					eccNm: 'B01-3-3',
					status: '운영중',
					eccKind: '공정',
					useFg: '1'
				},
			]
          },
        ],
      },
      {
        eccId: 'ECC000003',
        eccNm: 'B02',
        status: '운영중',
        eccKind: '공정',
        useFg: '1',
      },
      {
        eccId: 'ECC000004',
        eccNm: 'B03',
        status: '점검중',
        eccKind: '공정',
        useFg: '0',
      },
    ],
  },
];

const gridOptions = {
 	treeColumnOptions: {
		name: 'eccNm',	 // Showing tree table
		useIcon: false, // Not using icon
		indentWidth: 10,// spacing when showing children
	},
	header: {
		height: 40,
	},
	rowHeight: 35,
	showCheckbox: false,
};
</script>
