<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'" :parentPrgmId="myPrgmId" />
						</v-col>
						<v-col :cols="3">
							<component
								:is="'SelectEnergy'"
								:parentPrgmId="myPrgmId"
								:label="'검침대상'"
							/>
						</v-col>
						<v-col :cols="3"> </v-col>
						<v-col :cols="3" class="text-right">
							<v-btn :ripple="false" @click="searchInit">초기화</v-btn>
							<v-btn :ripple="false" @click="search">조회</v-btn>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="enrgUseViewFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="center" no-gutters>
						<v-col :cols="2">
							<div class="v-box " style="width:100%; min-width: 100px">
								<div class="text-center" style="width:100%">
									<strong class="custom-title-8" style="text-align: center;"
										>누적 사용량</strong
									>
								</div>
							</div>
						</v-col>
						<v-col :cols="10">
							<v-row align="center" no-gutters>
								<v-col
									:cols="3"
									v-for="item in engrCumuUseInfo"
									:key="item.name"
								>
									<v-row align="center" no-gutters>
										<v-col :cols="6">
											<div class="v-box " style="width:95%; min-width: 100px">
												<div class="text-center" style="width:100%">
													<strong
														class="custom-title-8"
														style="text-align: center;"
														>{{ item.readObjNm }}</strong
													>
												</div>
											</div>
										</v-col>
										<v-col :cols="6">
											<div class="v-box " style="width:95%; min-width: 100px">
												<div class="text-right" style="width:100%">
													<strong
														class="custom-title-8"
														style="text-align: ritht;"
														>{{ formatIntDecimal(item.totVal)
														}}<span class="body-2">
															{{ item.unit }}</span
														></strong
													>
												</div>
											</div>
										</v-col>
									</v-row>
								</v-col>
							</v-row>
						</v-col>
					</v-row>
					<v-row align="center" no-gutters>
						<v-col :cols="2">
							<div class="v-box " style="width:100%; min-width: 100px">
								<div class="text-center" style="width:100%">
									<strong class="custom-title-8" style="text-align: center;"
										>누적 비용</strong
									>
								</div>
							</div>
						</v-col>
						<v-col :cols="10">
							<v-row align="center" no-gutters>
								<v-col
									:cols="3"
									v-for="item in engrCumuUseInfo"
									:key="item.name"
								>
									<v-row align="center" no-gutters>
										<v-col :cols="6">
											<div class="v-box " style="width:95%; min-width: 100px">
												<div class="text-center" style="width:100%">
													<strong
														class="custom-title-8"
														style="text-align: center;"
														>{{ item.readObjNm }}</strong
													>
												</div>
											</div>
										</v-col>
										<v-col :cols="6">
											<div class="v-box " style="width:95%; min-width: 100px">
												<div class="text-right" style="width:100%">
													<strong
														class="custom-title-8"
														style="text-align: ritht;"
														>{{ formatIntDecimal(item.totCostVal)
														}}<span class="body-2"> 원</span></strong
													>
												</div>
											</div>
										</v-col>
									</v-row>
								</v-col>
							</v-row>
						</v-col>
					</v-row>
					<v-row align="center" no-gutters>
						<v-col :cols="2">
							<div class="v-box " style="width:100%; min-width: 100px">
								<div class="text-center" style="width:100%">
									<strong class="custom-title-8" style="text-align: center;"
										>현재 사용량</strong
									>
								</div>
							</div>
						</v-col>
						<v-col :cols="10">
							<v-row align="center" no-gutters>
								<v-col :cols="3" v-for="item in engrUseInfo" :key="item.name">
									<v-row align="center" no-gutters>
										<v-col :cols="6">
											<div class="v-box " style="width:95%; min-width: 100px">
												<div class="text-center" style="width:100%">
													<strong
														class="custom-title-8"
														style="text-align: center;"
														>{{ item.readObjNm }}</strong
													>
												</div>
											</div>
										</v-col>
										<v-col :cols="6">
											<div class="v-box " style="width:95%; min-width: 100px">
												<div class="text-right" style="width:100%">
													<strong
														class="custom-title-8"
														style="text-align: right;"
														>{{ formatIntDecimal(item.totVal)
														}}<span class="body-2">
															{{ item.unit }}</span
														></strong
													>
												</div>
											</div>
										</v-col>
									</v-row>
								</v-col>
							</v-row>
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents" :eager="true">
			<v-col style="height:100%;" :cols="6">
				<v-card class="px-5 py-5">
					<div ref="chartParent" id="test2" style="height: 100%;">
						<component
							class="w100 h100"
							:is="loadChart ? 'Chart' : null"
							:parentPrgmId="myPrgmId"
							:chartName="chartName"
							ref="chartName"
							@click="chartClick"
						/>
					</div>
				</v-card>
			</v-col>
			<v-col style="height:100%;" :cols="6">
				<v-card class="px-5 py-5" style="height:100%;">
					<div ref="gridParent" class="px-5" style="height: 100%;">
						<component
							id="selectEccIaoInfo"
							:is="loadGrid ? 'Grid' : null"
							:gridName="gridName"
							:parentPrgmId="myPrgmId"
						/>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>
<script>
import mixinGlobal from '@/mixin/global.js';
import { mapState, mapMutations, mapActions } from 'vuex';
import Search from '~/components/common/search';
import SelectBlocMstr from '@/components/common/select/SelectBlocMstr';
import SelectEnergy from '@/components/common/select/SelectEnergy';
import Chart from '~/components/common/Chart';
import Grid from '~/components/common/Grid';
import Utility from '~/plugins/utility';

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: {
		SelectBlocMstr,
		SelectEnergy,
		Chart,
		Grid,
		Search,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			loadChart: false,
			loadGrid: false,
			gridName: 'rowGrid',
			chartName: 'sunburstChart',
			// 바인딩 (사용량 표시용)
			engrCumuUseInfo: [
				{ readObjNm: 'test', totVal: 0, totCostVal: 0, unit: 'kWh' },
			],
			engrUseInfo: [
				{ readObjNm: 'test', totVal: 0, totCostVal: 0, unit: 'kWh' },
			],
		};
	},
	computed: {
		...mapState({
			isDarkMode: state => state.isDarkMode,
			pageData: state => state.pageData[myPrgmId],
		}),
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkBlocCd() {
			// 사업장 코드
			return this.pageData.blocId;
		},
		chkEnergyCd() {
			// 에너지 선택 여부 감지
			return this.pageData.energyCd;
		},
		chkUpEccId() {
			return this.pageData.upEccId;
		},
		chkDarkMode() {
			return this.isDarkMode;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkBlocCd() {
			this.setPageData({ isFind: true });
		},
		chkEnergyCd() {
			this.setPageData({ isFind: true });
		},
		chkUpEccId() {
			this.setPageData({ isFind: true });
		},
		chkDarkMode() {
			this.setPageData({ isFind: true });
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() {
		//this.timer= setInterval(this.searchTimer, 10000); //5분 주기마다 갱신
	},
	mounted() {
		this.init();
	},
	beforeDestroy() {
		this.cancelAutoUpdate();
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setChartOption: 'setChartOption',
			setChartTitle: 'setChartTitle',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postUpdateApi: 'modules/list/postUpdateApi',
			postApiReturn: 'modules/list/postApiReturn',
			chkOpenTabList: 'chkOpenTabList',
		}),
		cancelAutoUpdate() {
			clearInterval(this.timer);
		},
		init() {
			this.layoutInit();
			this.gridInit();
			this.getChartData();
			this.getEnrgUseInfo();
		},
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 36;

			const myOptions = {
				columnOptions: {
					resizable: true,
				},
				scrollX: false,
			};
			this.setGridOption({
				gridKey: this.gridName,
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName,
				value: [
					{ header: '공정명', name: 'eccNm', width: 100 },
					{ header: '구분', name: 'inProdKindNm', width: 100, align: 'center' },
					{ header: '개소명', name: 'objNm', width: 330 },
					{ header: '에너지원', name: 'readObjNm', width: 80, align: 'center' },
					{
						header: '순시값',
						name: 'instantVal',
						width: 100,
						align: 'right',
						formatter({ value }) {
							return Utility.setFormatIntDecimal(value, 2);
						},
					},
				],
			});
		},
		setRowSpanAttribute(res, targetAttributeName, targetAttributeList) {
			if (!(res.length && res.length >= 1)) {
				return;
			}
			if (targetAttributeList == undefined) {
				var currentCnt = 1;
				var currentIdx = 0;
				var currentValue = res[0][targetAttributeName];
				for (var i = 1; i < res.length; i++) {
					if (res[i][targetAttributeName] != currentValue) {
						if (res[currentIdx]['_attributes'] == undefined) {
							if (currentCnt > 1) {
								res[currentIdx]['_attributes'] = { rowSpan: new Object() };
							}
						}
						if (res[currentIdx]['_attributes'] != undefined) {
							res[currentIdx]['_attributes']['rowSpan'][
								targetAttributeName
							] = currentCnt;
						}
						currentValue = res[i][targetAttributeName];
						currentCnt = 1;
						currentIdx = i; //0
					} else if (
						res[i][targetAttributeName] == currentValue &&
						i == res.length - 1
					) {
						currentCnt = currentCnt + 1;
						if (res[currentIdx]['_attributes'] == undefined) {
							res[currentIdx]['_attributes'] = { rowSpan: new Object() };
						}
						res[currentIdx]['_attributes']['rowSpan'][
							targetAttributeName
						] = currentCnt;
					} else {
						currentCnt = currentCnt + 1;
					}
				}
			} else {
				var currentCnt = 1;
				var currentIdx = 0;
				for (var i = 1; i < res.length; i++) {
					if (!compareValue(res, targetAttributeList, currentIdx, i)) {
						if (res[currentIdx]['_attributes'] == undefined) {
							res[currentIdx]['_attributes'] = { rowSpan: new Object() };
						}
						if (currentCnt != 1) {
							res[currentIdx]['_attributes']['rowSpan'][
								targetAttributeName
							] = currentCnt;
						}
						currentCnt = 1;
						currentIdx = i;
					} else if (
						compareValue(res, targetAttributeList, currentIdx, i) &&
						i == res.length - 1
					) {
						currentCnt = currentCnt + 1;
						if (res[currentIdx]['_attributes'] == undefined) {
							res[currentIdx]['_attributes'] = { rowSpan: new Object() };
						}
						if (currentCnt != 1) {
							res[currentIdx]['_attributes']['rowSpan'][
								targetAttributeName
							] = currentCnt;
						}
					} else {
						currentCnt = currentCnt + 1;
					}
				}
			}
			function compareValue(res, targetAttributeList, currentIdx, targetIdx) {
				for (var i = 0; i < targetAttributeList.length; i++) {
					if (
						res[currentIdx][targetAttributeList[i]] !=
						res[targetIdx][targetAttributeList[i]]
					) {
						return false;
					}
				}
				return true;
			}
		},
		async getRowGridData() {
			let res = [];
			res = await this.postApiReturn({
				apiKey: 'selectEnrgEccUseInfo',
				resKey: 'enrgEccUseInfoData',
				sendParam: {
					eccId: this.pageData.eccId,
					readObjId: this.pageData.energyList[this.pageData.energyCd].cd,
					blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
				},
			});

			this.setRowSpanAttribute(res, 'eccNm');
			this.setGridData({
				gridKey: this.gridName,
				value: res,
			});
			this.loadGrid = true;
		},
		layoutInit() {
			const searchFilterHeight = this.$refs.searchFilter.offsetHeight;
			const enrgUseViewFilterHeight = this.$refs.enrgUseViewFilter.offsetHeight;
			this.$refs.contents.style.height = `calc(100% - ${searchFilterHeight}px - ${enrgUseViewFilterHeight}px`;
		},
		formatIntDecimal(val) {
			return Utility.setFormatIntDecimal(val, 2);
		},
		// 누적 사용량 및 비용 조회
		async getEnrgUseInfo() {
			// selectEnrgUseInfo
			const res = await this.postApiReturn({
				apiKey: 'selectEnrgUseInfo',
				resKey: 'enrgUseInfoData',
				sendParam: {},
			});
			if (res != null && res['enrgCumuUseValueInfo'] != null) {
				this.engrCumuUseInfo = res['enrgCumuUseValueInfo'];
				this.engrUseInfo = res['enrgUseValueInfo'];
			}
		},
		// 에너지 계통 실시간 조회
		async getChartData() {
			this.loadChart = false;

			let res = [];
			if (
				this.pageData.blocMstrList.length > 0 &&
				this.pageData.energyList.length > 0
			) {
				res = await this.postApiReturn({
					apiKey: 'selectEnrgUseMonitoringInfo',
					resKey: 'enrgUseMonitoringInfoTreeData',
					sendParam: {
						upEccId: this.pageData.upEccId,
						readObjId: this.pageData.energyList[this.pageData.energyCd].cd,
						blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
					},
				});
			}
			this.setPageData({ isFind: false });
			this.setChartData(res);
			this.loadChart = true;
			this.loadGrid = true;
		},
		async setChartData(data) {
			let makeData = [];
			this.pageData.colorInx1st = 0;
			this.pageData.colorInx2st = 0;

			for (var idx in data) {
				if (data[idx].upEccId == 'ROOT') {
					for (var idxSub in data[idx]['childeVo']) {
						makeData.push(
							this.makeData(null, data[idx]['childeVo'][idxSub]).data,
						);
					}
				} else {
					makeData.push(his.makeData(null, data[idx]).data);
				}
			}
			const option = {
				series: [
					{
						type: 'sunburst',
						data: makeData,
						radius: [0, '95%'],
						sort: undefined,
						emphasis: {
							focus: 'ancestor',
						},
						levels: [
							{},
							{
								r0: '15%',
								r: '30%',
								itemStyle: {
									borderWidth: 2,
								},
								label: {
									rotate: 'tangential',
								},
							},
							{
								r0: '30%',
								r: '45%',
								label: {
									align: 'right',
								},
							},
							{
								r0: '45%',
								r: '60%',
								label: {
									align: 'right',
								},
							},
							{
								r0: '60%',
								r: '75%',
								label: {
									align: 'right',
								},
							},
							{
								r0: '75%',
								r: '77%',
								label: {
									position: 'outside',
									padding: 3,
									silent: false,
								},
								itemStyle: {
									borderWidth: 3,
								},
							},
						],
					},
				],
			};

			this.setChartOption({ chartKey: this.chartName, value: option });
			this.loadChart = true;
		},
		async setChartSeriesData(data) {
			let makeData = [];

			this.pageData.colorInx1st = 0;
			this.pageData.colorInx2st = 0;
			for (var idx in data) {
				if (data[idx].upEccId == 'ROOT') {
					for (var idxSub in data[idx]['childeVo']) {
						makeData.push(
							this.makeData(null, data[idx]['childeVo'][idxSub]).data,
						);
					}
				} else {
					makeData.push(this.makeData(null, data[idx]).data);
				}
			}
			const seriesData = {
				type: 'sunburst',
				data: makeData,
				radius: [0, '95%'],
				sort: undefined,
				emphasis: {
					focus: 'ancestor',
				},
				levels: [
					{},
					{
						r0: '15%',
						r: '35%',
						itemStyle: {
							borderWidth: 2,
						},
						label: {
							rotate: 'tangential',
						},
					},
					{
						r0: '35%',
						r: '70%',
						label: {
							align: 'right',
						},
					},
					{
						r0: '70%',
						r: '73%',
						label: {
							position: 'outside',
							padding: 3,
							silent: false,
						},
						itemStyle: {
							borderWidth: 3,
						},
					},
					{
						r0: '73%',
						r: '75%',
						label: {
							position: 'outside',
							padding: 3,
							silent: false,
						},
						itemStyle: {
							borderWidth: 3,
						},
					},
				],
			};

			this.setChartSeries({ chartKey: this.chartName, value: seriesData });
		},
		search() {
			let urlPath = this.$router.currentRoute.fullPath;
			let index = urlPath.indexOf('/ems/base/EnrgUseMonitoringMngPage');
			if (index >= 0) {
				this.getChartData();
			}
		},
		searchInit() {
			this.pageData.upEccId = 'ROOT';
		},
		async searchTimer() {
			let urlPath = this.$router.currentRoute.fullPath;
			let index = urlPath.indexOf('/ems/base/EnrgUseMonitoringMngPage');
			if (index >= 0) {
				let res = [];
				if (
					this.pageData.blocMstrList.length > 0 &&
					this.pageData.energyList.length > 0
				) {
					res = await this.postApiReturn({
						apiKey: 'selectEnrgUseMonitoringInfo',
						//resKey:"enrgUseMonitoringInfoData",
						resKey: 'enrgUseMonitoringInfoTreeData',
						// sendParm : sendParams
						sendParam: {
							upEccId: this.pageData.upEccId,
							readObjId: this.pageData.energyList[this.pageData.energyCd].cd,
							// sh_blocCd:"BL0001"
							blocId: this.pageData.blocMstrList[this.pageData.blocId].blocId,
						},
					});
				}
				this.setPageData({ isFind: false });
				this.setChartSeriesData(res);
				this.loadChart = true;
				this.loadGrid = true;
			}
		},
		setView(value) {
			this.isFind = true;
		},
		makeData(parentsVo, chlVo) {
			let retVal = {};
			//console.log("chlVo.has('childeVo') : ", chlVo["childeVo"]);
			if (chlVo['childeVo'] != null || chlVo['childeVo'] != undefined) {
				// 하위 자료가 있으면
				let subSum = 0;
				let chartChildren = [];
				for (var idx in chlVo['childeVo']) {
					let subRet = this.makeData(chlVo, chlVo['childeVo'][idx]);
					subSum += subRet.value;
					chartChildren.push(subRet.data);
				}

				if (chlVo.instantVal > subSum) {
					//chartChildren.push(this.makeDataOverVal(parentsVo, chlVo, chlVo.instantVal - subSum));
				}
				const chartColor = this.getColor();

				const chdData = {
					name: this.labelGen(chlVo.eccNm, 10),
					eccId: chlVo.eccId,
					upEccId: chlVo.upEccId,
					objKind: chlVo.objKind,
					children: chartChildren,
					value:
						chlVo.instantVal == null ||
						chlVo.instantVal == 0 ||
						chlVo.instantVal < subSum
							? subSum
							: chlVo.instantVal,
					itemStyle: {
						color: chartColor,
						curveness: 0.5,
					},
					tooltip: {
						formatter:
							chlVo.eccNm +
							'<br />순시 :' +
							Utility.setFormatIntDecimal(chlVo.instantVal, 2) +
							'<br />적산 :' +
							Utility.setFormatIntDecimal(chlVo.addupVal, 2),
					},
				};
				retVal = {
					data: chdData,
					value:
						chlVo.instantVal == null ||
						chlVo.instantVal == 0 ||
						chlVo.instantVal < subSum
							? subSum
							: chlVo.instantVal,
				};
			} else {
				// 하위 자료가 없으면.
				const chartColor = this.getColor();
				const chdData = {
					// name: chlVo.maxLvl > chlVo.lvl ?  this.labelGen(chlVo.eccNm, 10) : chlVo.eccNm,
					eccId: chlVo.eccId,
					upEccId: chlVo.upEccId,
					objKind: chlVo.objKind,
					value: chlVo.instantVal == null ? 0 : chlVo.instantVal,
					itemStyle: {
						color: chartColor,
						curveness: 0.5,
					},
					tooltip: {
						formatter:
							chlVo.eccNm +
							'<br />순시 :' +
							Utility.setFormatIntDecimal(chlVo.instantVal, 2) +
							'<br />적산 :' +
							Utility.setFormatIntDecimal(chlVo.addupVal, 2),
					},
				};
				retVal = {
					data: chdData,
					value: chlVo.instantVal == null ? 0 : chlVo.instantVal,
				};
			}

			return retVal;
		},
		makeDataOverVal(parentsVo, chlVo, otherVal) {
			const chdData = {
				name: chlVo.eccNm + '_미검침 사용량',
				eccId: chlVo.eccId + '_OTHER',
				upEccId: chlVo.upEccId,
				downPlcCnt: 0,
				value: 1,
				itemStyle: {
					color: '#FF0000',
					curveness: 0.5,
				},
				tooltip: {
					formatter:
						chlVo.eccNm +
						'_미검침 사용량<br />순시 :' +
						Utility.setFormatIntDecimal(otherVal, 2),
				},
			};

			return chdData;
		},
		getColor() {
			let retColor = '';
			if (this.pageData.colorInx1st > 4) {
				this.pageData.colorInx1st = 0;
				this.pageData.colorInx2st += 1;
			}
			if (this.pageData.colorInx2st > 9) {
				this.pageData.colorInx2st = 0;
				this.pageData.colorInx1st += 1;
			}

			if (this.isDarkMode) {
				retColor = this.pageData.darkColorSet[this.pageData.colorInx1st][
					this.pageData.colorInx2st
				];
			} else {
				retColor = this.pageData.lightColorSet[this.pageData.colorInx1st][
					this.pageData.colorInx2st
				];
			}
			this.pageData.colorInx1st += 1;
			return retColor;
		},
		labelGen(value, splitLangth) {
			let retVal = '';
			let subStrInx = 0;
			if (value.length <= splitLangth) {
				retVal = value;
			} else {
				subStrInx = this.sliceByByte(value, splitLangth);
				retVal +=
					value.substring(0, subStrInx) +
					'\n' +
					this.labelGen(value.substring(subStrInx + 1), splitLangth);
			}

			return retVal;
		},
		labelGen2(value, splitLangth, maxLineLength) {
			let retVal = '';
			let sumLength = 0;
			let subStrInx = 0;
			let splitVal = value.split(' ');
			for (let idx in splitVal) {
				if (splitVal[idx].length >= splitLangth) {
				} else {
				}
			}

			return retVal;
		},
		sliceByByte(str, maxByte) {
			let b = 0;
			let i = 0;
			let c = '';
			for (b = i = 0; (c = str.charCodeAt(i)); ) {
				b += c >> 7 ? 2 : 1;
				if (b > maxByte) {
					break;
				}
				i++;
			}

			return i;
		},
		chartClick(evnet) {
			//console.log(evnet.componentType, evnet.componentIndex, this.pageData.upEccId, this.pageData.parentsEccId);
			if (evnet.componentType == 'series' && evnet.data.eccId != undefined) {
				this.pageData.eccId = evnet.data.eccId;
				this.pageData.upEccId = evnet.data.upEccId;

				this.getRowGridData();
			} else if (
				evnet.componentType == 'series' &&
				evnet.data.eccId == undefined &&
				evnet.data.children != undefined &&
				evnet.data.children.length > 0
			) {
				this.pageData.eccId = '';
				this.getRowGridData();
			}
		},
	},
};

const defaultData = {
	/* 검색옵션 */
	eccId: '',
	upEccId: 'ROOT',
	parentsEccId: 'ROOT',
	energyCd: 'ROI000001',
	energyList: [],
	blocId: '',
	blocMstrList: [],

	viewCheck: 'viewAll',

	isFind: false, // true 경우 조회, 조회버튼도 이 값으로 연동 예정

	colorInx1st: 0,
	colorInx2st: 0,

	/*chartdata 세팅 */
	sunburstChart: {
		type: 'sunburst',
		data: [],
		radius: [0, '95%'],
		sort: undefined,
		emphasis: {
			focus: 'ancestor',
		},
		levels: [
			{},
			{
				r0: '15%',
				r: '35%',
				itemStyle: {
					borderWidth: 2,
				},
				label: {
					rotate: 'tangential',
				},
			},
			{
				r0: '35%',
				r: '55%',
				label: {
					align: 'right',
				},
			},
			{
				r0: '55%',
				r: '75%',
				label: {
					align: 'right',
				},
			},
			{
				r0: '75%',
				r: '77%',
				label: {
					position: 'outside',
					padding: 3,
					silent: false,
				},
				itemStyle: {
					borderWidth: 3,
				},
			},
		],
	},

	darkColorSet: [
		[
			'#01AE6A',
			'#04A166',
			'#089362',
			'#0B865D',
			'#0F7959',
			'#126C55',
			'#165E51',
			'#19514D',
			'#1D4448',
			'#1F3D46',
		],
		[
			'#FFB046',
			'#EAA345',
			'#D39545',
			'#BE8844',
			'#A77A44',
			'#926D43',
			'#7C5F42',
			'#665242',
			'#4C4141',
			'#453D41',
		],
		[
			'#F6637B',
			'#E15D75',
			'#CC576F',
			'#B75269',
			'#A24C63',
			'#8D465E',
			'#784058',
			'#633B52',
			'#4E354C',
			'#433249',
		],
		[
			'#944FE9',
			'#894BD8',
			'#7E47C7',
			'#7344B7',
			'#6740A5',
			'#5C3C95',
			'#513884',
			'#463473',
			'#3A3162',
			'#352F59',
		],
		[
			'#4385E3',
			'#407CD3',
			'#3D73C2',
			'#3A6AB2',
			'#3760A2',
			'#345792',
			'#304E81',
			'#2D4571',
			'#2A3B61',
			'#293758',
		],
	],
	lightColorSet: [
		[
			'#3CC380',
			'#4BC88A',
			'#5BCD94',
			'#6BD19E',
			'#7BD6A9',
			'#8ADBB3',
			'#99E0BD',
			'#A9E5C7',
			'#B9E9D1',
			'#C9EEDC',
		],
		[
			'#FFB13B',
			'#FFB74A',
			'#FFBE5B',
			'#FFC46A',
			'#FFCA7A',
			'#FFD089',
			'#FFD699',
			'#FFDDA9',
			'#FFE3B8',
			'#FFE9C8',
		],
		[
			'#F98694',
			'#F98F9C',
			'#FA99A5',
			'#FAA3AE',
			'#FBADB6',
			'#FBB6BF',
			'#FCC0C7',
			'#FCCAD0',
			'#FDD3D8',
			'#FDDDE1',
		],
		[
			'#CF74E5',
			'#D37FE7',
			'#D78AE9',
			'#DA95EB',
			'#DEA1ED',
			'#E2ACEF',
			'#E6B7F1',
			'#EAC2F4',
			'#EECDF6',
			'#F2D8F8',
		],
		[
			'#6A9BF4',
			'#76A3F5',
			'#82ABF6',
			'#8EB3F7',
			'#9ABBF8',
			'#A6C3F8',
			'#B1CBF9',
			'#BED3FA',
			'#C9DBFB',
			'#D6E3FC',
		],
	],

	rowGrid: {
		data: [],
		column: [],
		option: {},
	},
};
</script>
