<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">
							<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 pt-2 px-2">
						<v-col :cols="3">
							<v-banner>
								<div class="d-flex align-center justify-space-between">
									<v-card-subtitle class="pa-0">전체검침개소</v-card-subtitle>
									<v-avatar
										size="36"
										:color="isDarkMode ? '#2fad35' : '#00c875'"
										min-width="72"
										class="font-weight-bold text-color--white-0"
										>{{ pointUse }}</v-avatar
									>
								</div>
							</v-banner>
							<component
								:is="'UnusedStatPopPage'"
								:parentPrgmId="parentPrgmId"
								:pointNoUse="pointNoUse"
							/>
							<component
								:is="'EtcStatPopPage'"
								:parentPrgmId="parentPrgmId"
								:pointEtc="pointEtc"
							/>
						</v-col>
						<v-col :cols="4">
							<component
								:ref="gridName01"
								:is="loadGrid01 ? 'Grid' : null"
								:gridName="gridName01"
								:parentPrgmId="parentPrgmId"
								:dataPath="searchParam.ComcUseReptWidget.ComcUseReptWidgetData"
							/>
						</v-col>
						<v-col :cols="5">
							<div>
								<component
									:ref="gridName02"
									:is="loadGrid02 ? 'Grid' : null"
									:gridName="gridName02"
									:parentPrgmId="parentPrgmId"
									:dataPath="
										searchParam.ComcUseReptWidget.ComcUseReptWidgetData
									"
								/>
							</div>
						</v-col>
					</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 Grid from '~/components/common/Grid';
import UnusedStatPopPage from '~/components/common/modal/UnusedStatPopPage';
import EtcStatPopPage from '~/components/common/modal/EtcStatPopPage';

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,
		Grid,
		UnusedStatPopPage,
		EtcStatPopPage,
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
	},
	watch: {},
	beforeCreate() {
		this.$store.commit('setWidgetPageData', {
			prgmId: this.$route.query.prgmId,
			// defaultData: defaultData,
			ComcUseReptWidget: { ComcUseReptWidgetData: ComcUseReptWidgetData },
		});
	},
	created() {
		this.search();
		this.timer = setInterval(this.search, this.widgetReflashMm);
	},
	beforeDestroy() {
		window.clearTimeout(this.timer);
	},
	mounted() {},
	data() {
		return {
			pointUse: 0,
			pointNoUse: 0,
			pointEtc: 0,
			gridName01: 'grid01',
			gridName02: 'grid02',
			loadGrid01: false,
			loadGrid02: false,
		};
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setWidgetChartOption: 'setWidgetChartOption',
			setWidgetGridData: 'setWidgetGridData',
			setWidgetGridColumn: 'setWidgetGridColumn',
			setWidgetGridOption: 'setWidgetGridOption',
			openDashboardWidget: 'openDashboardWidget',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postApiReturn: 'modules/list/postApiReturn',
		}),
		async search() {
			await this.getReadplcStatus();
			this.gridInit();
		},
		async gridInit() {
			this.loadGrid01 = false;
			this.loadGrid02 = false;

			const gridHeight = 180;

			const myOptions = {
				scrollX: false,
			};

			var gridOptions = Utility.defaultGridOption(gridHeight);
			gridOptions.columnOptions.minWidth = 10;
			gridOptions.columnOptions.maxWidth = 200;

			this.setWidgetGridOption({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'ComcUseReptWidget',
				widgetData: 'ComcUseReptWidgetData',
				gridKey: this.gridName01,
				value: gridOptions,
			});

			this.setWidgetGridOption({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'ComcUseReptWidget',
				widgetData: 'ComcUseReptWidgetData',
				gridKey: this.gridName02,
				value: gridOptions,
			});

			var columnList01 = [
				// {header:'No', name:"No", width:50, align:"center"},
				{
					header: 'readplcId',
					name: 'readPlcId',
					align: 'center',
					hidden: true,
				},
				{ header: '미사용개소 ', name: 'readPlcNm', align: 'left' },
			];

			var columnList02 = [
				// {header:'No', name:"No", width:50, align:"center"},
				{
					header: 'readplcId',
					name: 'readPlcId',
					align: 'center',
					hidden: true,
				},
				{ header: '통신이상개소', name: 'readPlcNm', align: 'left' },
				{ header: '최종검침시간', name: 'readTm', width: 90, align: 'center' },
			];

			this.setWidgetGridColumn({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'ComcUseReptWidget',
				widgetData: 'ComcUseReptWidgetData',
				gridKey: this.gridName01,
				value: columnList01,
			});

			this.setWidgetGridColumn({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'ComcUseReptWidget',
				widgetData: 'ComcUseReptWidgetData',
				gridKey: this.gridName02,
				value: columnList02,
			});

			await this.getGridData();

			this.loadGrid01 = true;
			this.loadGrid02 = true;
		},
		async getGridData() {
			// var res1 = [
			//   {"No":1, "readplcId":123, "readPlcNm":"abc"},
			//   {"No":2, "readplcId":123, "readPlcNm":"bcd"},
			//   {"No":3, "readplcId":123, "readPlcNm":"cde"},
			// ];

			// var res2 = [
			//   {"No":1, "readplcId":123, "readPlcNm":"aaa"},
			//   {"No":2, "readplcId":123, "readPlcNm":"bbb"},
			//   {"No":3, "readplcId":123, "readPlcNm":"ccc"},
			// ];
			var res1;
			var res2;

			res1 = await this.postApiReturn({
				apiKey: 'selectUnusedReadPlc',
				resKey: 'unusedData',
				sendParam: {},
			});

			res2 = await this.postApiReturn({
				apiKey: 'selectEtcReadPlc',
				resKey: 'etcData',
				sendParam: {},
			});

			res1.map((item, index) => {
				item.No = index + 1;
			});

			res2.map((item, index) => {
				item.No = index + 1;
			});

			this.setWidgetGridData({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'ComcUseReptWidget',
				widgetData: 'ComcUseReptWidgetData',
				gridKey: this.gridName01,
				value: res1,
			});

			this.setWidgetGridData({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'ComcUseReptWidget',
				widgetData: 'ComcUseReptWidgetData',
				gridKey: this.gridName02,
				value: res2,
			});
		},
		async getReadplcStatus() {
			const res = await this.postApiReturn({
				apiKey: 'selectReadplcStatus',
				resKey: 'pointData',
				sendParam: {},
			});

			res.forEach((item, idx) => {
				if (item.type == 'ALL') {
					this.pointUse = item.cnt;
				}
				if (item.type == 'UNUSED') {
					this.pointNoUse = item.cnt;
				}
				if (item.type == 'ABNORMAL') {
					this.pointEtc = item.cnt;
				}
			});
		},
		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 ComcUseReptWidgetData = {
	grid01: {
		data: [],
		column: [],
		option: {},
	},
	grid02: {
		data: [],
		column: [],
		option: {},
	},
};
</script>

<style lang="scss">
.v-avatar {
	border-radius: 21px;
	font-size: 1.75rem;
}
.v-virtual-scroll-wrapper {
	overflow-y: auto;
	max-height: 210px;
}
</style>
