<template>
	<div class="l-layout">
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="center" no-gutters>
						<v-col :cols="3">
							<!-- 사업장 -->
							<component
								:is="'SelectBlocMstr'"
								ref="SelectBlocMstr"
								:textCols="12"
								:labelCols="12"
								:parentPrgmId="myPrgmId"
							/>
						</v-col>
						<v-col :cols="3">
							<component
								:is="'selectCodeList'"
								:parentPrgmId="myPrgmId"
								:label="'에너지원 유형'"
								dataKey="searchErcKind"
								:sendParam="{ commGrpCd: 'EM_ERCKIND', useFg: '1' }"
								:addAll="true"
							/>
						</v-col>
						<v-col :cols="3">
							<component
								:is="'SelectReadObj'"
								:parentPrgmId="myPrgmId"
								:label="'검침대상'"
								dataKey="searchReadObj"
								:sendParam="{ useFg: '1' }"
								:addAll="true"
								:textCols="12"
								:labelCols="12"
							/>
						</v-col>
						<v-col :cols="3" class="text-right">
							<BtnSearch @click="search" />
						</v-col>
					</v-row>
					<v-row align="center" no-gutters>
						<v-col :cols="3">
							<component
								:is="'selectCodeList'"
								:parentPrgmId="myPrgmId"
								:label="'고지 유형'"
								dataKey="searchChrgKind"
								:sendParam="{ commGrpCd: 'EM_ENGCHAGKIND', useFg: '1' }"
								:addAll="true"
							/>
						</v-col>
						<v-col :cols="3">
							<component
								:is="'selectCodeList'"
								:parentPrgmId="myPrgmId"
								:label="'사용여부'"
								dataKey="useFg"
								:sendParam="{ commGrpCd: 'CO_USEFG', useFg: '1' }"
								:addAll="true"
							/>
						</v-col>
						<v-col :cols="3">
							<InputText
								:parentPrgmId="myPrgmId"
								label="에너지원명"
								valueNm="ercNm"
								:textCols="12"
								:labelCols="12"
								:searchOption="true"
							/>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents" style="height: calc(100vh - 400px)">
			<v-col :cols="5" class="h100">
				<v-card class="pb-5">
					<v-card-title class="d-flex justify-space-between align-end">
						<span class="tit ft-size_20 ft-weight_600">에너지원 정보</span>
						<Buttons
							:parentPrgmId="myPrgmId"
							:bindingData="gridName"
							:detailList="detailList"
							:btnActionsFnc="btnActions"
						/>
					</v-card-title>
					<div class="px-5" style="height:calc(100% - 106px)">
						<div ref="gridParent" class="w100 h100">
							<component
								:ref="gridName"
								:is="loadGrid ? 'Grid' : null"
								:gridName="gridName"
								:parentPrgmId="myPrgmId"
								@getRowsData="getRowData"
								@sendSelectedRowStatInfo="getSelectedRowStatInfo"
								:selectedRowDataWatchFlag="true"
							/>
						</div>
					</div>
				</v-card>
			</v-col>
			<v-col :cols="7" class="h100">
				<v-card class="pb-5">
					<v-card-title>에너지원 상세</v-card-title>
					<div class="px-5" style="height:calc(100% - 70px)">
						<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 == 'ercInfoTab'"
									:is="'Form'"
									:parentPrgmId="myPrgmId"
									:detailList="detailList"
									@gridEditingFinish="gridEditingFinish"
								/>
								<ErcChrgInfoTab
									v-if="item.id == 'ercChrgInfoTab'"
									: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 ErcChrgInfoTab from '@/components/pages/ems/ErcChrgInfo/ErcChrgInfoTab';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import DateUtility from '~/plugins/dateUtility';

let myTitle;
// const myPrgmId = "PRG0010";
let myPrgmId;
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,
		ErcChrgInfoTab,
		Grid,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			gridName: 'rowGrid',
			loadGrid: false,
			tab: null,
			items: [
				{ name: '에너지원 정보', id: 'ercInfoTab', disabledFlag: false },
				{ name: '에너지 요금 정보', id: 'ercChrgInfoTab', disabledFlag: false },
			],
			detailList: myDetail,
		};
	},
	computed: {
		// ...mapState({
		//   pageData: state => state.pageData[myPrgmId]
		// }),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkBlocId() {
			return this.pageData.blocId;
		},
		chkErcKind() {
			// 시스템구분 선택 감지
			return this.pageData.searchErcKind;
		},
		chkReadObj() {
			return this.pageData.searchReadObj;
		},
		chkChrgKind() {
			return this.pageData.searchChrgKind;
		},
		chkUseFg() {
			// 사용여부 선택 감지
			return this.pageData.useFg;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkBlocId() {
			this.setPageData({ isFind: true });
		},
		chkErcKind() {
			this.setPageData({ isFind: true });
		},
		chkReadObj() {
			this.setPageData({ isFind: true });
		},
		chkChrgKind() {
			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,
		});
	},
	created() {
		// 측정 Data 구분 목록 조회
		this.getCodeList({
			dataKey: 'ercKind',
			params: { commGrpCd: 'EM_ERCKIND', useFg: '1' },
			addAll: false,
		});
		// 측정 대상 목록 조회
		this.getReadObjInfoList({
			dataKey: 'readObj',
			params: { useFg: '1' },
			addAll: false,
		});

		// 단위 코드 목록 조회
		this.getCodeList({
			dataKey: 'chrgKind',
			params: { commGrpCd: 'EM_ENGCHAGKIND', useFg: '1' },
			addAll: false,
		});

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

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

		this.search();
	},
	mounted() {
		this.userComId = this.userInfo.comId;
		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.gridInit();

			var date = new Date();
			this.pageData.toDt =
				String(date.getFullYear()) +
				String(date.getMonth() + 1).padStart(2, '0');
			this.pageData.fromDt = DateUtility.addMonth(-11, 'YYYYMM', date);
		},
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 30;

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

			const _this = this;
			const myColumns = [
				{ header: '회사 ID', name: 'comId', hidden: true },
				{ header: '에너지원ID', name: 'ercId', width: 120, align: 'center' },
				{ header: '에너지원명', name: 'ercNm', align: 'left' },
				{
					header: '에너지원 유형',
					name: 'ercKind',
					align: 'center',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.ercKindList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{
					header: '검침대상',
					name: 'readObjId',
					align: 'left',
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.readObjList.filter(
							item => item.readObjId == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].readObjNm;
						}
						return retVal;
					},
				},
				{
					header: '검침 개소 ID',
					name: 'readPlcId',
					width: 80,
					align: 'center',
					hidden: true,
				},
				{
					header: '고지 유형',
					name: 'chrgKind',
					width: 80,
					align: 'center',
					hidden: true,
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.chrgKindList.filter(
							item => item.commCd == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].commCdNm;
						}
						return retVal;
					},
				},
				{
					header: '기본단가',
					name: 'unitPrce',
					width: 100,
					align: 'right',
					hidden: true,
				},
				{
					header: '단가 사용여부',
					name: 'prceFg',
					width: 100,
					align: 'center',
					hidden: true,
					formatter({ value }) {
						const newValue = _this.pageData.useFgList.filter(
							item => item.commCd == value,
						);
						return newValue[0].commCdNm;
					},
				},
				{
					header: '피크 전력',
					name: 'peakPow',
					width: 100,
					align: 'right',
					hidden: true,
				},
				{
					header: '전력 계약',
					name: 'elecContId',
					width: 100,
					align: 'center',
					hidden: true,
				},
				{
					header: '전력 계약',
					name: 'elecContNm',
					width: 100,
					align: 'center',
					hidden: true,
				},
				{
					header: '사업장',
					name: 'blocId',
					width: 100,
					align: 'center',
					hidden: true,
					formatter({ value }) {
						let retVal = '';
						const newValue = _this.pageData.blocMstrList.filter(
							item => item.blocId == value,
						);
						if (newValue.length > 0) {
							retVal = newValue[0].blocNm;
						}
						return retVal;
					},
				},
				{
					header: '사용 여부',
					name: 'useFg',
					width: 95,
					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,
			});
			this.loadGrid = true;
		},
		async getRowGridData() {
			let res = [
  {
    "comId": "COM001",
    "ercId": "ERC001",
    "ercNm": "LNG 가스",
    "ercKind": "GAS",
    "readObjId": "READ001",
    "readPlcId": "PLC001",
    "chrgKind": "FIXED",
    "unitPrce": 120.5,
    "prceFg": "1",
    "peakPow": 500,
    "elecContId": "EC001",
    "elecContNm": "계약A",
    "blocId": "BLOC001",
    "useFg": true
  },
  {
    "comId": "COM002",
    "ercId": "ERC002",
    "ercNm": "태양광",
    "ercKind": "ELEC",
    "readObjId": "READ002",
    "readPlcId": "PLC002",
    "chrgKind": "VARIABLE",
    "unitPrce": 95.0,
    "prceFg": "0",
    "peakPow": 300,
    "elecContId": "EC002",
    "elecContNm": "계약B",
    "blocId": "BLOC002",
    "useFg": false
  },
  {
    "comId": "COM003",
    "ercId": "ERC003",
    "ercNm": "지열",
    "ercKind": "HEAT",
    "readObjId": "READ003",
    "readPlcId": "PLC003",
    "chrgKind": "FIXED",
    "unitPrce": 110.0,
    "prceFg": "1",
    "peakPow": 450,
    "elecContId": "EC003",
    "elecContNm": "계약C",
    "blocId": "BLOC003",
    "useFg": true
  }
]
;

			// if (this.pageData.blocMstrList.length > 0) {
			// 	res = await this.postApiReturn({
			// 		apiKey: 'selectErcInfo',
			// 		resKey: 'ercInfoData',
			// 		sendParam: {
			// 			blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
			// 			ercKind: this.pageData.searchErcKind,
			// 			readObjId: this.pageData.searchReadObj,
			// 			chrgKind: this.pageData.searchChrgKind,
			// 			useFg: this.pageData.useFg,
			// 			ercNmLike: this.pageData.ercNm,
			// 		},
			// 	});
			// } else {
			// 	this.setPageData({ isFind: false });
			// }
			const newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
					blocId: item.blocId,
					useFg: item.useFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
					prceFg: item.prceFg === '1' ? true : false, // 화면 개발 편의를 위해 boolean 타입으로 교체, 저장시 "1", "0" 으로 바꿔 보내야 함
				};
				return newObj;
			});
			this.loadGrid = true;
			this.setGridData({
				gridKey: this.gridName,
				value: newRes,
			});

			this.$nextTick(() => {
				if (newRes.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: 'ercId',
						setScroll: true,
					});
				} else {
					this.detailDataInit();
				}
			});
		},
		async getRowData(data) {
			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});
			const res = await this.postApiReturn({
				apiKey: 'selectEnrgChrgPrcInfo',
				resKey: 'enrgChrgInfoData',
				sendParam: {
					comId: data.comId,
					blocId: data.blocId,
					ercId: data.ercId,
					startDt: this.pageData.fromDt,
					endDt: this.pageData.toDt,
				},
			});

			const newRes = res.map(item => {
				const newObj = {
					...item,
					comId: item.comId || '',
					blocId: item.blocId || '',
					ercId: item.ercId || '',
					objMm: item.objMm || '',
					objYm: item.objYm || '',
					strtDt: item.strtDt || '',
					endDt: item.endDt || '',
					notiChrg: item.notiChrg || '',
					baseChrg: item.baseChrg || '',
					rmrk: item.rmrk || '',
					useQty: item.useQty || '',
					unitPrce: item.unitPrce || '',
					corrCoff: item.corrCoff || '',
					heatCoff: item.heatCoff || '',
					peakPow: item.peakPow || '',
					elecContId: item.elecContId || '',
					rowStat: null,
				};
				return newObj;
			});

			this.setGridData({
				gridKey: 'rowDetailGrid',
				value: newRes,
			});
		},
		detailDataInit() {
			this.setPageData({
				rowGridSelectKey: null,
				rowGridSelectData: [],
			});
			this.setGridData({
				gridKey: 'rowDetailGrid',
				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 = {
						ercId: '',
						ercNm: '',
						ercKind: this.pageData.ercKind,
						readObjId: this.pageData.readObj,
						chrgKind: this.pageData.chrgKind,
						unitPrce: 0,
						peakPow: '',
						blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
						elecContId: '',
						elecContNm: '',
						readPlcId: '',
						readPlcNm: '',
						prceFg: '1',
						useFg: '1',
					};
					this.$refs[this.gridName].addRow(defaultRow);
					break;

				case 'remove':
					this.$refs[this.gridName].removeRow();
					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.ercNm == '') {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
							} else if (item.rowStat === 'U') {
								if (item.ercNm == '') {
									alert('필수 입력값을 입력해주세요.');
									validCheck = false;
								}
							}
						});
						if (validCheck) {
							const sendParam = {
								datas: {
									dsErcInfo: dataArr.map(item => ({
										...item,
										blocId: item.blocId,
										useFg: item.useFg ? '1' : '0',
										prceFg: item.prceFg ? '1' : '0',
									})),
								},
								params: {},
							};
							await this.postUpdateApi({
								apiKey: 'saveErcInfo',
								sendParam: sendParam,
							});

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

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

const defaultData = {
	/* 검색옵션 */
	ercNm: '',
	blocId: '',
	blocMstrList: [],
	searchErcKind: '',
	searchErcKindList: [],
	searchReadObj: '',
	searchReadObjList: [],
	searchChrgKind: '',
	searchChrgKindList: [],
	ercKind: '',
	ercKindList: [],
	readObj: '',
	readObjList: [],
	chrgKind: '',
	chrgKindList: [],
	useFg: '1',
	useFgList: [],

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

	searchElecContKind: '',
	searchElecContKindList: [],
	searchVoltKind: '',
	searchVoltKindList: [],
	searchOptKind: '',
	searchOptKindList: [],

	cmCycle: 'CYC_MONTH',
	cmCycleList: [
		{ idx: 0, text: '연', value: 'CYC_YEAR' },
		{ idx: 1, text: '월', value: 'CYC_MONTH' },
		{ idx: 2, text: '일', value: 'CYC_DAY' },
		{ idx: 3, text: '시간', value: 'CYC_HOUR' },
	],
	defaultRange: {
		CYC_YEAR: 1,
		CYC_MONTH: 12,
		CYC_DAY: 30,
		CYC_HOUR: 0,
	},
	fromDt: '',
	toDt: '',

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

	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정
	/* data 세팅 */
	// 로컬 gridName 값과 동일한 이름으로 세팅
	rowGrid: {
		data: [
  {
    "comId": "COM001",
    "ercId": "ERC001",
    "ercNm": "LNG 가스",
    "ercKind": "GAS",
    "readObjId": "READ001",
    "readPlcId": "PLC001",
    "chrgKind": "FIXED",
    "unitPrce": 120.5,
    "prceFg": "1",
    "peakPow": 500,
    "elecContId": "EC001",
    "elecContNm": "계약A",
    "blocId": "BLOC001",
    "useFg": true
  },
  {
    "comId": "COM002",
    "ercId": "ERC002",
    "ercNm": "태양광",
    "ercKind": "ELEC",
    "readObjId": "READ002",
    "readPlcId": "PLC002",
    "chrgKind": "VARIABLE",
    "unitPrce": 95.0,
    "prceFg": "0",
    "peakPow": 300,
    "elecContId": "EC002",
    "elecContNm": "계약B",
    "blocId": "BLOC002",
    "useFg": false
  },
  {
    "comId": "COM003",
    "ercId": "ERC003",
    "ercNm": "지열",
    "ercKind": "HEAT",
    "readObjId": "READ003",
    "readPlcId": "PLC003",
    "chrgKind": "FIXED",
    "unitPrce": 110.0,
    "prceFg": "1",
    "peakPow": 450,
    "elecContId": "EC003",
    "elecContNm": "계약C",
    "blocId": "BLOC003",
    "useFg": true
  }
],
		column: [
			{ header: '회사 ID', name: 'comId', hidden: true },
				{ header: '에너지원ID', name: 'ercId', width: 120, align: 'center' },
				{ header: '에너지원명', name: 'ercNm', align: 'left' },
				{
					header: '에너지원 유형',
					name: 'ercKind',
					align: 'center',
				},
				{
					header: '검침대상',
					name: 'readObjId',
					align: 'left',
				},
				{
					header: '검침 개소 ID',
					name: 'readPlcId',
					width: 80,
					align: 'center',
					hidden: true,
				},
				{
					header: '고지 유형',
					name: 'chrgKind',
					width: 80,
					align: 'center',
					hidden: true,
				},
				{
					header: '기본단가',
					name: 'unitPrce',
					width: 100,
					align: 'right',
					hidden: true,
				},
				{
					header: '단가 사용여부',
					name: 'prceFg',
					width: 100,
					align: 'center',
					hidden: true,
				},
				{
					header: '피크 전력',
					name: 'peakPow',
					width: 100,
					align: 'right',
					hidden: true,
				},
				{
					header: '전력 계약',
					name: 'elecContId',
					width: 100,
					align: 'center',
					hidden: true,
				},
				{
					header: '전력 계약',
					name: 'elecContNm',
					width: 100,
					align: 'center',
					hidden: true,
				},
				{
					header: '사업장',
					name: 'blocId',
					width: 100,
					align: 'center',
					hidden: true,
				},
				{
					header: '사용 여부',
					name: 'useFg',
					width: 95,
					align: 'center',
				}
		], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: '',
			ercId: '',
			ercNm: null,
			ercKind: '',
			readObjId: '',
			readPlcId: '',
			readPlcNm: '',
			chrgKind: '',
			unitPrce: null,
			prceFg: null,
			peakPow: null,
			elecContId: '',
			elecContNm: '',
			blocId: null,
			useFg: '1',
			rowStat: 'I',
		},
		buttonAuth: {
			add: true,
			remove: true,
			save: true,
			excel: false,
		},
	},
	rowDetailGrid: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {
			comId: '',
			ercId: '',
			objMm: '',
			blocId: '',
			startDt: null,
			endDt: null,
			notiChrg: null,
			baseChrg: null,
			rmrk: null,
			useQty: null,
			unitPrce: null,
			corrCoff: null,
			heatCoff: null,
			peakPow: null,
			elecContId: '',
			rowStat: null,
		},
		buttonAuth: {
			remove: true,
			save: true,
		},
	},

	rowGridChart: Utility.defaultChartOption({
		data: ['기본요금', '고지요금'],
		selectedMode: true,
		selected: {
			기본요금: true,
			고지요금: true,
		},
	}),
};
const myDetail = [
	{
		type: 'InputText',
		label: '에너지원 ID',
		valueNm: 'ercId',
		readonly: true,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pr-4',
		required: false,
		placeholder: '시스템 자동입력',
	},
	{
		type: 'InputText',
		label: '에너지원 명',
		valueNm: 'ercNm',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pl-4',
		required: true,
	},
	{
		type: 'SelectBox',
		label: '에너지원 유형',
		valueNm: 'ercKind',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pr-4',
		list: 'ercKindList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		required: true,
	},
	{
		type: 'SelectBox',
		label: '검침대상',
		valueNm: 'readObjId',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pl-4',
		list: 'readObjList',
		itemText: 'readObjNm',
		itemValue: 'readObjId',
		required: true,
	},
	{
		type: 'SelectBox',
		label: '고지 유형',
		valueNm: 'chrgKind',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pr-4',
		list: 'chrgKindList',
		itemText: 'commCdNm',
		itemValue: 'commCd',
		required: true,
	},
	{
		type: 'InputText',
		label: '기본단가',
		valueNm: 'unitPrce',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pl-4',
	},
	{
		type: 'InputText',
		label: '피크 전력',
		valueNm: 'peakPow',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pr-4',

	},
	{
		type: 'SelectBox',
		label: '사업장',
		valueNm: 'blocId',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pl-4',
		list: 'blocMstrList',
		itemText: 'blocNm',
		itemValue: 'blocId',
		required: true,
	},
	{
		type: 'ElecPowChrgPop',
		label: '전력 계약',
		valueNm: 'elecContId',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		// class: 'py-2',
		class: 'pb-0 mb-0 pr-4',
		disableContent: true,
	},
	{
		type: 'ReadPlcPop',
		label: '검침개소',
		valueNm: 'readPlcId',
		disabled: false,
		cols: 6,
		labelCols: 12,
		textCols: 12,
		iconShow: true,
		class: 'py-2 pl-4',
	},
	{
		type: 'InputText',
		valueNm: 'elecContNm',
		readonly: true,
		cols: 6,
		iconShow: true,
		class: 'py-2 pr-4',
	},
	{
		type: 'InputText',
		valueNm: 'readPlcNm',
		readonly: true,
		cols: 6,
		iconShow: true,
		class: 'py-2 pl-4',
	},
	{
		type: 'CheckBox',
		label: '단가사용 여부',
		valueNm: 'prceFg',
		disabled: false,
		cols: 6,
		iconShow: true,
		class: 'py-2 pr-4',
		value: { '1': true, '0': false },
	},
	{
		type: 'CheckBox',
		label: '사용 여부',
		valueNm: 'useFg',
		disabled: false,
		cols: 6,
		iconShow: true,
		class: 'py-2 pl-4',
		value: { '1': true, '0': false },
		required: true,
	},
];
</script>
