<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-select
								ref="selectEnergy"
								v-model="selectValue"
								:items="this.energyList"
								item-text="enrgNm"
								item-value="cd"
								solo
								outlined
								:hide-details="true"
								append-icon="mdi-chevron-down"
								class="v-select__custom mr-2"
							></v-select>
							<component
								ref="MainReadReptReadObjMultiPop"
								:is="'MainReadReptReadObjMultiPop'"
								:parentPrgmId="parentPrgmId"
								:eqpmYn="0"
								:popTitle="'검침대상 목록'"
								:widgetId="this.widgetId"
								@chDialogViewmainReadReptWidget="dialogViewChange"
							/>
							<v-tooltip bottom>
								<template v-slot:activator="{ on, attrs }">
									<v-icon
										class="mr-1"
										size="25"
										v-bind="attrs"
										v-on="on"
										@click="readObjDialog"
										>mdi-tooltip-plus</v-icon
									>
								</template>
								<span>품질</span>
							</v-tooltip>
							<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="px-2 pt-3">
						<v-banner single-line :style="{ paddingRight: '10px' }">
							<v-row justify="space-between" align="center" no-gutters>
								<v-col cols="auto" align="center">
									<p class="body-2 mb-0">No</p>
								</v-col>
								<v-col cols="4" align="center">
									검침개소
								</v-col>
								<v-col cols="2" align="center">
									<p class="body-2 mb-0">kW</p>
								</v-col>
								<v-col cols="2" align="center">
									상태
								</v-col>
								<v-col
									cols="2"
									align="center"
									v-for="(item, index) in readObjIdList"
									:key="item.readPlcId"
									:class="{
										'v-banner--last': index === readObjIdList.length - 1,
									}"
								>
									{{ item.readObjNm }}
								</v-col>
							</v-row>
						</v-banner>
						<div
							class="v-virtual-scroll-wrapper"
							:style="{ paddingRight: '5px' }"
						>
							<v-banner
								single-line
								v-for="(item, index) in mainReadPlcData"
								:key="item.readPlcId"
								:class="{
									'v-banner--last': index === mainReadPlcData.length - 1,
								}"
							>
								<v-row justify="space-between" align="center" no-gutters>
									<v-col cols="auto">
										<p class="body-2 mb-0">{{ item.rowNum }}</p>
									</v-col>
									<v-col cols="4">
										<div
											class="d-flex align-center"
											style="white-space: normal"
										>
											<p class="body-2 mb-0 ml-2">{{ item.readPlcNm }}</p>
										</div>
									</v-col>
									<v-col cols="2" align="center">
										<p class="body-2 mb-0">
											{{
												String(Math.floor(item.instantVal)).replace(
													/\B(?=(\d{3})+(?!\d))/g,
													',',
												)
											}}
										</p>
									</v-col>
									<v-col cols="2" align="center">
										<v-icon
											:color="
												isDarkMode
													? tableDataGetDarkColorByState(item.stat)
													: tableDataGetLightColorByState(item.stat)
											"
											size="8"
											class="mr-1"
											>mdi-circle</v-icon
										>
										<span class="body-2">{{ item.stat }}</span>
									</v-col>
									<v-col
										cols="2"
										align="center"
										v-for="(item2, index) in readObjIdList"
										:key="item2.readPlcId"
										:class="{
											'v-banner--last': index === readObjIdList.length - 1,
										}"
									>
										<span class="body-2">{{ item[item2.readObjId] }}</span>
									</v-col>
								</v-row>
							</v-banner>
						</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';
import MainReadReptReadObjMultiPop from '~/components/common/modal/MainReadReptReadObjMultiPop';

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,
		MainReadReptReadObjMultiPop,
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId][this.widgetId][
					this.widgetId + 'Data'
				];
			},
			isDarkMode: 'isDarkMode',
		}),
		selectValue: {
			get() {
				return this.energyCd;
			},
			set(value) {
				this.energyCd = value;
			},
		},
	},
	watch: {
		energyCd() {
			this.getMainReadPlcStat();
		},
	},
	beforeCreate() {
		this.$store.commit('setWidgetPageData', {
			prgmId: this.$route.query.prgmId,
			mainReadReptWidget: { mainReadReptWidgetData },
		});
	},
	async created() {
		this.energyList = await this.postApiReturn({
			apiKey: 'selectEnergy',
			resKey: 'energyData',
			sendParam: {
				useFg: 1,
			},
		});
		this.energyCd = this.energyList[0].cd;
		this.search();
		this.timer = setInterval(this.search, this.widgetReflashMm);
	},
	beforeDestroy() {
		window.clearTimeout(this.timer);
	},
	mounted() {},
	data() {
		return {
			blocNm: '',
			energyCd: '',
			energyList: [],
			mainReadPlcData: [],
			widgetId: 'mainReadReptWidget',
			dialogView: false,
			readObjIdList: [],
			readPlcIdList: [],
		};
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setWidgetChartOption: 'setWidgetChartOption',
			openDashboardWidget: 'openDashboardWidget',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postApiReturn: 'modules/list/postApiReturn',
			getEnergyList: 'modules/search/getEnergyList',
		}),
		setBlocNm() {
			this.blocNm = this.$store.state.userInfo.blocNm;
			if (this.blocNm != '') {
				this.blocNm = '[' + this.blocNm + ']';
			}
		},
		dialogViewChange() {
			this.getMainReadPlcStat();
		},
		async search() {
			this.setBlocNm();

			await this.getMainReadPlcStat();
		},
		async getMainReadPlcStat() {
			if (
				this.$store.state.pageData[this.parentPrgmId].mainReadReptWidget
					.mainReadReptWidgetData.readObjList.length > 0
			) {
				this.readObjIdList = this.$store.state.pageData[
					this.parentPrgmId
				].mainReadReptWidget.mainReadReptWidgetData.readObjList.map(item => {
					return { readObjId: item.readObjId, readObjNm: item.readObjNm };
				});
			}

			if (
				this.$store.state.pageData[this.parentPrgmId].mainReadReptWidget
					.mainReadReptWidgetData.plcKindList.length > 0
			) {
				this.readPlcIdList = this.$store.state.pageData[
					this.parentPrgmId
				].mainReadReptWidget.mainReadReptWidgetData.plcKindList.map(item => {
					return item.readPlcId;
				});
			}
			this.mainReadPlcData = await this.postApiReturn({
				apiKey: 'selectMainReadPlcStat',
				resKey: 'mainReadPlcData',
				sendParam: {
					readObjIdList: this.readObjIdList,
					readPlcIdList: this.readPlcIdList,
				},
			});

			// this.mainReadPlcData = [
			// {
			//   "rowNum" : 1,
			//   "comId" : "CDR00",
			//   "readPlcId" : "RPC000002",
			//   "readPlcNm" : "[전력] LP-1_A동메인",
			//   "readObjNm" : "Heartbit",
			//   "readObjId" : "ROI000040",
			//   "instantVal" : 11239.0,
			//   "volt" : 228.9,
			//   "ampr" : 55.1,
			//   "ROI000001" : 93613.1,
			//   "ROI000005" : 229.7,
			//   "ROI000006" : 81.8,
			//   "ROI000008" : 1,
			//   "stat" : "가동중"
			// }
			// ]
		},
		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;
			}
		},
		tableDataGetDarkColorByState: state => {
			return {
				가동중: '#01ae6a',
				미사용: '#ffb046',
				비정상: '#f6637b',
			}[state];
		},
		tableDataGetLightColorByState: state => {
			return {
				가동중: '#3cc380',
				미사용: '#ffb13b',
				비정상: '#f98694',
			}[state];
		},
		readObjDialog() {
			this.$store.state.pageData[
				this.parentPrgmId
			].mainReadReptWidget.mainReadReptWidgetData.enrgDiv = this.$refs[
				'selectEnergy'
			].selectedItems[0].enrgDiv;
			this.$refs['MainReadReptReadObjMultiPop'].dialog = true;
		},
	},
};
const mainReadReptWidgetData = {
	readObjModalData: {},
	isMulti: true,
	blocId: 0,
	blocMstrList: [],
	readObjList: [],
	energyCd: '',
	energyList: [],
	readObj: {},
	enrgDiv: '',
	plcKindList: [],
};
</script>

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