<template>
	<div ref="mainDiv" class="l-layout">
		<CommonPageTitle />
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="end" no-gutters>
						<v-col :cols="2.5">
							<DatePicker :parentPrgmId="myPrgmId" :label="'조회연도'" />
						</v-col>
						<v-col :cols="3">
							<component
								:is="'SelectBox'"
								ref="SelectBox1"
								:propsValue="selectValue01"
								:itemList="selectValueList01"
								:label="'FAB'"
								@update:propsValue="selectValue01 = $event"
							/>
						</v-col>
						<v-col :cols="2.5">
							<component :is="'SelectBox'" ref="SelectBox2" :propsValue="selectValue02" :itemList="selectValueList02"
								:label="'설비종류'" @update:propsValue="selectValue02 = $event" :iconShow="false" customClass="select-large"/>
						</v-col>
						<v-col :cols="2.5">
							<component :is="'SelectBox'" ref="SelectBox3" :propsValue="selectValue03" :itemList="selectValueList03"
								:label="'설비그룹'" @update:propsValue="selectValue03 = $event" :iconShow="false" customClass="select-large" />
						</v-col>

						<BtnSearch size="large" @click="search" />
						<!-- <v-col>
						</v-col> -->
						<component ref="EnrgUsePlanModiPop" :is="'EnrgUsePlanModiPop'" :label="'test'" :parentPrgmId="myPrgmId"
							@gridEditingFinish="gridEditingFinish" />
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents">
			<v-col :cols="12" >
				<v-card class="pb-5">
					<div class="d-flex align-center justify-space-between pa-4">
						<v-card-title class="pa-0 custom-title-4">설비별 에너지 계획 리스트</v-card-title>
						<Buttons :parentPrgmId="myPrgmId" :bindingData="gridName" :btnActionsFnc="btnActions" />
					</div>
					<div ref="gridParent" class="px-5" style="min-height: 60vh;">
						<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
							:editorGrid="true" @getRowsData="getRowData" />
					</div>
				</v-card>
			</v-col>
		</v-row>


	</div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import SelectBox from '@/components/common/select/SelectBox';
import BtnSearch from '~/components/common/button/BtnSearch';
import DatePicker from '~/components/common/Datepicker';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';
import Buttons from '~/components/common/button/Buttons';
import EnrgUsePlanModiPop from '~/components/common/modal/EnrgUsePlanModiPop';
import DateUtility from '~/plugins/dateUtility';

let myTitle;
let myPrgmId;
let stateOfDarkMode;

export default {
	mixins: [mixinGlobal, resize],
	async asyncData(context) {
		const myState = context.store.state;
		myPrgmId = context.route.query.prgmId;
		await context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle = await myState.activeMenuInfo.menuNm;
		stateOfDarkMode = await myState.isDarkMode;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		BtnSearch,
		SelectBox,
		DatePicker,
		Grid,
		Buttons,
		EnrgUsePlanModiPop,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			darkModeFg: stateOfDarkMode,
			btnStyleDict: null,
			initedFlag: false,
			loadGrid: false,
			gridName: 'grid01',
			selectValue01: null,
			selectValueList01: [],
			selectValue02: null,
			selectValueList02: [],
			selectValue03: null,
			selectValueList03: [],
			fromDt: new Date().getFullYear(),
			rowKey: null,
			edtingFinishFlag: 'Y',
			dataPathMock: {
				// "grid01": {}
			},
			// gridName: 'rowGrid',
		};
	},
	computed: {
		// ...mapState({
		//   pageData: state => state.pageData[myPrgmId]
		// }),
		...mapState({
			isDarkMode: state => state.isDarkMode,
		}),
		chkIsDarkMode() {
			return this.isDarkMode;
		},
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkFromDt() {
			return this.pageData.fromDt;
		},
	},
	watch: {
		chkIsDarkMode(val) {
			this.darkModeFg = val;
			// this.btnStyleDict = val;
		},
		chkFromDt(val) {
			this.fromDt = val;
		},
		chkIsFind(val) {
			if (val) this.search();
		},
		async selectValue01(val) {
			if (this.initedFlag) {
				this.setPageData({ isFind: true });
			}
		},
		async selectValue02(val) {
			if (this.initedFlag) {
				this.setPageData({ eqpmKindId: val });
				await this.getEqpmGrp();
			}
		},
		async selectValue03(val) {
			if (this.initedFlag) {
				this.setPageData({ isFind: true });
			}
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() { },
	async mounted() {
		// -------
		// this.initTest();
		// return;
		// ========End test===========
		await this.init();
		this.initedFlag = true;
	},
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
			getBlocMstrList: 'modules/search/getBlocMstrList',
			getAddInfoList: 'modules/search/getAddInfoList',
		}),
		...mapMutations({
			setPageData: 'setPageData',
		}),
		initTest() {
			let _this = this;
			// _this.setPageData({ popupDialogFg: true });
			
			class MockCustumButton {
				constructor(props) {
					const { grid, rowKey, columnInfo } = props;
					const value = columnInfo.renderer.options.value;
					
					const elDiv = document.createElement('div');
					elDiv.innerHTML = `<span>${value}</span>`;
					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
					const el = document.createElement('button');
					$(el).addClass('edit-btn blue--text');
					el.innerText = 'Edit';

					el.addEventListener('click', function (event) {
						// console.log("------DEBUG----_this:", _this);
						// _this.setPageData({ eqpmNm: selectedGridData[0]?.eqpmNm });
						_this.setPageData({ popupDialogFg: true });
					});

					elDiv.appendChild(el);
					this.elDiv = elDiv;
				}

				getElement() {
					return this.elDiv;
				}
			}
			const mockData = {
				column: [
					{ header: 'No', name: 'rowNum', align: 'center', width: 40 },
					{ header: 'FAB', name: 'fab', align: 'left', width: 80 },
					{ header: '설비 그룹', name: 'eqpmGrpNm', align: 'left', minWidth: 150 },
					// {
					// 	header: '설비명', name: 'eqpmNm', align: 'left', minWidth: 150,
					// 	formatter: ({ value, row }) => {
					// 		return `
					// 				<div class="d-flex justify-space-between">
					// 					<span>${value}</span>
					// 					<button class="edit-btn blue--text" data-row='${JSON.stringify(row)}'>Edit</button
					// 				</div>
					// 			`;
					// 	}
					// },
					{
						header: '설비명',
						name: 'eqpmNm',
						width: 70,
						align: 'left',
						minWidth: 150,
						renderer: {
							type: MockCustumButton,
							options: {
								value: '계획수정',
							},
						},
					},
					{
						header: '구분', name: 'gubun', align: 'left', width: 80,
						formatter({ value }) {
							let retVal = '';
							if (value == '1RSLT') {
								retVal = '전년실적';
							} else if (value == '2PLAN') {
								retVal = '계획';
							} else {
								retVal = value;
							}
							return retVal;
						},
					},

					{ header: '1월', name: 'jan', align: 'right', width: 80 },
					{ header: '2월', name: 'feb', align: 'right', width: 80 },
					{ header: '3월', name: 'mar', align: 'right', width: 80 },
					{ header: '4월', name: 'apr', align: 'right', width: 80 },
					{ header: '5월', name: 'may', align: 'right', width: 80 },
					{ header: '6월', name: 'jun', align: 'right', width: 80 },
					{ header: '7월', name: 'jul', align: 'right', width: 80 },
					{ header: '8월', name: 'aug', align: 'right', width: 80 },
					{ header: '9월', name: 'sep', align: 'right', width: 80 },
					{ header: '10월', name: 'oct', align: 'right', width: 80 },
					{ header: '11월', name: 'nov', align: 'right', width: 80 },
					{ header: '12월', name: 'dec', align: 'right', width: 80 }
				],
				data: dataPathDataExample,
				defaultRow: dataPathDataExample,
				option: {
					columnOptions: {
						resizable: true,
					},
					header: {
						height: 65,
						complexColumns: [
							{
								header: '2025 년',
								name: 'yyyyCol',
								childNames: [
									'jan', 'feb', 'mar', 'apr', 'may', 'jun',
									'jul', 'aug', 'sep', 'oct', 'nov', 'dec'
								],
							},
						],
					}
				}
			};
			this.dataPathMock[this.gridName] = mockData;
			this.$nextTick(() => {
				this.loadGrid = true;
			});
		},
		async init() {
			await this.getFab();
			await this.getEqpmKind();
			await this.getEqpmGrp();
			await this.gridInit();
		},
		search() {
			// this.gridInit();
			this.getGridData();
			this.setPageData({
				isFind: false,
			});
		},
		async getFab() {
			let res = await this.postApiReturn({
				apiKey: 'selectFabCodeList',
				resKey: 'fabCodeLists',
				sendParam: {},
				// sendParam: {level:3},
			});
			if (res.length > 0) {
				this.selectValueList01 = await res.map(item => {
					return {
						text: item.eccNm,
						value: item.eccId,
					};
				});
				// this.selectValueList01.unshift({
				// 	text: '전체',
				// 	value: null,
				// });
				this.selectValue01 = this.selectValueList01[0].value;
			} else {
				this.selectValueList01 = [];
				this.selectValue01 = null;
			}
			this.setPageData({
				eccIdList: this.selectValueList01,
				eccId: this.selectValue01,
			});
		},
		async getEqpmKind() {
			let res = await this.postApiReturn({
				apiKey: 'selectEqpmKindCodeList',
				resKey: 'eqpmKindCodeLists',
				sendParam: {},
			});
			if (res.length > 0) {
				this.selectValueList02 = await res.map(item => {
					return {
						text: item.eqpmKindNm,
						value: item.eqpmKindId,
					};
				});
				this.selectValue02 = this.selectValueList02[0].value;
			} else {
				this.selectValueList02 = [];
				this.selectValue02 = null;
			}
			this.setPageData({
				eqpmKindList: this.selectValueList02,
				eqpmKindId: this.selectValue02,
			});
		},
		async getEqpmGrp() {
			let res = await this.postApiReturn({
				apiKey: 'selectEqpmGrpCodeList',
				resKey: 'eqpmGrpCodeLists',
				sendParam: { eqpmKindId: this.selectValue02 },
			});
			if (res.length > 0) {
				this.selectValueList03 = await res.map(item => {
					return {
						text: item.eqpmGrpNm,
						value: item.eqpmGrpId,
					};
				});
				this.selectValue03 = this.selectValueList03[0].value;
			} else {
				this.selectValueList03 = [];
				this.selectValue03 = null;
			}
			this.setPageData({
				eqpmGrpList: this.selectValueList03,
				eqpmGrpId: this.selectValue03,
			});
		},
		gridInit() {
			this.loadGrid = false;
			let _this = this;
			const gridHeight = this.$refs.gridParent.offsetHeight - 50;
			let yyyyCol = this.pageData.fromDt + '년';
			let childCols1 = [];
			let myComplexColumns = [
				{
					header: yyyyCol,
					name: 'yyyyCol',
					childNames: childCols1,
				},
				{
					header: '설비명',
					name: 'fakeEqpmNm',
					childNames: ['eqpmNm', 'btnCol'],
					hideChildHeaders: true,
				},
			];
			let myOptions = {
				columnOptions: {
					resizable: true,
				},
				header: {
					height: 65,
					complexColumns: myComplexColumns,
				},
			};

			class CustumButton {
				constructor(props) {
					const { grid, rowKey, columnInfo } = props;

					const gridData = grid.store.data.rawData;
					const value = gridData[rowKey][columnInfo.name];

					this.disabled = columnInfo.renderer.options.disabled || false;
					const elDiv = document.createElement('div');
					elDiv.innerHTML = `<span>${value}</span>`;
					$(elDiv).addClass('tui-grid-cell-content d-flex justify-space-between');
					const el2 = document.createElement('button');
					$(el2).addClass('edit-btn blue--text');
					el2.innerText = 'Edit';
					elDiv.appendChild(el2);

					this.el = elDiv;

					if (!this.disabled) {
						// click 이벤트
						el2.addEventListener('click', function (event) {
							let gridData = grid.store.data.rawData;
							let rowNum = gridData[rowKey].rowNum;
							let selectedGridData = gridData.filter(item => {
								return item.rowNum === rowNum && item.gubun == '2PLAN';
							});
							// this.popupDialogFg = true;
							_this.setPageData({ eqpmNm: selectedGridData[0].eqpmNm });
							_this.setPageData({ popupDialogFg: true });
						});
					}
				}
				getElement() {
					return this.el;
				}
				getValue() {
					// return this.el.value;
				}
				mounted() {
					// this.el.focus();
				}
			}
			let myColumns = [
				{
					header: '설비그룹ID',
					name: 'eqpmGrpId',
					width: 50,
					align: 'left',
					hidden: true,
				},
				{
					header: '설비ID',
					name: 'eqpmId',
					width: 50,
					align: 'left',
					hidden: true,
				},
				{
					header: 'NO',
					name: 'rowNum',
					width: 40,
					align: 'center',
					// hidden: true,
				},
				{
					header: 'FAB',
					name: 'fab',
					width: 100,
					align: 'left',
					// hidden: true,
				},
				{
					header: '공정명',
					name: 'eccNm',
					width: 100,
					align: 'left',
					hidden: true,
				},
				{
					header: '설비그룹',
					name: 'eqpmGrpNm',
					minwidh: 200,
					align: 'left',
					// hidden: true,
				},
				{
					header: '설비명',
					name: 'eqpmNm',
					minWidth: 200,
					align: 'left',
					// hidden: true,
					// formatter: ({ value, row }) => {
					// 	return `
					// 	<span>${value}</span>
					// 	<button class="edit-btn" data-row='${JSON.stringify(row)}'>Edit</button>
					// `;
					// }
					renderer: {
						type: CustumButton,
						options: {
							value: '계획수정',
						},
					},
				},
				{
					header: '',
					name: 'btnCol',
					width: 70,
					align: 'center',
					hidden: true,
					renderer: {
						type: CustumButton,
						options: {
							value: '계획수정',
						},
					},
					// ,editor: {
					// 	type: CustomEditor,
					// 	align: "center"
					// }
				},
				{
					header: '구분',
					name: 'gubun',
					width: 80,
					align: 'left',
					// hidden: true,
					formatter({ value }) {
						let retVal = '';
						if (value == '1RSLT') {
							retVal = '전년실적';
						} else if (value == '2PLAN') {
							retVal = '계획';
						} else {
							retVal = value;
						}
						return retVal;
					},
				},
				{
					header: 'rowStat',
					name: 'rowStat',
					hidden: true,
				},
				{
					header: 'readObjId',
					name: 'readObjId',
					hidden: true,
				},
			];

			for (var i = 1; i <= 12; i++) {
				let qty = 'qty' + i.toString().padStart(2, '0');
				myColumns.push({
					header: i.toString() + '월',
					name: qty,
					width: 73,
					align: 'right',
					editor: 'text',
					formatter: this.numberFormatter,
				});
				childCols1.push(qty);
			}
			this.setGridColumn({
				gridKey: this.gridName,
				value: myColumns,
			});
			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.$nextTick(() => {
				this.loadGrid = true;
				this.getGridData();
			});
		},
		async getRowData(data) {
			this.rowKey = data.rowKey;
			this.edtingFinishFlag = 'Y';
			// 선택한 row의 계획data만 pageData에 저장
			let gridData = this.$refs.grid01.getData();
			let selectedGridData = gridData.filter(item => {
				return item.rowNum == data.rowNum;
			});
			await this.$nextTick(() => { });
			this.setPageData({
				rowGrid2SelectData: selectedGridData,
			});

			this.setPageData({
				rowGridSelectKey: data.rowKey,
				rowGridSelectData: data,
			});

			// this.setPageData({
			// 	rowGridSelectKey: selectedGridData[1].rowKey,
			// 	rowGridSelectData: selectedGridData[1],
			// });
		},
		async getGridData() {
			let res = [];
			res = await this.postApiReturn({
				apiKey: 'selectEnrgUsePlanData',
				resKey: 'enrgUsePlanDatas',
				sendParam: {
					fromDt: this.fromDt,
					pastDt: parseInt(this.fromDt) - 1,
					eqpmGrpId: this.selectValue03,
					eccId: this.selectValue01,
				},
			});
			let fabText = this.pageData.eccIdList.filter(item => {
				return item.value == this.selectValue01;
			})[0]['text'];

			let newRes = res.map(item => {
				const newObj = {
					...item,
					rowStat: null,
					fab: fabText,
				};
				return newObj;
			});

			function setRowSpanAttribute(
				separateColStandardList,
				res,
				targetAttributeName,
				rowSpanList,
			) {
				if (!(res.length && res.length >= 2)) {
					return;
				}
				var valueList = [];
				var rowSpanValueList = [];
				var currentIdx = 0;
				for (var i = 0; i < res.length; i++) {
					valueList.push(res[i][targetAttributeName]);
				}

				function makeCurrentSeparateVal(idx, separateColStandardList) {
					let returnVal = '';
					for (var i = 0; i < separateColStandardList.length; i++) {
						returnVal += res[idx][separateColStandardList[i]];
					}
					return returnVal;
				}

				let beforeSeparateVal = makeCurrentSeparateVal(
					0,
					separateColStandardList,
				);
				rowSpanValueList[0] = [valueList[0], 1, currentIdx];
				for (var i = 1; i < valueList.length; i++) {
					currentIdx += 1;
					let currentSeparateVal = makeCurrentSeparateVal(
						i,
						separateColStandardList,
					);
					if (
						currentSeparateVal == beforeSeparateVal &&
						valueList[i] == rowSpanValueList[rowSpanValueList.length - 1][0]
					) {
						rowSpanValueList[rowSpanValueList.length - 1][1] += 1;
					} else {
						rowSpanValueList[rowSpanValueList.length] = [
							valueList[i],
							1,
							currentIdx,
						];
						beforeSeparateVal = currentSeparateVal;
					}
				}

				for (var i = 0; i < rowSpanValueList.length; i++) {
					if (rowSpanValueList[i][1] === 1) {
						continue;
					}
					if (res[rowSpanValueList[i][2]]['_attributes'] == undefined) {
						res[rowSpanValueList[i][2]]['_attributes'] = {
							rowSpan: new Object(),
						};
						//추가용
						res[rowSpanValueList[i][2]]['_attributes']['className'] = {
							column: new Object(),
						};
						for (var j = 0; j < rowSpanList.length; j++) {
							res[rowSpanValueList[i][2]]['_attributes']['className']['column'][
								rowSpanList[j]
							] = ['colrowspan'];
						}
						//추가용
					}
					res[rowSpanValueList[i][2]]['_attributes']['rowSpan'][
						targetAttributeName
					] = rowSpanValueList[i][1];
					res[rowSpanValueList[i][2]]['_attributes']['className']['column'][
						targetAttributeName
					].push(['rowrowspan']);
				}
			}
			let rowSpanList = ['rowNum', 'fab', 'eqpmGrpNm', 'eqpmNm', 'btnCol'];
			setRowSpanAttribute(['eqpmId'], newRes, 'rowNum', rowSpanList);
			setRowSpanAttribute(['rowNum'], newRes, 'fab', rowSpanList);
			setRowSpanAttribute(['rowNum'], newRes, 'eqpmGrpNm', rowSpanList);
			setRowSpanAttribute(['rowNum'], newRes, 'eqpmNm', rowSpanList);
			setRowSpanAttribute(['rowNum'], newRes, 'btnCol', rowSpanList);
			this.setGridData({
				gridKey: this.gridName,
				value: newRes,
			});
			this.$nextTick(() => {
				this.setRowDisabled();
			});

			// let temp = newRes.filter(item => {
			// 	return item.gubun=='1RSLT'
			// })
			// console.log('temp', temp);
			// for(var i=0; i<temp.length; i++){
			// 	console.log(temp.rowKey);
			// }
		},
		numberFormatter({ value }) {
			// return Utility.setFormatIntDecimal(value, 0);
			if (value === undefined || value === null || value === '') {
				return '';
			}
			var newValue = value.toString().split('.');

			// 숫자와 문자가 섞여있을 경우 구분하는 로직 추가
			var regex = /[^0-9]/g; // 숫자가 아닌 문자열을 선택하는 정규식
			for (var i = 0; i < newValue.length; i++) {
				if (regex.test(newValue[i])) {
					newValue[i] = newValue[i].toString().replace(regex, '');
				}
			}
			if (parseInt(newValue[1]) >= 5) {
				return (parseInt(newValue[0]) + 1)
					.toString()
					.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
			} else {
				return newValue[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
			}
			// return (
			// 	newValue[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +
			// 	(newValue[1] ? '.' + newValue[1] : '')
			// );
		},
		async btnActions(action) {
			let dataArr = [];
			switch (action) {
				case 'save':
					if (this.edtingFinishFlag == 'Y') {
						await this.$refs[this.gridName].editingFinish({
							rowKey: this.rowKey,
						});
					}
					// let temp = this.$refs[this.gridName].getData();
					dataArr = this.$refs[this.gridName].save();
					var validCheck = true;
					if (dataArr.length > 0) {
						dataArr.filter(item => {
							if (item.eqpmGrpId == '' || item.eqpmId == null) {
								alert('필수 입력값을 입력해주세요.');
								validCheck = false;
							}
						});
						let dataList = [];
						for (var i = 0; i < dataArr.length; i++) {
							if (dataArr[i]['gubun'] == '2PLAN') {
								for (var j = 1; j <= 12; j++) {
									let temp = {};
									let qty = 'qty' + j.toString().padStart(2, '0');
									temp['eqpmId'] = dataArr[i]['eqpmId'];
									temp['readObjId'] = dataArr[i]['readObjId'];
									temp['objMm'] =
										this.pageData.fromDt + j.toString().padStart(2, '0');
									temp['rowStat'] = dataArr[i]['rowStat'];
									temp['planVal'] =
										dataArr[i][qty] == ''
											? null
											: parseInt(dataArr[i][qty]) == 0
												? 0
												: dataArr[i][qty];
									dataList.push(temp);
								}
							}
						}
						// console.log('dataList', dataList);
						// 		// dataArr[i]
						// }
						if (validCheck) {
							const sendParam = {
								datas: {
									dsEmsEqpmMmPlanDatas: dataList,
								},
								params: {},
							};
							await this.postUpdateApi({
								apiKey: 'saveEmsEqpmMmPlanDatas',
								sendParam: sendParam,
							});

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

				default:
					break;
			}
		},
		gridEditingFinish(data) {
			this.$refs[this.gridName].editingFinish(data);
		},
		setRowDisabled() {
			let gridData = this.$refs[this.gridName].getData();
			let rowKeyList = gridData
				.filter(item => {
					return item.gubun == '1RSLT';
				})
				.map(item => item.rowKey);
			for (var i = 0; i < rowKeyList.length; i++) {
				this.$refs[this.gridName].disableRow(rowKeyList[i]);
			}
			if (gridData.length > 0) {
				try {
					this.$refs[this.gridName].focus({
						//rowKey: 0,
						rowKey: 0,
						setScroll: true,
					});
				} catch (error) {
					console.log('error[nextTick grid] : ', error);
				}
			}
		},
	},
};
const dt = new Date();
const yyyy = dt.getFullYear();
const defaultData = {
	isFind: false, // true 경우 조회
	/* 검색옵션 */
	cmCycle: 'CYC_YEAR', // DatePicker 옵션
	fromDt: `${yyyy}`, // DatePicker 옵션
	eccIdList: [], // FAB
	eccId: '', // FAB
	eqpmKindList: [], // 설비종류
	eqpmKindId: '', // 설비종류
	eqpmGrpList: [], // 설비그룹
	eqpmGrpId: '', // 설비그룹

	// Grid에서 선택된 데이터
	rowGridSelectKey: 0,
	rowGridSelectData: null,
	rowGrid2SelectData: [
		{
			gubun: '',
			eccNm: '',
			eqpmGrpId: '',
			eqpmGrpNm: '',
			eqpmId: '',
			eqpmNm: '',
			qty01: '',
			qty02: '',
			qty03: '',
			qty04: '',
			qty05: '',
			qty06: '',
			qty07: '',
			qty08: '',
			qty09: '',
			qty10: '',
			qty11: '',
			qty12: '',
			btnCol: '',
			rowStat: null,
		},
	],

	// popup dialog flag
	popupDialogFg: false,
	eqpmNm: '',

	//grid 설정
	grid01: {
		data: [],
		column: [],
		option: { header: { complexColumns: [] } },
		defaultRow: {
			gubun: '',
			eccNm: '',
			eqpmGrpId: '',
			eqpmGrpNm: '',
			eqpmId: '',
			eqpmNm: '',
			qty01: '',
			qty02: '',
			qty03: '',
			qty04: '',
			qty05: '',
			qty06: '',
			qty07: '',
			qty08: '',
			qty09: '',
			qty10: '',
			qty11: '',
			qty12: '',
			btnCol: '',
			rowStat: null,
		},
		buttonAuth: {
			add: false,
			remove: false,
			save: true,
			excel: false,
		},
	},
};

const dataPathDataExample = [
	{
		rowNum: 1,
		fab: 'B01',
		eqpmGrpNm: '방송기술운',
		eqpmNm: 'U/T_LT_CH101',
		gubun: '전력량',
		jan: 110000,
		feb: 112000,
		mar: 115000,
		apr: 117000,
		may: 120000,
		jun: 118000,
		jul: 119000,
		aug: 121000,
		sep: 122000,
		oct: 123000,
		nov: 124000,
		dec: 125000
	},
	{
		rowNum: 2,
		fab: 'B02',
		eqpmGrpNm: '방송기술운',
		eqpmNm: 'U/T_LT_CH102',
		gubun: '전력량',
		jan: 81000,
		feb: 82000,
		mar: 83000,
		apr: 84000,
		may: 85000,
		jun: 86000,
		jul: 87000,
		aug: 88000,
		sep: 89000,
		oct: 90000,
		nov: 91000,
		dec: 92000
	},
	{
		rowNum: 3, fab: 'C01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH124', gubun: '수도량',
		jan: 106178, feb: 104740, mar: 92283, apr: 116081, may: 98945, jun: 126579,
		jul: 90690, aug: 124243, sep: 97524, oct: 84072, nov: 88160, dec: 118183
	},
	{
		rowNum: 4, fab: 'B01', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH103', gubun: '가스량',
		jan: 80442, feb: 102867, mar: 114939, apr: 106335, may: 81743, jun: 83711,
		jul: 86114, aug: 97432, sep: 84146, oct: 84775, nov: 117921, dec: 119417
	},
	{
		rowNum: 5, fab: 'B01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH156', gubun: '전력량',
		jan: 90341, feb: 94072, mar: 122754, apr: 85471, may: 90813, jun: 116831,
		jul: 90856, aug: 109437, sep: 94029, oct: 96075, nov: 127067, dec: 102503
	},
	{
		rowNum: 6, fab: 'B03', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH183', gubun: '가스량',
		jan: 104163, feb: 107012, mar: 104631, apr: 83055, may: 106311, jun: 117306,
		jul: 86434, aug: 117087, sep: 118414, oct: 91499, nov: 93829, dec: 94192
	},
	{
		rowNum: 7, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH158', gubun: '가스량',
		jan: 84821, feb: 128234, mar: 116883, apr: 116718, may: 114738, jun: 88297,
		jul: 93840, aug: 84700, sep: 98360, oct: 87021, nov: 113098, dec: 94734
	},
	{
		rowNum: 8, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH179', gubun: '가스량',
		jan: 128714, feb: 88797, mar: 124808, apr: 109283, may: 113141, jun: 82873,
		jul: 114993, aug: 129108, sep: 100885, oct: 125730, nov: 92127, dec: 122286
	},
	{
		rowNum: 9, fab: 'C01', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH191', gubun: '전력량',
		jan: 107258, feb: 108424, mar: 113604, apr: 116648, may: 124149, jun: 129978,
		jul: 112215, aug: 129602, sep: 93551, oct: 111272, nov: 89736, dec: 128423
	},
	{
		rowNum: 10, fab: 'B02', eqpmGrpNm: '방송기술운', eqpmNm: 'U/T_LT_CH104', gubun: '전력량',
		jan: 82089, feb: 102793, mar: 96784, apr: 85238, may: 86153, jun: 123849,
		jul: 115095, aug: 129484, sep: 102109, oct: 80976, nov: 119841, dec: 106309
	},
	{
		rowNum: 11, fab: 'C02', eqpmGrpNm: '전력관리부', eqpmNm: 'U/T_LT_CH139', gubun: '전력량',
		jan: 128592, feb: 95647, mar: 85982, apr: 126824, may: 87928, jun: 128967,
		jul: 94637, aug: 107530, sep: 122533, oct: 97546, nov: 112110, dec: 126250
	},
	{
		rowNum: 12, fab: 'C01', eqpmGrpNm: '설비운영팀', eqpmNm: 'U/T_LT_CH109', gubun: '전력량',
		jan: 106530, feb: 91716, mar: 111104, apr: 102663, may: 108912, jun: 91464,
		jul: 121245, aug: 90785, sep: 120586, oct: 105718, nov: 96191, dec: 111513
	}
];

</script>
<style lang="scss" scoped>
@import '@/assets/scss/var.scss';

@each $theme in dark, light {
	.v-application.#{$theme}-mode {
		.tui-grid {

			&-row-odd,
			&-row-even {
				&:hover>.colrowspan {
					background-color: map-deep-get($config,
						#{$theme},
						'tui-grid-cell-backgroundColor'
					) !important;

					.tui-grid-cell-content {
						color: map-deep-get($config, #{$theme}, 'activate') !important;
					}
				}
			}

			&-cell {
				&.row-selected.colrowspan {
					background-color: map-deep-get($config,
						#{$theme},
						'tui-grid-cell-backgroundColor'
					) !important;

					.tui-grid-cell-content {
						color: map-deep-get($config, #{$theme}, 'activate') !important;
					}
				}
			}
		}
	}
}
</style>
