<template>
	<div class="l-layout">
		<CommonPageTitle />
		<v-row ref="searchFilter">
			<v-col :cols="12">
				<v-card class="searchFilter">
					<v-row align="start" no-gutters>
						<v-col :cols="3">
							<!-- 설비종류 -->
							<component :is="'SelectBox'" :propsValue="selectValue01" :itemList="selectValueList01" :label="'설비종류'"
								@update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large" />
						</v-col>
						<v-col :cols="3">
							<!-- 설비그룹 -->
							<component :is="'SelectBox'" :propsValue="selectValue02" :itemList="selectValueList02" :label="'설비그룹'"
								@update:propsValue="selectValue02 = $event" :textCols="12" customClass="select-large"  />
						</v-col>
						<v-col :cols="3">
							<!-- FAB -->
							<component ref="fabSelect" :is="'SelectBoxMulti'" :propsValue="selectValue03"
								:itemList="selectValueList03" :label="'FAB'" :multiple="fabMultiple"
								@update:propsValue="selectValue03 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
						</v-col>
						<v-col :cols="3">
							<!-- 효율지표 -->
							<component ref="effcIdxSelect" :is="'SelectBoxMulti'" :propsValue="selectValue04"
								:itemList="selectValueList04" :label="'효율지표'" :multiple="effcIdxMultiple"
								@update:propsValue="selectValue04 = $event" :labelCols="12" :textCols="12" customClass="select-large" />
						</v-col>
					</v-row>
					<v-row align="center" no-gutters>
						<v-col :cols="3">
							<!-- 대상일 -->
							<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large"  />
						</v-col>
						<v-col :cols="6.5" class="text-right d-flex align-end justify-end align-self-end">
							<!-- 조회버튼 -->
							<a-button type="default" icon="file-excel" class="d-inline-flex-1 mr-1" size="large" @click="createExcel()">엑셀</a-button>
							<BtnSearch @click="search" size="large"  />
						</v-col>
					</v-row>
				</v-card>
			</v-col>
		</v-row>
		<v-row ref="contents-rm" >
			<v-col :cols="12" style="min-height: 50vh">
				<v-card class="pb-5 v-card v-sheet">
					<div class="d-flex align-center justify-space-between pa-5">
						<v-card-title class="pa-0">설비그룹 효율지표 Trend</v-card-title>
					</div>
					<div ref="chartParent" style="height: 100%">
						<component :ref="chartName01" class="w100 h100" :is="loadChart01 ? 'Chart' : null" :parentPrgmId="myPrgmId"
							:chartName="chartName01" />
					</div>
				</v-card>
			</v-col>
			<v-col :cols="12" style="min-height: 50vh">
				<v-card class="pb-5 v-card v-sheet">
					<div class="d-flex align-center justify-space-between pa-5">
						<v-row class="justify-space-between">
							<v-col :cols="3">
								<v-card-title class="pa-0">설비별 효율지표 Trend</v-card-title>
							</v-col>
							<v-col :cols="4" class="d-flex justify-space-end" >
								<component
									class="text-right mr-2"
									ref="EqpmSelectPop"
									label=""
									placeholder="설비..."
									is="EqpmSelectPop"
									valueNm="eqpmId"
									:textCols="12"
									:parentPrgmId="myPrgmId"
									:eqpmGrpDisabled="true"
									:fabDisabled="true"
									:iconShow="false"
									:isMulti="true"
								/>
								<a-button @click="getEqpmData()" type="primary" >조회</a-button>
							</v-col>
						</v-row>
					</div>
					<div ref="chartParent" style="height: 100%">
						<component class="w100 h100" :is="loadChart02 ? 'Chart' : null" :parentPrgmId="myPrgmId"
							:chartName="chartName02" :ref="chartName02" />
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>

<script>
import mixinGlobal from '@/mixin/global.js';
import { resize } from '@/mixin/resize.js';
import { mapActions, mapMutations } from 'vuex';
import BtnSearch from '~/components/common/button/BtnSearch';
import Buttons from '~/components/common/button/Buttons';
import SelectBox from '@/components/common/select/SelectBox';
import SelectBoxMulti from '@/components/common/select/SelectBoxMulti';
import Utility from '~/plugins/utility';
import Datepicker from '~/components/common/Datepicker';
import BtnExcelDownload from '~/components/common/button/BtnExcelDownload';
import Chart from '~/components/common/Chart';
import EqpmSelectPop from '~/components/common/modal/EqpmSelectPop';
import DateUtility from '~/plugins/dateUtility';
import XLSX from 'xlsx';

import getLineChartOption from "~/components/common/chartoptions/LineChart";

let myTitle;
let myPrgmId;

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;
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: true,
	},
	components: {
		BtnSearch,
		Buttons,
		SelectBox,
		Utility,
		Datepicker,
		BtnExcelDownload,
		Chart,
		SelectBoxMulti,
		EqpmSelectPop,
		DateUtility,
		XLSX,
	},
	data() {
		return {
			myPrgmId: myPrgmId,
			selectValue01: null,
			selectValue02: null,
			selectValue03: [],
			selectValue04: [],
			selectValueList01: [],
			selectValueList02: [],
			selectValueList03: [],
			selectValueList04: [],
			gridName: 'eqpmGrdGrid',
			loadChart01: false,
			loadChart02: false,
			chartName01: 'eqpmGrpChart',
			chartName02: 'eqpmChart',
			fabMultiple: true,
			effcIdxMultiple: true,
			xlsData: [],
			xlsHeader: [],
			eqpmGrpObj: {},
			eqpmKindObj: {},
		};
	},
	computed: {
		chkIsFind() {
			// 조회 플래그
			return this.pageData.isFind;
		},
		chkIsFind2() {
			// 설비팝업 조회 플래그
			return this.pageData.isFind2;
		},
		chkFromDt() {
			return this.pageData.fromDt;
		},
		chkToDt() {
			return this.pageData.toDt;
		},
	},
	watch: {
		chkIsFind(val) {
			if (val) this.search();
		},
		chkIsFind2(val) {
			// 설비팝업 조회 플래그
			if (val) this.getEqpmData();
		},
		async selectValue01(val) {
			if (this.initedFlag) {
				this.setPageData({
					eqpmKindId: val,
					eqpmGrpId: '',
				});
				await this.getEqpmGrp();
			}
		},
		async selectValue02(val) {
			if (this.initedFlag) {
				this.setPageData({
					eqpmGrpId: val,
					eqpmId: [],
					eqpmIdList: [],
				});
				this.setPageData({ isFind: true });
			}
		},
		async selectValue03(val) {
			if (this.selectValue04.length > 1) {
				if (this.selectValue03.length > 1) {
					this.selectValue03.shift();
				}
			}
			if (this.selectValue03.length != 0) {
				if (this.initedFlag) {
					this.setPageData({
						fabId: val,
						eqpmId: [],
						eqpmIdList: [],
					});
					this.setPageData({ isFind: true });
				}
			}
		},
		async selectValue04(val) {
			if (this.selectValue03.length > 1) {
				if (this.selectValue04.length > 1) {
					this.selectValue04.shift();
				}
			}
			if (this.selectValue04.length == 0) {
				return;
			}
			if (this.initedFlag) {
				this.setPageData({ isFind: true });
			}
		},
		chkToDt(val) {
			var diff = DateUtility.diff(
				this.pageData.fromDt,
				this.pageData.toDt,
				'd',
			);
			if (diff < 6 && diff > 0) {
				this.setPageData({
					toDt: DateUtility.addDate(6, 'd', this.pageData.fromDt),
					isCheck: true,
				});
			}
		},
		chkFromDt(val) {
			var diff = DateUtility.diff(
				this.pageData.fromDt,
				this.pageData.toDt,
				'd',
			);
			if (diff < 6 && diff > 0) {
				this.setPageData({
					fromDt: DateUtility.addDate(-6, 'd', this.pageData.toDt),
					isCheck: true,
				});
			}
		},
	},
	async beforeCreate() {
		myPrgmId = this.$route.query.prgmId;
		await this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() { },
	async mounted() {
		await this.init();
		this.initedFlag = true;
	},
	beforeDestroy() {
		this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
	},
	methods: {
		...mapMutations({
			setChartOption: 'setChartOption',
			setChartDataZoom: 'setChartDataZoom',
			setPageData: 'setPageData',
			setChartXAxisData: 'setChartXAxisData',
			setChartYAxisData: 'setChartYAxisData',
			setChartSeries: 'setChartSeries',
		}),
		...mapActions({
			getCodeList: 'modules/search/getCodeList',
		}),
		async initTest() {
			// debug test
			// console.log('----DEBUG init pages----');
			const seriesName1 = ['B01. 냉동기전력량', ' B01.COP'];
			const seriesName2 = [
				'UT_HT_CH101:냉동기전혁당', 'UT_HT_CH102:냉동기전력량', 'UT_HT_CH201:냉동기전력당',
				'UT_HT_CH202:냉동기전력당', 'UT_HT_CH101:COP', 'UT_HT_CH102:COP',
				'UT_HT _CH201:COP', 'UT_HT _CH202:COP'
			];

			// await this.getEqpmGrpData();
			const xAxisData = [];
			const totVal = [];
			const totVa2 = [];
			for (var i = 0; i < 10; i++) {
				xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
				seriesName1.forEach(name => {
					totVal[name] = totVal[name] ? totVal[name] : [];
					totVal[name].push(Math.random() * 100);
				})
				seriesName2.forEach(name => {
					totVa2[name] = totVa2[name] ? totVa2[name] : [];
					totVa2[name].push(Math.random() * 100);
				})
			}
			// const seriesData = [120, 200, 150, 80, 70, 110, 130];

			const seriesData = seriesName1.map(name => ({ name, type: 'line', data: totVal[name]  }));
			const chartOption = {
				legend: {
					icon: 'circle',
					top: 'top',
					size: '8'
				},
				grid: {
					top: '10%',
					bottom: '20%',
				},
				yAxis: {},
				xAxis: {
					data: xAxisData,
				},
				series: seriesData,
				tooltip: {},
				// type: 'line',
				// dataZoom: dataZoom,
			};

			// console.log('-----DEBUG test data chart----', {
			// 	chartOption,
			// 	fromDt: this.pageData.fromDt
			// });
			this.setChartOption({ chartKey: this.chartName01, value: chartOption });
			this.setChartOption({
				chartKey: this.chartName02,
				value: {
					...chartOption,
					series: seriesName2.map(name => ({ name, type: 'line', data: totVa2[name] })),
				},
			});
			this.$nextTick(() => {
				this.loadChart01 = true;
				this.loadChart02 = true;
			});
			// End debug
		},
		async init() {
			await this.getFab();
			await this.getEqpmKind();
			await this.getEqpmGrp();
			await this.getEffcIdx();

			this.setFromDt();

			// await this.getData();
		},
		async search() {
			// await this.getRowGridData();

			if (this.selectValue03.length > 0 && this.selectValue04.length > 0) {
				await this.getEqpmGrpData();
				await this.getEqpmData();
			}
			this.setPageData({
				isFind: false,
			});
		},
		setFromDt() {
			this.pageData.fromDt = Utility.setBeforetDate(
				this.pageData,
				this.pageData.toDt,
				'YYYYMMDD',
			);
			// this.setPageData({
			//   toDt : DateUtility.addDate(6, 'd', this.pageData.fromDt)
			// })
			// this.pageData.toDt = Utility.setAftertDate(this.pageData, this.pageData.fromDt, "YYYYMMDD");
		},
		async getEqpmKind() {
			let res = await this.postApiReturn({
				apiKey: 'selectEqpmKindCodeList',
				resKey: 'eqpmKindCodeLists',
				sendParam: {},
			});

			var tmpData = {};
			if (res.length > 0) {
				this.selectValueList01 = await res.map(item => {
					tmpData[item.eqpmKindId] = item.eqpmKindNm;
					return {
						text: item.eqpmKindNm,
						value: item.eqpmKindId,
					};
				});
				this.selectValue01 = this.selectValueList01[0].value;
			} else {
				this.selectValueList01 = [];
				this.selectValue01 = null;
			}

			this.eqpmKindObj = tmpData;
			this.setPageData({
				eqpmKindList: this.selectValueList01,
				eqpmKindId: this.selectValue01,
			});
		},
		async getFab() {
			let res = await this.postApiReturn({
				apiKey: 'selectFabCodeList',
				resKey: 'fabCodeLists',
				sendParam: {},
			});
			if (res.length > 0) {
				this.selectValueList03 = await res.map(item => {
					return {
						text: item.eccNm,
						value: item.eccId,
					};
				});
				// if(this.pageData.eccId != null && this.pageData.eccId != ''){
				// this.selectValue02 = this.pageData.eccId;
				// }else if(this.pageData.eccId == null || this.pageData.eccId == ''){
				this.selectValue03.push(this.selectValueList03[0].value);
				// }
			} else {
				this.selectValueList03 = [];
				this.selectValue03 = [];
			}
			this.setPageData({
				fabIdList: this.selectValueList03,
				fabId: this.selectValue03,
			});
		},
		async getEqpmGrp() {
			let res = await this.postApiReturn({
				apiKey: 'selectEqpmGrpCodeList',
				resKey: 'eqpmGrpCodeLists',
				sendParam: { eqpmKindId: this.selectValue01 },
			});
			var tmpData = {};
			if (res.length > 0) {
				this.selectValueList02 = await res.map(item => {
					tmpData[item.eqpmGrpId] = item.eqpmGrpNm;
					return {
						text: item.eqpmGrpNm,
						value: item.eqpmGrpId,
					};
				});
				// this.selectValue02 = this.pageData.eqpmGrpId;
				// }else if(this.pageData.eqpmGrpId == null || this.pageData.eqpmGrpId == ''){
				this.selectValue02 = this.selectValueList02[0].value;
				// }
			} else {
				this.selectValueList02 = [];
				this.selectValue02 = null;
			}
			this.eqpmGrpObj = tmpData;
			this.setPageData({
				eqpmGrpList: this.selectValueList02,
				eqpmGrpId: this.selectValue02,
			});
		},
		async getEffcIdx() {
			let res = await this.postApiReturn({
				apiKey: 'selectEffcIdxCodeList',
				resKey: 'effcIdxCodeList',
				sendParam: {},
			});

			if (res.length > 0) {
				this.selectValueList04 = await res.map(item => {
					return {
						text: item.effcIdxNm,
						value: item.effcIdxId,
					};
				});

				this.selectValue04.push(this.selectValueList04[0].value);
			} else {
				this.selectValueList04 = [];
				this.selectValue02 = [];
			}

			this.setPageData({
				effcIdxIdList: this.selectValueList02,
				effcIdxId: this.selectValue02,
			});
		},
		async getEqpmGrpData() {
			//설비그룹 trend
			let res = await this.postApiReturn({
				apiKey: 'selectEffcIdxEgrpTrend',
				resKey: 'egrpTrendData',
				sendParam: {
					fabId: this.selectValue03,
					eqpmGrpId: this.selectValue02,
					effcIdxId: this.selectValue04,
					fromDt: this.pageData.fromDt,
					toDt: this.pageData.toDt,
				},
			});
			this.setPageData({
				chartData01: res,
			});
			this.setChartData(res);
		},
		async getEqpmData() {
			//설비별 Trend
			let res = await this.postApiReturn({
				apiKey: 'selectEffcIdxEqpmTrend',
				resKey: 'eqpmTrendData',
				sendParam: {
					fabId: this.selectValue03,
					eqpmGrpId: this.selectValue02,
					effcIdxId: this.selectValue04,
					fromDt: this.pageData.fromDt,
					toDt: this.pageData.toDt,
					eqpmId: this.pageData.eqpmId,
				},
			});

			this.setPageData({
				chartData02: res,
				isFind2: false,
			});

			this.setChartData2(res);
		},
		setExcelData(data, type) {
			var xlsRowData = [];
			var xlsHeader = [];
			var diff = DateUtility.diff(
				this.pageData.fromDt,
				this.pageData.toDt,
				'd',
			);
			var totVal = [];
			xlsRowData = data;
			if (type == 'eqpmGrp') {
				xlsHeader.push({
					header: '설비종류',
					name: 'eqpmKindNm',
				});
				xlsHeader.push({
					header: '설비그룹',
					name: 'eqpmGrpNm',
				});
				xlsHeader.push({
					header: 'FAB',
					name: 'fabNm',
				});
				xlsHeader.push({
					header: '효율지표',
					name: 'effcIdxNm',
				});
			} else if (type == 'eqpm') {
				xlsHeader.push({
					header: '설비종류',
					name: 'eqpmKindNm',
				});
				xlsHeader.push({
					header: '설비그룹',
					name: 'eqpmGrpNm',
				});
				xlsHeader.push({
					header: '설비',
					name: 'eqpmNm',
				});
				xlsHeader.push({
					header: '효율지표',
					name: 'effcIdxNm',
				});
			}

			for (var i = 0; i < diff + 1; i++) {
				var date = DateUtility.addDate(i, 'YYYY/MM/DD', this.pageData.fromDt);
				xlsHeader.push({
					header: date,
					name: date,
				});
				totVal.push(0);
			}
			var exceptionColumList = [
				'effcIdxNm',
				'fabNm',
				'eqpmKindNm',
				'eqpmGrpNm',
				'eqpmNm',
			];

			let myKey = xlsHeader.map(item => {
				return item.name;
			});

			myKey = myKey.filter(v => {
				return !exceptionColumList.includes(v);
			});

			let tmpData = [];
			let tmpMap = {};
			let excelMap = {};

			if (type == 'eqpmGrp') {
				xlsRowData.map(item => {
					if (tmpMap[item.fabEffcNm] == null) {
						tmpMap[item.fabEffcNm] = {
							...item,
							totVal: [...totVal],
						};
					}
				});

				xlsRowData.map(item => {
					if (tmpMap[item.fabEffcNm] != undefined) {
						tmpMap[item.fabEffcNm]['totVal'][
							myKey.indexOf(Utility.setFormatDate(item.totDttm, 'YYYY/MM/DD'))
						] = item.totVal;
					}
				});
			} else if (type == 'eqpm') {
				xlsRowData.map(item => {
					if (tmpMap[item.eqpmEffcNm] == null) {
						tmpMap[item.eqpmEffcNm] = {
							...item,
							totVal: [...totVal],
						};
					}
				});
				xlsRowData.map(item => {
					if (tmpMap[item.eqpmEffcNm] != undefined) {
						tmpMap[item.eqpmEffcNm]['totVal'][
							myKey.indexOf(Utility.setFormatDate(item.totDttm, 'YYYY/MM/DD'))
						] = item.totVal;
					}
				});
			}

			var tmpMapKey = Object.keys(tmpMap);

			for (var i = 0; i < tmpMapKey.length; i++) {
				excelMap['설비종류'] = this.eqpmKindObj[this.selectValue01];
				excelMap['설비그룹'] = this.eqpmGrpObj[this.selectValue02];
				if (type == 'eqpmGrp') {
					excelMap['FAB'] = tmpMap[tmpMapKey[i]].fabNm;
				} else if (type == 'eqpm') {
					excelMap['설비'] = tmpMap[tmpMapKey[i]].eqpmNm;
				}
				excelMap['효율지표'] = tmpMap[tmpMapKey[i]].effcIdxNm;
				var count = 0;
				tmpMap[tmpMapKey[i]].totVal.map(v => {
					excelMap[myKey[count]] = v;
					count++;
				});

				tmpData.push(excelMap);
				excelMap = {};
			}
			var newXlsHeader = [];
			xlsHeader.map(v => {
				newXlsHeader.push(String(v.header));
			});

			return { data: tmpData, header: newXlsHeader };
		},
		createExcel() {
			let fileName = '에너지보고서';

			const workBook = XLSX.utils.book_new(); // 새 시트 생성

			var chartData = this.setExcelData(this.pageData.chartData01, 'eqpmGrp');
			let excelData = XLSX.utils.json_to_sheet(chartData.data, {
				header: chartData.header,
			});
			XLSX.utils.book_append_sheet(
				workBook,
				excelData,
				'설비그룹_효율지표Trend',
			); // 시트 명명, 데이터 지정

			chartData = this.setExcelData(this.pageData.chartData02, 'eqpm');
			excelData = XLSX.utils.json_to_sheet(chartData.data, {
				header: chartData.header,
			});
			XLSX.utils.book_append_sheet(workBook, excelData, '설비별_효율지표Trend'); // 시트 명명, 데이터 지정

			XLSX.writeFile(
				workBook,
				`${fileName ? fileName : this.menuNm.replace(/(\s*)/g, '')}.xlsx`,
			); // 엑셀파일 만듬
		},
		async setChartData(data) {
			this.loadChart01 = false;
			let xAxisData = [];
			let seriesData = [];

			var diff = DateUtility.diff(
				this.pageData.fromDt,
				this.pageData.toDt,
				'd',
			);
			var totVal = [];
			for (var i = 0; i < diff + 1; i++) {
				xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
				totVal.push(0);
			}
			var tempData = {};
			data.map(item => {
				if (tempData[item.fabEffcNm] == null) {
					tempData[item.fabEffcNm] = {
						...item,
						totVal: [...totVal],
					};
				}
			});
			data.map(item => {
				if (tempData[item.fabEffcNm] != undefined) {
					tempData[item.fabEffcNm]['totVal'][
						xAxisData.indexOf(Utility.setFormatDate(item.totDttm, 'DD'))
					] = item.totVal;
				}
			});

			var keys = Object.keys(tempData);
			for (var i = 0; i < keys.length; i++) {
				seriesData.push({
					name: tempData[keys[i]].fabEffcNm,
					type: 'line',
					data: tempData[keys[i]].totVal,
				});
			}
			var dataZoom = [];
			if (xAxisData.length > 7) {
				dataZoom = [
					{
						type: 'inside',
						disabled: false,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
					{
						show: true,
						moveOnMouseMove: true,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
				];
			} else {
				dataZoom = [
					{
						type: 'inside',
						disabled: true,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
					{
						show: false,
						moveOnMouseMove: false,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
				];
			}

			const chartOption = getLineChartOption({
        xAxisData: xAxisData,
        seriesData: seriesData,
				dataZoom: dataZoom,
        // legendData: legendData,
        // isDarkMode: this.isDarkMode,
      });

			this.setChartOption({ chartKey: this.chartName01, value: chartOption });
			// this.setChartYAxisData({ chartKey: this.chartName01, value: yAxisData });
			// this.setChartXAxisData({ chartKey: this.chartName01, value: xAxisData });
			// this.setChartSeries({ chartKey: this.chartName01, value: seriesData });
			this.$nextTick(() => {
				this.loadChart01 = true;
			});
		},
		async setChartData2(data) {
			this.loadChart02 = false;
			let xAxisData = [];
			let seriesData = [];

			var diff = DateUtility.diff(
				this.pageData.fromDt,
				this.pageData.toDt,
				'd',
			);
			var totVal = [];
			for (var i = 0; i < diff + 1; i++) {
				xAxisData.push(DateUtility.addDate(i, 'DD', this.pageData.fromDt));
				totVal.push(0);
			}

			var tempData = {};
			data.map(item => {
				if (tempData[item.eqpmEffcNm] == null) {
					tempData[item.eqpmEffcNm] = {
						...item,
						totVal: [...totVal],
					};
				}
			});

			data.map(item => {
				if (tempData[item.eqpmEffcNm] != undefined) {
					tempData[item.eqpmEffcNm]['totVal'][
						xAxisData.indexOf(Utility.setFormatDate(item.totDttm, 'DD'))
					] = item.totVal;
				}
			});

			var keys = Object.keys(tempData);
			for (var i = 0; i < keys.length; i++) {
				seriesData.push({
					name: tempData[keys[i]].eqpmEffcNm,
					type: 'line',
					data: tempData[keys[i]].totVal,
				});
			}

			var dataZoom = [];
			if (xAxisData.length > 7) {
				dataZoom = [
					{
						type: 'inside',
						disabled: false,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
					{
						show: true,
						moveOnMouseMove: true,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
				];
			} else {
				dataZoom = [
					{
						type: 'inside',
						disabled: true,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
					{
						show: false,
						moveOnMouseMove: false,
						start: 0,
						end: parseInt(700 / xAxisData.length) - 1,
					},
				];
			}

			const chartOption = getLineChartOption({
        xAxisData: xAxisData,
        seriesData: seriesData,
				dataZoom: dataZoom,
        // legendData: legendData,
        // isDarkMode: this.isDarkMode,
      });

			this.setChartOption({ chartKey: this.chartName02, value: chartOption });
			// this.setChartDataZoom({chartKey : this.chartName02,value: dataZoom});
			this.$nextTick(() => {
				this.loadChart02 = true;
			});
		},
	},
};

const defaultData = {
	isFind: false,
	isFind2: false,
	fabId: [],
	fabIdList: [],
	fabNm: '',
	chartData01: [],
	chartData02: [],
	// eccId:'',
	// eccIdList:[],
	eqpmGrpNm: '',
	eqpmGrpId: '',
	eqpmGrpList: [],
	eqpmId: [],
	eqpmIdList: [],
	eqpmNm: '',
	eqpmKindId: '',
	effcIdxId: '',
	cmCycle: 'CYC_DAY', // 주기
	defaultRange: {
		CYC_DAY: 30,
	},
	fromDt: '20250601',
	toDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
	modalData: {},
	eqpmGrpChart: Utility.defaultChartOption(true),
	eqpmChart: Utility.defaultChartOption(true),
};
</script>
