<template>
	<div class="l-layout">
		<v-row ref="rowParent">
			<v-col :cols="12">
				<v-card class="pa-3 widget-card">
					<div class="d-flex align-center justify-space-between">
						<v-card-title class="pa-0">전력 사용량 실적</v-card-title>
						<v-card-subtitle class="mt-0 pa-0 text-right">
							<v-icon
								v-show="widgetPrgmId"
								class="mr-1"
								size="25"
								@click="btnAction('widgetCallPage')"
								>mdi-note-search</v-icon
							>
							<v-icon
								v-show="widgetPopFg"
								size="25"
								@click="btnAction('popWidget')"
								>mdi-plus-box-multiple</v-icon
							>
						</v-card-subtitle>
					</div>
					<div class="row wrapper">
						<div class="col-6">
							<div class="px-5 pb-1">
								<div class="text-center">
									<strong class="custom-title-2-5"
										>{{ dayUseQty }}
										<span class="font-weight-regular custom-text-2"
											>kWh</span
										></strong
									>
									<div class="d-flex align-center justify-center">
										<span class="body-2 text-color--non-activate"
											>전주 대비({{ currHour }})</span
										>
										<div
											class="d-flex align-baseline ml-2"
											:style="{
												color: isDarkMode
													? isUseQtyStat
														? '#f6637b'
														: '#01ae6a'
													: isUseQtyStat
													? '#ff76bb'
													: '#00c875',
											}"
										>
											<strong class="mr-1 custom-text-1">{{
												compareUseQty
											}}</strong>
											<span class="caption mr-1">kWh</span>
											<v-icon
												small
												:color="
													isDarkMode
														? isUseQtyStat
															? '#f6637b'
															: '#01ae6a'
														: isUseQtyStat
														? '#ff76bb'
														: '#00c875'
												"
												>{{ useQtyStat }}</v-icon
											>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-6">
							<div class="px-5 pb-1">
								<div class="text-center">
									<strong class="custom-title-2-5"
										>{{ dayUseCost }}
										<span class="font-weight-regular custom-text-2"
											>천원</span
										></strong
									>
									<div class="d-flex align-center justify-center">
										<span class="body-2 text-color--non-activate"
											>전주 대비(0시-{{ currHour }})</span
										>
										<div
											class="d-flex align-baseline ml-2"
											:style="{
												color: isDarkMode
													? isUseCostStat
														? '#f6637b'
														: '#01ae6a'
													: isUseCostStat
													? '#ff76bb'
													: '#00c875',
											}"
										>
											<strong class="mr-1 custom-text-1">{{
												compareUseCost
											}}</strong>
											<span class="caption mr-1">천원</span>
											<v-icon
												small
												:color="
													isDarkMode
														? isUseCostStat
															? '#f6637b'
															: '#01ae6a'
														: isUseCostStat
														? '#ff76bb'
														: '#00c875'
												"
												>{{ useCostStat }}</v-icon
											>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="d-flex align-center justify-space-between mt-2">
						<div :style="{ width: '100%', height: '160px' }">
							<component
								class="w100 h100"
								:is="loadChart_01 ? 'Chart' : null"
								:parentPrgmId="parentPrgmId"
								:widgetId="'EnrgUseRsltWidget'"
								:widgetData="'EnrgUseRsltWidgetData'"
								:chartName="chart_01"
								ref="chart_01"
							/>
						</div>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'; // , mapActions
import Vue from 'vue';
import DateUtility from '~/plugins/dateUtility';
import Utility from '~/plugins/utility';
import Chart from '~/components/common/Chart';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		widgetId: {
			type: String,
			require: true,
		},
		widgetPrgmId: {
			type: Boolean,
			default: true,
		},
		widgetPopFg: {
			type: Boolean,
			default: true,
		},
		widgetReflashMm: {
			type: Number,
			require: true,
		},
	},
	components: {
		DateUtility,
		Chart,
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
	},
	watch: {
		// rdbEnrgUsage(){
		//   this.getEnrgUsage();
		// },
		energyCd() {
			this.getEnrgUsage();
			this.getChartData();
		},
	},
	beforeCreate() {
		this.$store.commit('setWidgetPageData', {
			prgmId: this.$route.query.prgmId,
			EnrgUseRsltWidget: { EnrgUseRsltWidgetData },
		});
	},
	async created() {
		this.energyList = await this.postApiReturn({
			apiKey: 'selectEnergy',
			resKey: 'energyData',
			sendParam: {
				useFg: 1,
			},
		});

		this.energyList.filter(item => {
			if (item.readObjCd == 'ELEC') {
				//전력
				this.energyCd = item.cd;
				this.unit = item.unit;
			}
		});

		this.search();
		this.timer = setInterval(this.search, this.widgetReflashMm);
	},
	beforeDestroy() {
		window.clearTimeout(this.timer);
	},
	mounted() {},
	data() {
		return {
			// blocNm:'',
			//바인딩
			energyCd: '',
			energyList: [],
			unit: '',
			currHour: Utility.setFormatDate(new Date(), 'H') + '시 기준',
			isUseQtyStat: true,
			isUseCostStat: true,
			dayUseQty: 0,
			compareUseQty: 0,
			useQtyStat: null,
			dayUseCost: 0,
			compareUseCost: 0,
			useCostStat: null,
			// 차트
			chart_01: 'enrgUsageChart',
			loadChart_01: false,
		};
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setWidgetChartOption: 'setWidgetChartOption',
			openDashboardWidget: 'openDashboardWidget',
			setWidgetChartYaxisData: 'setWidgetChartYaxisData',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postApiReturn: 'modules/list/postApiReturn',
			getEnergyList: 'modules/search/getEnergyList',
		}),
		async search() {
			// this.setBlocNm();
			await this.getEnrgUsage();
			await this.getChartData();
		},
		async getEnrgUsage() {
			const res = await this.postApiReturn({
				apiKey: 'selectUseCostDay',
				resKey: 'dayUseCostData',
				sendParam: {
					readObjId: this.energyCd,
				},
			});
			const res2 = await this.postApiReturn({
				apiKey: 'selectUseCostPast',
				resKey: 'pastUseCostData',
				sendParam: {
					readObjId: this.energyCd,
				},
			});
			res.forEach((item, idx) => {
				this.dayUseQty = Utility.setFormatInt(item.qty);
				this.dayUseCost = Utility.setFormatInt(item.cost);
			});
			let dayUseQty,
				dayUseQtyAvg,
				dayUseCost,
				dayUseCostAvg,
				dayUseMaxQty,
				dayUseMaxCost = 0;
			if (res.length > 0) {
				dayUseQty = res[0].qty;
				dayUseCost = res[0].cost;
			}
			if (res2.length > 0) {
				dayUseQtyAvg = res2[0].qtyAvg;
				dayUseCostAvg = res2[0].costAvg;
				dayUseMaxQty = res2[0].maxQty;
				dayUseMaxCost = res2[0].maxCost;
			}
			this.compareUseQty = Utility.setFormatInt(dayUseQty - dayUseQtyAvg);
			this.compareUseCost = Utility.setFormatInt(dayUseCost - dayUseCostAvg);
			this.useQtyStat =
				dayUseQty > dayUseQtyAvg ? 'mdi-arrow-up' : 'mdi-arrow-down';
			this.useCostStat =
				dayUseCost > dayUseCostAvg ? 'mdi-arrow-up' : 'mdi-arrow-down';

			this.isUseQtyStat = this.useQtyStat == 'mdi-arrow-up' ? true : false;
			this.isUseCostStat = this.useCostStat == 'mdi-arrow-up' ? true : false;
		},
		setChartData(data, markAreaData) {
			let xAxisData = [];
			let seriesData = [];
			let legendData = [];
			let arrDarkColors = ['rgba(1, 174, 106, 0.7)', 'rgba(67, 133, 227, 0.7)'];
			let arrLightColors = [
				'rgba(207, 116, 229, 0.7)',
				'rgba(106, 155, 244, 0.7)',
			];
			const arrColors = this.isDarkMode ? arrDarkColors : arrLightColors;
			// chart x축 data
			var qtyNumber, qtyStr;
			for (var i = 0; i < 24; i++) {
				qtyNumber = i.toString().padStart(2, '0');
				qtyStr = 'qty' + qtyNumber;
				xAxisData.push(i + '시');
			}
			// chart_data 중 누적 사용량과 누적 금액 구분
			for (var i = 0; i < data.length; i++) {
				var tempObj = { data: [] };
				tempObj['type'] = 'line';
				tempObj['lineStyle'] = { width: 2 };
				tempObj['smooth'] = true;
				tempObj['showSymbol'] = false;
				tempObj['color'] = arrColors[i];
				if (data[i]['type'] == 'use') {
					tempObj['name'] = '누적 사용량';
					legendData.push('누적 사용량');
					tempObj['areaStyle'] = {
						opacity: 0.5,
						color: arrColors[i],
					};
					tempObj['yAxisIndex'] = 0;
					tempObj['markArea'] = { data: markAreaData };
				} else if (data[i]['type'] == 'cost') {
					tempObj['name'] = '누적 금액';
					legendData.push('누적 금액');
					tempObj['yAxisIndex'] = 1;
				} else if (data[i]['type'] == 'week') {
					tempObj['name'] = '전주 평균 누적 사용량';
					legendData.push('전주 평균 누적 사용량');
					tempObj['yAxisIndex'] = 0;
				}
				// 0~23시 까지의 데이터 seriesData 넣기
				for (var j = 0; j < 24; j++) {
					qtyNumber = j.toString().padStart(2, '0');
					qtyStr = 'qty' + qtyNumber;
					if (data[i].hasOwnProperty(qtyStr)) {
						// tempObj['data'].push(Utility.setFormatIntDecimal(parseFloat(data[i][qtyStr]), 2).replace(',',''));
						tempObj['data'].push(parseFloat(data[i][qtyStr]));
					} else {
						tempObj['data'].push(0);
					}
				}
				seriesData.push(tempObj);
			}

			const yAxisData = [
				{
					type: 'value',
					name: this.unit,
					splitLine: {
						show: false,
					},
					nameTextStyle: {
						fontSize: 12,
						fontWeight: 'bold',
					},
					axisLabel: {
						color: '#767D83',
						fontSize: 9,
						formatter: '{value}',
					},
				},
				{
					type: 'value',
					name: '원',
					splitLine: {
						show: false,
					},
					nameTextStyle: {
						fontSize: 12,
						fontWeight: 'bold',
					},
					axisLabel: {
						color: '#767D83',
						fontSize: 9,
						formatter: '{value}',
					},
				},
			];
			var chartOption = {
				series: seriesData,
				grid: {
					left: '1%',
					right: '2%',
					top: '20%',
					bottom: '15%',
					containLabel: true,
				},
				legend: {
					data: legendData,
					bottom: 'bottom',
					icon: 'bar',
				},
				xAxis: {
					type: 'category',
					//boundaryGap: false,
					splitLine: false,
					data: xAxisData,
					axisLabel: {
						fontSize: 9,
					},
				},
				// yAxis: [
				//   {
				//     type: 'value',
				//     name: this.unit,
				//     splitLine: {
				//       show: false
				//     },
				//     nameTextStyle: {
				//       fontSize: 12,
				//       fontWeight:'bold'
				//     },
				//     axisLabel:{
				//       color: "#767D83",
				//       fontSize: 9,
				//       formatter: '{value}'
				//     }
				//   },
				//   {
				//     type: 'value',
				//     name: '원',
				//     splitLine: {
				//       show: false
				//     },
				//     nameTextStyle: {
				//       fontSize: 12,
				//       fontWeight:'bold'
				//     },
				//     axisLabel:{
				//       color: "#767D83",
				//       fontSize: 9,
				//       formatter: '{value}'
				//     }
				//   }
				// ],
				tooltip: {
					trigger: 'axis',
				},
			};

			this.setWidgetChartOption({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'EnrgUseRsltWidget',
				widgetData: 'EnrgUseRsltWidgetData',
				chartKey: 'enrgUsageChart',
				value: chartOption,
			});
			this.setWidgetChartYaxisData({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'EnrgUseRsltWidget',
				widgetData: 'EnrgUseRsltWidgetData',
				chartKey: 'enrgUsageChart',
				value: yAxisData,
			});
			this.loadChart_01 = true;
		},
		async getChartData() {
			this.loadChart_01 = false;
			var root_info = null;
			var res_useage = null;
			var res_cost = null;
			var facList = null;
			var filtered_res = null;
			var apiParameters = {
				blocId: 'BL0001',
				readObjId: this.energyCd,
				locKind: '',
				upEccId: '',
			};
			var sendParam_chart_data = {
				blocId: 'BL0001',
				eccId: [],
				eccNm: [],
				fromObjDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
				lockKind: '',
				readObjId: this.energyCd,
				toObjDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
				upEccId: '',
			};
			var check_flag = true;
			// 공정/설비 트리리스트 중 에너지원에 따른 최상위 정보 가져오기
			try {
				root_info = await this.postApiReturn({
					apiKey: 'selectFtnPlcListTree',
					resKey: 'ftnPlcTreeDatas',
					sendParam: {
						blocId: 'BL0001',
						roiId: this.energyCd,
						eqpmYn: 1,
						// search:this.searchWord
					},
				});
				filtered_res = root_info.filter(item => item.upEccId == 'ROOT');
				apiParameters['locKind'] = filtered_res[0].locKind;
				apiParameters['upEccId'] = filtered_res[0].eccId;
				sendParam_chart_data['lockKind'] = filtered_res[0].locKind;
			} catch (error) {
				root_info = [];
				filtered_res = [];
			}

			// 위의 정보로 해당 검침개소 정보 가져오기
			try {
				facList = await this.postApiReturn({
					apiKey: 'selectEnergyUseReadDnPlc',
					resKey: 'energyUseReadDnPlc',
					sendParam: apiParameters,
				});
				for (var i in facList) {
					sendParam_chart_data['eccId'].push(facList[i]['eccId']);
					sendParam_chart_data['eccNm'].push(facList[i]['eccNm']);
				}
				// sendParam_chart_data['eccId'].push(facList[0]['eccId']);
				// sendParam_chart_data['eccNm'].push(facList[0]['eccNm']);
				sendParam_chart_data['upEccId'] = facList[0]['upEccId'];
			} catch (error) {
				check_flag = false;
			}

			// 위의 정보로 검침개소 시간별 사용량 가져오기
			var final_chart_data = [];
			if (check_flag) {
				try {
					res_useage = await this.postApiReturn({
						apiKey: 'selectEnergyUseReadHourAddup',
						resKey: 'energyUseRead',
						sendParam: sendParam_chart_data,
					});

					// root 하위 개소들의 사용량을 sum 함(쿼리에서 SUM 안했을 경우 사용)
					// var sum_data = {};
					// for (var i in res_useage){
					//   res_useage[i]['type'] = 'use'
					//   for (var key in res_useage[i]){
					//     if(key.includes('qty')){
					//       if(sum_data[key] == undefined){
					//         sum_data[key] = res_useage[i][key]
					//       }else{
					//         sum_data[key] += res_useage[i][key]
					//       }
					//     }
					//   }
					//   // final_chart_data.push(res_useage[i])
					// }
					// final_chart_data.push({'type' : 'use', ...sum_data})

					// root 하위 개소들의 사용량을 sum 함(쿼리에서 SUM을 했을 경우 사용)

					res_useage[0]['type'] = 'use';
					final_chart_data.push(res_useage[0]);
				} catch (error) {
					res_useage = [];
				}

				try {
					res_cost = await this.postApiReturn({
						apiKey: 'selectEnergyUseReadHourCostAddup',
						resKey: 'energyUseRead',
						sendParam: sendParam_chart_data,
					});
					res_cost[0]['type'] = 'cost';
					final_chart_data.push(res_cost[0]);
				} catch (error) {
					res_cost = [];
				}
			} else {
				res_useage = [];
				res_cost = [];
			}
			// 전주 평균 누적 사용량
			let res_week_read = [];
			res_week_read = await this.postApiReturn({
				apiKey: 'selectEnergyUseReadLastWeekAddup',
				resKey: 'energyUseRead',
				sendParam: sendParam_chart_data,
			});
			if (res_week_read.length != 0) {
				res_week_read[0]['type'] = 'week';
				final_chart_data.push(res_week_read[0]);
			}
			let res3 = [];
			let markAreaData = [];
			let markColor = {
				MAX: 'rgba(238, 102, 102, 0.1)',
				MID: 'rgba(250, 200, 88, 0.1)',
				MIN: 'rgba(145, 204, 117, 0.1)',
			};
			res3 = await this.postApiReturn({
				apiKey: 'selectPeakKine',
				resKey: 'peakData',
				sendParam: {
					readObjId: this.energyCd,
					toObjDt: Utility.setFormatDate(new Date(), 'YYYYMMDD'),
				},
			});
			markAreaData = res3.map(item => [
				{
					name: item.commCdNm,
					xAxis:
						parseInt(item.strtTm.split(':')[0].replace(/(^0+)/, '')) == 23
							? 0
							: parseInt(item.strtTm.split(':')[0].replace(/(^0+)/, '')),
					itemStyle: {
						color: markColor[item.peakKine],
					},
					label: {
						distance: [0],
						fontSize: 9,
						fontWeight: 'lighter',
						color: '#fff',
					},
				},
				{
					xAxis: parseInt(item.endTm.split(':')[0].replace(/(^0+)/, '')),
				},
			]);

			// char data 넣기
			this.$nextTick(() => {
				this.setChartData(final_chart_data, markAreaData);
			});
		},
		btnAction(action) {
			switch (action) {
				case 'popWidget':
					this.openDashboardWidget({
						prgmId: this.$route.query.prgmId,
						widgetId: this.widgetId,
					});
					break;
				case 'widgetCallPage':
					this.$parent.$parent.$parent.openWidgetPrgm(this.widgetId);
					break;
			}
		},
	},
};

const EnrgUseRsltWidgetData = {
	isFind: false,
	enrgUsageChart: Utility.defaultChartOption(true),
};
</script>

<style lang="scss" scoped>
.v-avatar {
	border-radius: 21px;
	font-size: 1.75rem;
}
.v-virtual-scroll-wrapper {
	overflow-y: auto;
	max-height: 210px;
}
.v-radio > label {
	font-size: 0.8rem;
}
.v-list-item {
	min-height: 30px;
	line-height: 1;
}
.v-list-item__content > * {
	line-height: 1;
}
.v-select__widget > .v-input__control > .v-input__slot {
	min-width: 60%;
}
.wrapper {
	padding: 5px 10px 0px 10px !important;
	border-bottom: thin solid rgba(255, 255, 255, 0.12);
}
</style>
