<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"
								:parentPrgmId="myPrgmId"
							/>
						</v-col>
						<v-col :cols="3">
							<component
								label="에너지"
								:is="'SelectEnergy'"
								:parentPrgmId="myPrgmId"
							/>
						</v-col>
						<v-col :cols="3">
							<!-- 구분(사용량, 비용) -->
							<component :is="'RadioUseCost'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-col :cols="3" class="text-right">
							<BtnSearch @click="search" />
							<BtnExcelDownload
								style="vertical-align: middle;"
								class="d-inline-flex"
								:parentPrgmId="myPrgmId"
								:gridName="gridName"
							/>
						</v-col>
					</v-row>
					<v-row align="center" no-gutters>
						<v-col :cols="3">
							<component :is="'SelectCmCycle2'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-col cols="3">
							<v-row class="search-box" align="center" no-gutters>
								<v-col cols="4">
									<label for="" class="search-box-label">
										<v-icon x-small color="primary" class="mr-1"
											>mdi-record-circle</v-icon
										>
										기준일
									</label>
								</v-col>
								<v-col cols="8">
									<v-text-field
										id="startpicker"
										ref="startpicker"
										v-model="fromDtValue"
										:class="'v-input__custom'"
										:hide-details="true"
										outlined
										readonly
									>
										<template #append>
											<v-icon size="20">$icoCalendar</v-icon>
										</template>
										<template #append-outer>
											<div
												ref="startpicker-container"
												id="startpicker-container"
											></div>
										</template>
									</v-text-field>
								</v-col>
							</v-row>
						</v-col>
						<v-col cols="3">
							<v-row class="search-box" align="center" no-gutters>
								<v-col cols="4">
									<label for="" class="search-box-label">
										<v-icon x-small color="primary" class="mr-1"
											>mdi-record-circle</v-icon
										>
										비교일
									</label>
								</v-col>
								<v-col cols="8">
									<v-text-field
										id="endpicker"
										ref="endpicker"
										v-model="toDtValue"
										class="v-input__custom"
										:class="'v-input__custom'"
										:hide-details="true"
										outlined
										readonly
									>
										<template #append>
											<v-icon size="20">$icoCalendar</v-icon>
										</template>
										<template #append-outer>
											<div
												ref="endpicker-container"
												id="endpicker-container"
											></div>
										</template>
									</v-text-field>
								</v-col>
							</v-row>
						</v-col>
					</v-row>
					<v-row align="center" no-gutters>
						<v-col :cols="6">
							<!-- 공정/설비 -->
							<component
								label="비교대상"
								:is="'FtnPlcMultiPop'"
								:parentPrgmId="myPrgmId"
								:labelCols="2"
								:textCols="10"
							/>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents">
			<v-col :cols="12">
				<v-card class="pa-5">
					<div ref="chartParent" id="test2" style="height: 54%;">
						<component
							class="w100 h100"
							ref="chart1"
							:is="loadChart1 ? 'Chart' : null"
							:chartName="chartName"
							:parentPrgmId="myPrgmId"
						/>
					</div>

					<v-card-title>
						<!-- 차트와 그리드 사이 공백을 위한 공간 -->
					</v-card-title>

					<div ref="gridParent" id="test" style="height: 41%;">
						<component
							class="w100 h100"
							ref="grid1"
							:is="loadGrid1 ? 'Grid' : null"
							:gridName="gridName"
							:parentPrgmId="myPrgmId"
						/>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import mixinGlobal from '@/mixin/global';
import BtnSearch from '~/components/common/button/BtnSearch';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import SelectEnergy from '@/components/common/select/SelectEnergyForPop';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstrForPop';
import SelectCmCycle2 from '@/components/common/select/SelectCmCycle2';
import SelectDate from '~/components/common/select/SelectDate';
import SelectDateVc from '~/components/common/select/SelectDateVc';
import SelectUnit from '@/components/common/select/SelectUnit';
import FtnPlcMultiPop from '~/components/common/modal/FtnPlcMultiPop2';
import RadioUseCost from '~/components/common/RadioUseCost';
import InputText from '@/components/common/input/InputText';
import Utility from '~/plugins/utility';
import dateUtility from '~/plugins/dateUtility';
import Grid from '~/components/common/Grid';
import Chart from '~/components/common/Chart';
import TuiDatepicker from 'tui-date-picker';

let myTitle;
let myPrgmId;
export default {
	mixins: [mixinGlobal],
	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;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		BtnSearch,
		BtnExcelDownload,
		SelectBlocMstr,
		SelectEnergy,
		SelectCmCycle2,
		SelectDate,
		SelectDateVc,
		SelectUnit,
		FtnPlcMultiPop,
		RadioUseCost,
		InputText,
		Utility,
		dateUtility,
		Grid,
		Chart,
		TuiDatepicker,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			myGrid: null,
			gridName: 'grid1',
			chartName: 'chart1',
			loadGrid1: false,
			loadChart1: false,
			apiKey: 'selectSameTermReadHour',
			unit: '',
			startDatepickerInstance: null,
			endDatepickerInstance: null,
			startDtValue: null,
			endDtValue: null,
			timePicker: false,
			datePickerSearchFlag: 3,
		};
	},
	computed: {
		...mapState({
			pageData: state => state.pageData[myPrgmId],
		}),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkBlocCd() {
			// 사업장 선택 감지
			return this.pageData.blocId;
		},
		chkEnergyCd() {
			// 에너지 선택 감지
			return this.pageData.energyCd;
		},
		chkFacInfo() {
			// 공정/설비 변경 감지
			return this.pageData.facInfo;
		},
		chkCmCycle() {
			// 주기 변경 감지
			return this.pageData.cmCycle;
		},
		chkRadio() {
			// 구분: 사용량, 비용 선택 감지
			return this.pageData.rdbUseCost;
		},
		// datepicker_computed[시작]
		chkOptions() {
			let returnObj = {};
			switch (this.chkCmCycle) {
				case 'CYC_MONTH':
					returnObj = {
						type: 'year',
						viewFormat: 'YYYY',
						pickerFormat: 'YYYY',
						sendFormat: 'YYYY',
					};
					break;

				case 'CYC_WEEK':
					returnObj = {
						type: 'date',
						viewFormat: 'YYYY-MM-DD',
						pickerFormat: 'YYYY-MM-dd',
						sendFormat: 'YYYYMMDD',
					};
					break;

				case 'CYC_DAY':
					returnObj = {
						type: 'month',
						viewFormat: 'YYYY-MM',
						pickerFormat: 'yyyy-MM',
						sendFormat: 'YYYYMM',
					};
					break;

				case 'CYC_HOUR':
					returnObj = {
						type: 'date',
						viewFormat: 'YYYY-MM-DD' + (this.timePicker ? ' HH:mm:ss' : ''),
						pickerFormat: 'yyyy-MM-dd' + (this.timePicker ? ' HH:mm A' : ''),
						sendFormat: this.timePicker ? 'YYYY-MM-DD HH:mm:ss' : 'YYYYMMDD',
					};
					// returnObj = { type: "day", format: "YYYY-MM-DD HH:mm:ss" };
					break;

				default:
					break;
			}
			return returnObj;
		},
		fromDtValue() {
			return this.startDtValue;
		},
		toDtValue() {
			return this.endDtValue;
		},
		// datepicker_computed[끝]
		initFlag() {
			if (
				this.pageData.energyList.length > 0 &&
				this.pageData.blocMstrList.length > 0
			) {
				return true;
			} else {
				return false;
			}
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkCmCycle: function() {
			this.datePickerSearchFlag = 2;

			var day1 = new Date();
			var day2 = new Date();

			if (this.chkCmCycle == 'CYC_MONTH') {
				day2.setFullYear(day1.getFullYear() - 1);
			} else if (this.chkCmCycle == 'CYC_WEEK') {
				day2.setDate(day1.getDate() - 7);
			} else if (this.chkCmCycle == 'CYC_DAY') {
				day2.setMonth(day1.getMonth() - 1);
			} else if (this.chkCmCycle == 'CYC_HOUR') {
				day2.setDate(day1.getDate() - 1);
			}
			this.startDtValue = setDateWithFormat(day1, this.chkOptions.type);
			this.endDtValue = setDateWithFormat(day2, this.chkOptions.type);
			this.startDatepickerInstance.setDate(this.startDtValue);
			this.endDatepickerInstance.setDate(this.endDtValue);

			this.startDatepickerInstance.setDate(new Date(this.fromDtValue));
			this.endDatepickerInstance.setDate(new Date(this.toDtValue));
			this.startDatepickerInstance.setType(this.chkOptions.type);
			this.endDatepickerInstance.setType(this.chkOptions.type);
		},
		chkBlocCd() {
			//지우지말자
		},
		chkEnergyCd() {
			this.initUnit();
		},
		chkFacInfo() {
			this.setPageData({ isFind: true });
		},
		chkRadio() {
			// 구분: 사용량, 비용 선택 감지
			this.initUnit();
			this.setPageData({ isFind: true });
		},
		// datepicker_watch[시작]
		fromDtValue(newVal, oldVal) {
			this.datePickerSearchFlag--;

			if (this.datePickerSearchFlag == 0) {
				this.datePickerSearchFlag = 1;
				this.setPageData({ isFind: true });
			}
		},
		toDtValue(newVal, oldVal) {
			this.datePickerSearchFlag--;

			if (this.datePickerSearchFlag == 0) {
				this.datePickerSearchFlag = 1;
				this.setPageData({ isFind: true });
			}
		},
		// datepicker_watch[끝]
		initFlag(val) {
			if (val) {
				this.init();
			}
		},
	},

	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	mounted() {
		this.tuiCalendarInit();
		this.layoutInit();
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setGridData: 'setGridData',
			setGridColumn: 'setGridColumn',
			setGridOption: 'setGridOption',
			setChartXAxisData: 'setChartXAxisData',
			setChartSeries: 'setChartSeries',
			setChartOption: 'setChartOption',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postUpdateApi: 'modules/list/postUpdateApi',
			postApiReturn: 'modules/list/postApiReturn',
			setTree: 'modules/list/setTree',
			chkOpenTabList: 'chkOpenTabList',
		}),
		init() {
			this.gridInit();
		},
		tuiCalendarInit() {
			const startContainer = document.getElementById('startpicker-container');
			const startTarget = document.getElementById('startpicker');
			const endContainer = document.getElementById('endpicker-container');
			const endTarget = document.getElementById('endpicker');

			// datepicker 초기값 생성
			var day1 = new Date();
			var day2 = new Date();
			day2.setFullYear(day1.getFullYear() - 1);
			this.startDtValue = setDateWithFormat(day1, 'year');
			this.endDtValue = setDateWithFormat(day2, 'year');
			this.pageData.cmCycle = 'CYC_HOUR';
			// datepicker 초기값 생성 끝

			// datepicker 생성
			this.startDatepickerInstance = new TuiDatepicker(startContainer, {
				date: day1,
				language: 'ko',
				type: this.chkOptions.type,
				input: {
					element: startTarget,
					format: this.chkOptions.pickerFormat,
				},
				timePicker: this.timePicker,
				calendar: {
					showToday: false,
				},
			});
			// datepicker 생성
			this.endDatepickerInstance = new TuiDatepicker(endContainer, {
				date: day2,
				language: 'ko',
				type: this.chkOptions.type,
				input: {
					element: endTarget,
					format: this.chkOptions.pickerFormat,
				},
				timePicker: this.timePicker,
				calendar: {
					showToday: false,
				},
			});
			// datepicker 생성 끝

			// datepicker 변경시 이벤트 추가
			this.startDatepickerInstance.on('change', () => this.getStartDt());
			this.endDatepickerInstance.on('change', () => this.getEndDt());
		},
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 36;

			const myOptions = {
				columnOptions: {
					//frozenCount: 3,
					minWidth: 100,
					resizable: true,
				},
			};

			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.getRowGridData();
		},

		async search() {
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});

			if (this.pageData.energyCd !== '' && this.pageData.energyCd != null) {
				localStorage.setItem(
					myPrgmId + 'SelectedEnergyCd',
					this.pageData.energyCd,
				);
			}
			if (this.pageData.blocId !== '' && this.pageData.blocId != null) {
				localStorage.setItem(myPrgmId + 'SelectedBlocCd', this.pageData.blocId);
			}
		},

		async initUnit() {
			this.unit =
				this.pageData.energyList.length > 0 && this.pageData.rdbUseCost == 'use'
					? this.pageData.energyList[this.pageData.energyCd].unit
					: '원';
		},

		async getRowGridData() {
			this.loadGrid1 = false;
			this.loadChart1 = false;
			this.pageData.grid1.data = [];
			var res = [];

			var url = {};
			if (
				this.pageData.cmCycle == 'CYC_MONTH' &&
				this.pageData.facInfo.plcKind == 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameEqpmReadMonth'
						: 'selectCompareSameEqpmReadMonthCost';
			} else if (
				this.pageData.cmCycle == 'CYC_MONTH' &&
				this.pageData.facInfo.plcKind !== 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameECCReadMonth'
						: 'selectCompareSameECCReadMonthCost';
			} else if (
				this.pageData.cmCycle == 'CYC_WEEK' &&
				this.pageData.facInfo.plcKind == 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameEqpmReadWeek'
						: 'selectCompareSameEqpmReadWeekCost';
			} else if (
				this.pageData.cmCycle == 'CYC_WEEK' &&
				this.pageData.facInfo.plcKind !== 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameECCReadWeek'
						: 'selectCompareSameECCReadWeekCost';
			} else if (
				this.pageData.cmCycle == 'CYC_DAY' &&
				this.pageData.facInfo.plcKind == 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameEqpmReadDay'
						: 'selectCompareSameEqpmReadDayCost';
			} else if (
				this.pageData.cmCycle == 'CYC_DAY' &&
				this.pageData.facInfo.plcKind !== 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameECCReadDay'
						: 'selectCompareSameECCReadDayCost';
			} else if (
				this.pageData.cmCycle == 'CYC_HOUR' &&
				this.pageData.facInfo.plcKind == 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameEqpmReadTime'
						: 'selectCompareSameEqpmReadTimeCost';
			} else if (
				this.pageData.cmCycle == 'CYC_HOUR' &&
				this.pageData.facInfo.plcKind !== 'LOC_EQPM'
			) {
				url =
					this.pageData.rdbUseCost == 'use'
						? 'selectCompareSameECCReadTime'
						: 'selectCompareSameECCReadTimeCost';
			}
			this.apiKey = url;

			this.loadGrid1 = false;

			if (
				this.pageData.blocMstrList.length > 0 &&
				this.pageData.energyList.length > 0
			) {
				const selectFacInfo = this.pageData.facInfo;
				const sendParams = {
					blocId: this.pageData.blocMstrList[this.chkBlocCd].blocId,
					mttCd: this.pageData.energyList[this.chkEnergyCd].cd,
					cmCycle: this.pageData.cmCycle,
					baseDt: this.fromDtValue.replaceAll('-', ''),
					compareDt: this.toDtValue.replaceAll('-', ''),
					lang: 'ko_KR',
					menuList: selectFacInfo.eccId,
					plcCd: selectFacInfo.eccId,
					plcNm: selectFacInfo.eccNm,
				};

				if (this.pageData.facInfo) {
					res = await this.postApiReturn({
						apiKey: this.apiKey,
						resKey: 'eccDdReadReptData',
						sendParam: sendParams,
					});
				}
			} else {
				this.setPageData({ isFind: false });
			}

			let myColumns = [
				{ header: '에너지', name: 'mttNm', width: 150, align: 'center' },
				{ header: '구분', name: 'plcNm', width: 200, align: 'left' },
			];

			let timeList = [
				{
					header: '연도',
					name: 'month',
					width: 150,
					align: 'center',
					formatter({ value }) {
						if (String(value).length == 4) {
							return value + '년';
						} else {
							return value;
						}
					},
				},
				{
					header: '주차',
					name: 'week',
					width: 150,
					align: 'center',
					formatter({ value }) {
						return value;
					},
				},
				{
					header: '월',
					name: 'date',
					width: 150,
					align: 'center',
					formatter({ value }) {
						if (String(value).length == 6) {
							return value.substr(0, 4) + '/' + value.substr(4, 2);
						} else {
							return value;
						}
					},
				},
				{
					header: '일',
					name: 'date',
					width: 150,
					align: 'center',
					formatter({ value }) {
						if (String(value).length == 8) {
							return (
								value.substr(0, 4) +
								'/' +
								value.substr(4, 2) +
								'/' +
								value.substr(6, 2)
							);
						} else {
							return value;
						}
					},
				},
			];

			switch (this.pageData.cmCycle) {
				case 'CYC_MONTH':
					myColumns.push(timeList[0]);

					for (var i = 1; i < 13; i++) {
						var tempObject = {
							header: i + '월',
							name: 'corrVal' + String(i).padStart(2, '0'),
							width: 150,
							align: 'right',
							excelType: 'number',
							excelFormatter: '2',
							formatter: numberFormatter,
						};
						myColumns.push(tempObject);
					}
					break;

				case 'CYC_WEEK':
					myColumns.push(timeList[1]);
					var headerList = [
						'일요일',
						'월요일',
						'화요일',
						'수요일',
						'목요일',
						'금요일',
						'토요일',
					];

					for (var i = 1; i < 8; i++) {
						var tempObject = {
							header: headerList[i - 1],
							name: 'corrVal' + String(i).padStart(2, '0'),
							width: 150,
							align: 'right',
							excelType: 'number',
							excelFormatter: '2',
							formatter: numberFormatter,
						};
						myColumns.push(tempObject);
					}
					break;

				case 'CYC_DAY':
					myColumns.push(timeList[2]);
					for (var i = 1; i < 32; i++) {
						var tempObject = {
							header: i + '일',
							name: 'corrVal' + String(i).padStart(2, '0'),
							width: 150,
							align: 'right',
							excelType: 'number',
							excelFormatter: '2',
							formatter: numberFormatter,
						};
						myColumns.push(tempObject);
					}
					break;

				case 'CYC_HOUR':
					myColumns.push(timeList[3]);
					for (var i = 0; i < 24; i++) {
						var tempObject = {
							header: i + '시',
							name: 'corrVal' + String(i).padStart(2, '0'),
							width: 150,
							align: 'right',
							excelType: 'number',
							excelFormatter: '2',
							formatter: numberFormatter,
						};
						myColumns.push(tempObject);
					}
					break;
			}
			myColumns.push({
				header: '합계',
				name: 'corrVal',
				width: 150,
				align: 'right',
				excelType: 'number',
				excelFormatter: '2',
				formatter({ value }) {
					return Utility.setFormatIntDecimal(value, 2);
				},
			});

			if (res.length >= 1) {
				// 기준일 <-> 비교일 순서 보정[시작]
				var tempRes = [...res];
				var tempIdx;
				res = [];
				for (var i = 0; i < tempRes.length ? tempRes.length : 0; i++) {
					if (tempRes[i].date == this.fromDtValue.replaceAll('-', '')) {
						res.push({ ...tempRes[i] });
					} else {
						tempIdx = i;
					}
				}
				if (typeof tempIdx == 'number') {
					res.push({ ...tempRes[tempIdx] });
				}
				// res.push({...tempRes[tempIdx]});
				// 기준일 <-> 비교일 순서 보정[끝]
				var sumData = {
					plcNm: res[0].plcNm,
				};
				var columnList = Object.keys(res[0]);
				columnList = columnList.filter(item => item.startsWith('corrVal'));

				switch (this.pageData.cmCycle) {
					case 'CYC_MONTH':
						sumData[timeList[0].name] = '차이(기준-비교)';
						break;
					case 'CYC_WEEK':
						sumData[timeList[1].name] = '차이(기준-비교)';
						break;
					case 'CYC_DAY':
						sumData[timeList[2].name] = '차이(기준-비교)';
						break;
					case 'CYC_HOUR':
						sumData[timeList[3].name] = '차이(기준-비교)';
						break;
				}

				if (res.length >= 2) {
					for (var i = 0; i < columnList.length; i++) {
						sumData[columnList[i]] = res[0][columnList[i]];
					}

					for (var i = 0; i < columnList.length; i++) {
						sumData[columnList[i]] =
							Math.round(
								(sumData[columnList[i]] - res[1][columnList[i]]) * 100,
							) / 100;
					}
				} else {
					for (var i = 0; i < columnList.length; i++) {
						sumData[columnList[i]] = res[0][columnList[i]];
					}
				}
				res.push(sumData);

				Object.assign(res[0], {
					_attributes: { rowSpan: { mttNm: res.length, plcNm: res.length } },
				});
			}

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

			this.setGridData({
				gridKey: this.gridName,
				value: this.pageData.facInfo.blocId != undefined ? res : [],
			});

			this.loadGrid1 = true;

			this.setPageData({ isFind: false });

			this.setChartData(res);
		},

		async setChartData(data) {
			let ldString = ['(기준일)', '(비교일)'];
			var ldCount = 0;
			let xAxisData = [];
			let seriesData = [];

			let seriesDataList = [];
			let exceptionColumList = [
				'에너지',
				'구분',
				'연도',
				'월',
				'주차',
				'월',
				'일',
				'합계',
			];
			const myKey = this.pageData[this.gridName].column.filter(v => {
				return !exceptionColumList.includes(v.header);
			});

			seriesDataList = data.map(item => ({
				name:
					(this.pageData.cmCycle == 'CYC_MONTH'
						? item.month
						: this.pageData.cmCycle == 'CYC_WEEK'
						? item.week
						: this.pageData.cmCycle == 'CYC_DAY'
						? item.day
						: item.time) + ldString[ldCount++],
				type: 'line',
				data: myKey.map(obj => item[obj.name] || 0),
			}));
			var totSeriesData = [];
			for (var i = 0; i < seriesDataList.length; i++) {
				totSeriesData.push(seriesDataList[i - 1]);
			}

			xAxisData = myKey.map(obj => obj.header);
			seriesData = totSeriesData;

			var _this = this;
			function setChartOption(chartName, unitVal) {
				var option = {
					grid: {},
					xAxis: {
						type: 'category',
						data: xAxisData,
					},
					yAxis: {
						type: 'value',
						name: unitVal,
						nameLocation: 'middle',
						nameGap: 50,
						axisLabel: {
							textStyle: {
								fontSize: 10,
							},
						},
					},
					legend: {},
					series: _this.pageData.facInfo.blocId != undefined ? seriesData : [],
				};
				return option;
			}

			this.setChartOption({
				chartKey: 'chart1',
				value: setChartOption('chart1', this.unit),
			});

			this.loadChart1 = true;
		},

		getStartDt() {
			const dt = this.startDatepickerInstance.getDate();
			this.startDtValue = setDateWithFormat(dt, this.chkOptions.type);
		},
		getEndDt() {
			const dt = this.endDatepickerInstance.getDate();
			this.endDtValue = setDateWithFormat(dt, this.chkOptions.type);
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정

	blocId: null, // 사업장
	blocMstrList: [],

	energyCd: '',
	energyList: [],

	rdbUseCost: 'use',

	cmCycle: 'CYC_MONTH', // 주기
	cmCycleList: [
		{ idx: 0, text: '월', value: 'CYC_MONTH' },
		{ idx: 1, text: '주', value: 'CYC_WEEK' },
		{ idx: 2, text: '일', value: 'CYC_DAY' },
		{ idx: 3, text: '시간', value: 'CYC_HOUR' },
	],
	defaultRange: {
		CYC_MONTH: 12,
		CYC_WEEK: 7,
		CYC_DAY: 30,
		CYC_HOUR: 0,
	},

	isMulti: false, //checkBox
	facInfo: {}, // 선택된 공정/설비 데이타 리스트
	facInfoList: [],
	modalData: {}, // 모달 관련 데이타 저장소

	fromDt: '',
	toDt: '',
	dateFormat: {
		CYC_MONTH: 'YYYY',
		CYC_WEEK: 'YYYY-MM-DD',
		CYC_DAY: 'YYYY-MM',
		CYC_HOUR: 'YYYY-MM-DD',
	},

	/* Grid data 세팅 */
	// 로컬 gridName 값과 동일한 이름으로 세팅
	grid1: {
		data: [],
		column: [], // myColumns,
		option: {}, // myOptions
		defaultRow: {},
	},

	// chart 설정
	chart1: Utility.defaultChartOption(true),

	// 선택된 그룹코드 상세 데이터

	xlsFileInfo: {
		// 출력하려는 grid 와 같은 이름으로 세팅
		grid1: {
			fileName: null, // 갑이 없으면 해당 페이지 메뉴명
			sheetName: null, //  갑이 없으면 'Sheet1'
		},
	},
};

function setDateWithFormat(date, format) {
	var formattedDate = null;
	if (typeof date == 'string') {
		formattedDate = date;
	} else if (typeof date == 'object') {
		formattedDate = String(date.toISOString());
	}
	if (format == 'year') {
		formattedDate = formattedDate.substr(0, 4);
	} else if (format == 'month') {
		formattedDate = formattedDate.substr(0, 7);
	} else if (format == 'date') {
		formattedDate = formattedDate.substr(0, 10);
	}
	return formattedDate;
}

function numberFormatter({ value }) {
	return Utility.setFormatIntDecimal(value, 2);
}
</script>

<style lang="scss" scoped>
#startpicker-container,
#endpicker-container {
	position: relative;
	z-index: 20;
}
.v-input__custom {
	flex: 0 0 auto;
	&.half {
		width: calc(50% - 20px);
	}
}
::v-deep {
	.tui-timepicker-row {
		display: flex;
		justify-content: space-around;
		background-color: #edf4fc;
		.tui-timepicker-column.tui-timepicker-colon {
			color: #000 !important;
		}
	}

	.tui-grid-scrollbar-right-bottom {
		bottom: -1px !important;
	}
}
</style>
