<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="'SelectBlocMstr'" ref="SelectBlocMstr" :parentPrgmId="myPrgmId"
								:labelCols="12" :textCols="12" :iconShow="true" :customClass="'select-large'" />
						</v-col>
						<v-col :cols="2.5">
							<component :is="'SelectReadObj'" :parentPrgmId="myPrgmId" :label="'검침대상'"
								dataKey="searchReadObj" :sendParam="{ useFg: '1' }" :labelCols="12" :textCols="12"
								:iconShow="true" :customClass="'select-large'" />
						</v-col>
						<v-col :cols="2.5">
							<component :is="'selectCodeList'" :parentPrgmId="myPrgmId" :label="'사용여부'" dataKey="useFg"
								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }" :addAll="true" :labelCols="12"
								:textCols="12" :customClass="'select-large'" :iconShow="true" />
						</v-col>
						<v-col :cols="2.5">
							<InputText :parentPrgmId="myPrgmId" label="검침개소명" valueNm="readPlcNm" :labelCols="12"
								:textCols="12" :searchOption="true" :customClass="'input-large'" :iconShow="true" />
						</v-col>

						<BtnSearch @click="search" size="large" />

					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents" class="mt-4">
			<v-col :cols="5" class="h100">
				<v-card class="pb-5">
					<div class="d-flex align-center justify-space-between pa-4 pb-6">
						<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-4">
						<div ref="gridParent" class="w100 h100">
							<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
								:parentPrgmId="myPrgmId" @getRowsData="getRowData"
								@sendSelectedRowStatInfo="getSelectedRowStatInfo" :selectedRowDataWatchFlag="true"
								:dataPath="dataPathExample" />
						</div>
					</div>
				</v-card>
			</v-col>
			<v-col :cols="7" class="h100">
				<v-card class="pb-5">
					<v-card-title class="custom-title-4 pb-1 pa-4">검침개소 상세
					</v-card-title>
					<div class="px-4">
						<v-tabs v-model="tab">
							<v-tab v-for="item in items" :key="item.id" :disabled="(item.id == 'readPlcImgInfoTab' ? isImgTabDisabled : false) ||
								item.disabledFlag
								">
								{{ item.name }}
							</v-tab>
						</v-tabs>
						<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2">
							<v-tab-item v-for="(item, idx) in items" :key="item.id">
								<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
									:detailList="detailList" :bindingData="gridName"
									@gridEditingFinish="gridEditingFinish" />
								<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
									:innerTabGridInfo="{ tab, idx }" />
								<ReadPlcImgInfoTab v-if="item.id == 'readPlcImgInfoTab'" :parentPrgmId="myPrgmId"
									:innerTabGridInfo="{ tab, idx }" />
								<ReadPlcTagRelTab v-if="item.id == 'readPlcTagRelTab'" :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 ReadPlcAddInfoTab from '@/components/pages/ems/ReadPlcInfo/ReadPlcAddInfoTab';
import ReadPlcImgInfoTab from '@/components/pages/ems/ReadPlcInfo/ReadPlcImgInfoTab';
import ReadPlcTagRelTab from '@/components/pages/ems/ReadPlcInfo/ReadPlcTagRelTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';

let myTitle;
// const myPrgmId = "PRG0011";
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,
		ReadPlcAddInfoTab,
		ReadPlcImgInfoTab,
		ReadPlcTagRelTab,
		Grid,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridName: 'rowGrid',
			loadGrid: true,
			tab: null,
			isImgTabDisabled: false,
			items: [
				{
					name: '검침개소 정보',
					id: 'readPlcBaseInfoTab',
					disabledFlag: false,
				},
				{
					name: '검침개소 추가 정보',
					id: 'readPlcAddInfoTab',
					disabledFlag: false,
				},
				{ name: '가상개소 정보', id: 'readPlcImgInfoTab', disabledFlag: false },
				{
					name: '검침개소 TAG 연결',
					id: 'readPlcTagRelTab',
					disabledFlag: false,
				},
			],
			detailList: myDetail,
			defaultUseFg: 1,
			dataPathExample: {
				"rowGrid": {
					data: sampleData,
					column: [
						{
							header: '',
							name: '',
							align: 'center',
							width: 50,
							formatter: (props) => {
								return `<label class="custom-radio">
											<span class="radio-mark"></span>
										</label>`;
							}
						},
						{
							header: '검침개소명',
							name: 'readPlcNm',
							align: 'left',
							minWidth: 400,
						},
						{
							header: '개소 종류',
							name: 'plcKind',
							minWidth: 100,
							align: 'center',

						},
						{
							header: '사용 여부',
							name: 'useFg',
							minWidth: 100,
							align: 'center',

						},

					],
					option: myOptions,

				}
			}
			// loadTree: false
		};
	},
	computed: {
		// ...mapState({
		//   pageData: state => state.pageData[myPrgmId]
		// }),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkBlocCd() {
			return this.pageData.blocId;
		},
		chkPlcKind() {
			// 시스템구분 선택 감지
			return this.pageData.searchPlcKind;
		},
		chkReadObj() {
			return this.pageData.searchReadObj;
		},
		chkUseFg() {
			// 사용여부 선택 감지
			return this.pageData.useFgList === undefined ? -1 : this.pageData.useFg;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkBlocCd() {
			this.setPageData({ isFind: true });
		},
		chkPlcKind() {
			this.setPageData({ isFind: true });
		},
		chkReadObj() {
			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() {
		//
		// await this.getBlocMstrList({
		//   dataKey: "blocId",
		//   params: { useFg: '1'},
		//   addAll: false
		// });

		// 개소 종류 코드 목록 조회
		await this.getCodeList({
			dataKey: 'plcKind',
			params: { commGrpCd: 'CM_CHKKIND', useFg: '1' },
			addAll: false,
		});
		// 검침 대상 목록 조회
		await this.getReadObjInfoList({
			dataKey: 'readObj',
			params: { useFg: '1' },
			addAll: false,
		});

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

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

		// 가상 검침개소 Tab에서 사용
		// 가감 유형 : DDCT_KIND : CM_DDCT_FG
		await this.getCodeList({
			dataKey: 'ddctKind',
			params: { commGrpCd: 'CM_DDCT_FG', useFg: '1' },
			addAll: false,
		});
	},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
			getBlocMstrList: 'modules/search/getBlocMstrList',
			getReadObjInfoList: 'modules/search/getReadObjInfoList',
			getAddInfoList: 'modules/search/getAddInfoList',
		}),
		init() {
			this.initData();
			this.gridInit();
		},
		async initData() {
			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 });
		},
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 30;
			const gridWidth = this.$refs.gridParent.offsetWidth;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				treeColumnOptions: {
					name: 'eccNm',       // Showing tree table
					useIcon: false,      // Not using icon
					indentWidth: 10,
				},
			};
			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: 'readPlcNm',
					align: 'left',
					minWidth: 400,
				},
				{
					header: '검침개소 ID',
					name: 'readPlcId',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '상위 검침개소 ID',
					name: 'upReadPlcId',
					width: 150,
					align: 'center',
					hidden: true,
				},
				{
					header: '개소 종류',
					name: 'plcKind',
					minWidth: 100,
					align: 'center',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.plcKindList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{
					header: '검침대상',
					name: 'readObjId',
					width: 100,
					align: 'center',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.readObjList.filter(
							item => item.readObjId == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].readObjNm;
						}
						return retVal;
					},
					hidden: true,
				},
				{
					header: '사업장',
					name: 'blocId',
					width: 100,
					align: 'center',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.blocIdList.filter(
							item => item.blocId == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].blocNm;
						}
						return retVal;
					},
					hidden: true,
				},
				{
					header: '사용 여부',
					name: 'useFg',
					minWidth: 100,
					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.loadTree = false;
			this.loadGrid = false;

			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		async getRowGridData() {
			let res = [];
			var useFg =
				this.pageData.useFgList.length > 0
					? this.pageData.useFg
					: this.defaultUseFg;
			if (
				this.pageData.blocMstrList.length > 0 &&
				this.pageData.searchReadObjList.length > 0
			) {
				// if(this.pageData.blocMstrList.length > 0){
				res = await this.postApiReturn({
					apiKey: 'selectReadPlcBaseInfo',
					resKey: 'readPlcBaseInfoData',
					sendParam: {
						comId: globalComId,
						blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
						plcKind: this.pageData.searchPlcKind,
						readObjId: this.pageData.searchReadObj,
						useFg: useFg,
						readPlcNmLike: this.pageData.readPlcNm,
					},
				});
			} else {
				this.setPageData({ isFind: false });
			}
			const newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
					readPlcIdNm: item.readPlcId,
					upReadPlcId:
						item.upReadPlcId == null || item.upReadPlcId == ''
							? 'ROOT'
							: item.upReadPlcId,
					blocId: item.blocId,
					useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
				};
				return newObj;
			});
			this.loadGrid = true;
			const setTreeData = await this.setTree({
				treeKey: 'READ_PLC_ID',
				value: newRes,
			});
			// this.loadTree = true;

			this.setGridData({
				gridKey: this.gridName,
				value: setTreeData.ROOT || [],
				// value: newRes
			});

			this.$nextTick(() => {
				if (newRes.length > 0) {
					this.$refs[this.gridName].focus({
						rowKey:
							this.pageData.rowGridSelectKey == '' ||
								this.pageData.rowGridSelectKey == null
								? 0
								: this.pageData.rowGridSelectKey ==
									this.$refs[this.gridName].getData().length - 1
									? this.pageData.rowGridSelectKey
									: 0,
						columnName: 'readPlcNm',
						setScroll: true,
					});
				} else {
					this.detailDataInit();
				}
			});
		},
		async getRowData(data, gridName) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			if (data.plcKind == 'CHK_MSR') {
				if (this.tab == 2) {
					this.tab = 0;
				}
				this.isImgTabDisabled = true;
			} else {
				this.isImgTabDisabled = false;
			}
			this.setReadPlcAddInfo(data);
			this.setReadPlcImgInfo(data);
			this.setReadPlcITagRelInfo(data);
			this.setGridSelectData({
				gridKey: gridName,
				gridSelect: true,
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: Object.assign({}, data),
			});
			this.setGridSelectData({
				gridKey: 'rowReadPlcTagRelGrid',
				gridSelect: true,
				rowGridSelectKey: '',
				rowGridSelectData: Object.assign({}, {}),
			});
		},
		async setReadPlcAddInfo(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			// 검침개소 추가 정보 처리
			const res = await this.postApiReturn({
				apiKey: 'selectReadPlcAddInfoList',
				resKey: 'readPlcAddInfoData',
				sendParam: {
					comId: data.comId,
					blocId: data.blocId,
					readPlcId: data.readPlcId,
				},
			});

			const newRes = res.map(item => {
				const newObj = {
					...item,
					comId: item.comId || '',
					blocId: item.blocId || '',
					readPlcId: item.readPlcId || '',
					addInfoId: item.addInfoId || '',
					addInfoDataKind: item.addInfoDataKind || '',
					addInfoNumVal: item.addInfoNumVal || '',
					addInfoTxtVal: item.addInfoTxtVal || '',
					addInfoVal: item.addInfoVal || '',
					// useFg: item.useFg || "1",
					useFg: item.useFg === '1' ? true : false,
					rowStat: null,
				};
				return newObj;
			});

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

			const newRes = res.map(item => {
				const newObj = {
					...item,
					comId: item.comId || '',
					readPlcId: item.readPlcId || '',
					objReadPlcId: item.objReadPlcId || '',
					distRt: item.distRt || '',
					ddctKind: item.ddctKind || '',
					rowStat: null,
				};
				return newObj;
			});

			this.setGridData({
				gridKey: 'rowReadPlcImgGrid',
				value: newRes,
			});

			// this.$nextTick(() => {
			//   if (newRes.length > 0) {
			//     this.rowReadPlcImgGrid.focus({
			//       rowKey: 0,
			//       columnName: "objReadPlcId",
			//       setScroll: true
			//     });
			//   } else {
			//     this.detailDataInit();
			//   }
			// });
		},
		async setReadPlcITagRelInfo(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			// 검침개소 추가 정보 처리
			const res = await this.postApiReturn({
				apiKey: 'selectReadPlcTagRel',
				resKey: 'readPlcTagRelData',
				sendParam: {
					comId: data.comId,
					readPlcId: data.readPlcId,
					blocId: this.userInfo.blocId,
				},
			});

			const newRes = res.map(item => {
				const newObj = {
					...item,
					comId: item.comId || '',
					readPlcId: item.readPlcId || '',
					tagId: item.tagId || '',
					ercId: item.ercId || '',
					distRt: item.distRt || '',
					reprTagFg: item.reprTagFg === '1' ? true : false,
					rmrk: item.rmrk || '',
					useFg: item.useFg === '1' ? true : false,
					rowStat: null,
				};
				return newObj;
			});

			this.setGridData({
				gridKey: 'rowReadPlcTagRelGrid',
				value: newRes,
			});
		},
		detailDataInit() {
			this.setPageData({
				rowGridSelectKey: null,
				rowGridSelectData: [],
			});
			this.setGridData({
				gridKey: 'rowDetailGrid',
				value: [],
			});
		},
		detailReadPlcImgInit() {
			this.setPageData({
				rowGridSelectKey: null,
				rowGridSelectData: [],
			});
			this.setGridData({
				gridKey: 'rowReadPlcImgGrid',
				value: [],
			});
		},
		detailReadPlcTagRelInit() {
			this.setPageData({
				rowGridSelectKey: null,
				rowGridSelectData: [],
			});
			this.setGridData({
				gridKey: 'rowReadPlcTagRelGrid',
				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':
					const defaultRow = {
						comId: this.userInfo.comId,
						readPlcId: '',
						readPlcNm: '',
						upReadPlcId: '',
						upReadPlcNm: '',
						plcKind: 'CHK_MSR',
						readObjId: this.pageData.searchReadObj,
						blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
						useFg: '1',
					};
					this.$refs[this.gridName].addTreeRow(defaultRow);
					break;

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

				case 'save':
					dataArr = this.$refs[this.gridName].save();
					var validCheck = true;
					if (dataArr.length > 0) {
						dataArr.filter(item => {
							if (item.rowStat === 'I') {
								if (item.upReadPlcId == '') item.upReadPlcId = 'ROOT';
								if (
									item.readPlcNm == '' ||
									item.upReadPlcId == '' ||
									item.readObjId == ''
								) {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
							} else if (item.rowStat === 'U') {
								if (item.upReadPlcId == '') item.upReadPlcId = 'ROOT';
								if (
									item.readPlcNm == '' ||
									item.upReadPlcId == '' ||
									item.readObjId == ''
								) {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
							}
						});

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

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

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

const defaultData = {
	/* 검색옵션 */
	readPlcNm: '',
	blocId: '',
	blocMstrList: [],
	blocIdList: [],
	searchPlcKind: '',
	searchPlcKindList: [],
	searchReadObj: '',
	searchReadObjList: [],
	plcKind: '',
	plcKindList: [],
	readObj: '',
	readObjList: [],
	unitCdList: [],
	useFg: '1',
	useFgList: [],
	commGrpCd: '',
	commGrpCdNm: '',
	ercNmList: [],
	ercNm: '',
	addInfoDataKind: '',
	addInfoDataKindList: [],
	addInfo: '',
	addInfoList: [],

	ddctKind: '',
	ddctKindList: [],

	facInfo: {},
	isMulti: false,

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

	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
	/* data 세팅 */
	// 로컬 gridName 값과 동일한 이름으로 세팅
	rowGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: globalComId,
			readPlcId: '',
			readPlcNm: '',
			upReadPlcId: '',
			upReadPlcNm: '',
			plcKind: '',
			readObjId: '',
			blocId: null,
			useFg: '1',
			rowStat: 'I',
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
	rowDetailGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: globalComId,
			blcoId: '',
			readPlcId: '',
			addInfoId: null,
			addInfoDataKind: null,
			addInfoNumVal: null,
			addInfoTxtVal: null,
			addInfoVal: null,
			useFg: '1',
			rowStat: null,
		},
		buttonAuth: {
			remove: false,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
	rowReadPlcImgGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: globalComId,
			readPlcId: '',
			objReadPlcId: '',
			distRt: null,
			ddctKind: null,
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
	rowReadPlcTagRelGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: '',
			readPlcId: '',
			ercNm: '',
			tagNm: '',
			tagId: '',
			ercId: null,
			distRt: null,
			reprTagFg: '1',
			useFg: '1',
			rmrk: null,
			rowStat: null,
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
		rowGridSelectKey: 0,
		rowGridSelectData: null,
	},
};

const sampleData = [
  {
    readPlcNm: '서울 본사',
    plcKind: '본사',
    useFg: '사용',
    _children: [
      {
        readPlcNm: '서울 본사 - 1층',
        plcKind: '층',
        useFg: '사용',
      },
      {
        readPlcNm: '서울 본사 - 2층',
        plcKind: '층',
        useFg: '미사용',
      },
    ],
  },
  {
    readPlcNm: '부산 지사',
    plcKind: '지사',
    useFg: '사용',
    _children: [
      {
        readPlcNm: '부산 지사 - A동',
        plcKind: '건물',
        useFg: '사용',
        _children: [
          {
            readPlcNm: '부산 지사 - A동 1층',
            plcKind: '층',
            useFg: '사용',
          },
        ],
      },
    ],
  },
  {
    readPlcNm: '대전 창고',
    plcKind: '창고',
    useFg: '미사용',
  },
];



const myOptions = {
	columnOptions: {
		resizable: true,
	},
	treeColumnOptions: {
		name: 'readPlcNm',       // Showing tree table
		useIcon: false,      // Not using icon
		indentWidth: 10,
	},
}

const myDetail = [
	{
		type: 'InputText',
		label: '검침개소 ID',
		valueNm: 'readPlcId',
		readonly: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		required: false,
		placeholder: '시스템 자동입력',
		iconShow: true,
	},
	{
		type: 'InputText',
		label: '검침개소명',
		valueNm: 'readPlcNm',
		disabled: false,
		labelCols: 12,
		textCols: 12,
		cols: 6,
		class: 'py-3 pl-4',
		required: true,
		iconShow: true,
	},
	{
		type: 'ReadPlcPop',
		label: '상위 검침개소',
		valueNm: 'upReadPlcId',
		disabled: false,
		labelCols: 12,
		textCols: 12,
		cols: 6,
		class: 'py-3 pr-4 pb-2',
		required: true,
		iconShow: true,
	},
	{
		type: 'SelectBox',
		label: '검침 값 유형',
		valueNm: 'plcKind',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		list: 'plcKindList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		required: true,
		iconShow: true,
	},
	{
		type: 'InputText',
		valueNm: 'plcKind',
		valueNm: 'upReadPlcNm',
		readonly: true,
		cols: 6,
		textCols: 12,
		class: 'pt-1 py-3 pr-4',
	},
	{
		showValue: false,
	},

	{
		type: 'SelectBox',
		label: '검침대상',
		valueNm: 'readObjId',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pr-4',
		list: 'readObjList',
		itemText: 'readObjNm',
		itemValue: 'readObjId',
		required: true,
		iconShow: true,
	},
	{
		type: 'CheckBox',
		label: '사용 여부',
		valueNm: 'useFg',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		class: 'py-3 pl-4',
		value: { '1': true, '0': false },
		required: true,
		iconShow: true,
	},
	// {
	//   type: "SelectBox",
	//   label: "사업장",
	//   valueNm: "blocId",
	//   disabled: false,
	//   cols: 6,
	//   class: "py-2",
	//   list: "blocIdList",
	//   itemText: "blocNm",
	//   itemValue: "blocId"
	// },
];
</script>
