<template>
	<div class="l-layout">
		<!-- <v-row ref="rowParent">
      <v-col xl="4">
        <v-card class="pa-5">
          <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">2021-07-02 11:57 기준</v-card-subtitle>
          </div>
          <div class="d-flex align-center justify-space-between mt-8" style="height:calc(100% - 62px)">
              <div class="mr-10" :style="{ width: '210px', height: '100%', backgroundColor: 'rgba(255, 0, 0, .6)'}"></div>
              <div>
                <div class="v-box">
                  <v-icon size="48" :color="isDarkMode ? '#22273c' : '#4a568d'">$darkDashCharge</v-icon>
                  <div class="text-right">
                    <strong class="custom-title-2">2,940 <span class="body-2">Kw</span></strong>
                    <p class="body-2 mt-1 mb-0 text-color--non-activate">요금 전용전력</p>
                  </div>
                </div>
                <div class="v-box">
                  <v-icon size="48" :color="isDarkMode ? '#22273c' : '#4a568d'">$darkDashPeak</v-icon>
                  <div class="text-right">
                    <strong class="custom-title-2">333 <span class="body-2">Kw</span></strong>
                    <p class="body-2 mt-1 mb-0 text-color--non-activate">현재 피크전력</p>
                  </div>
                </div>
              </div>
          </div>
        </v-card>
      </v-col>
      <v-col xl="3">
        <v-card>
            <v-card-title>누적 사용량(전력)</v-card-title>
            <div class="px-5">
              <v-banner>
                <div class="d-flex align-center justify-space-between">
                  <v-card-subtitle class="pa-0">금년(1/1~5/18)</v-card-subtitle>
                  <strong class="custom-title-2">125,940 <span class="body-2 text-color--non-activate">kWh</span></strong>
                </div>
              </v-banner>
              <v-banner>
                <div class="d-flex align-center justify-space-between">
                  <v-card-subtitle class="pa-0">전월(4/1~4/18)</v-card-subtitle>
                  <strong class="custom-title-2">34,018 <span class="body-2 text-color--non-activate">kWh</span></strong>
                </div>
              </v-banner>
              <v-banner class="v-banner--last">
                <div class="d-flex align-center justify-space-between">
                  <v-card-subtitle class="pa-0">금월(5/1 ~5/18)</v-card-subtitle>
                  <strong class="custom-title-2">20,648 <span class="body-2 text-color--non-activate">kWh</span></strong>
                </div>
              </v-banner>
            </div>
          </v-card>
      </v-col>
      <v-col xl="3">
        <v-card>
            <v-card-title>온실가스 누적배출량</v-card-title>
            <div class="px-5">
              <v-banner>
                <div class="d-flex align-center justify-space-between">
                  <v-card-subtitle class="pa-0">금년(1/1~5/18)</v-card-subtitle>
                  <strong class="custom-title-2">28.98 <span class="body-2 text-color--non-activate">TOE</span></strong>
                </div>
              </v-banner>
              <v-banner>
                <div class="d-flex align-center justify-space-between">
                  <v-card-subtitle class="pa-0">전월(4/1~4/18)</v-card-subtitle>
                  <strong class="custom-title-2">7.82 <span class="body-2 text-color--non-activate">TOE</span></strong>
                </div>
              </v-banner>
              <v-banner class="v-banner--last">
                <div class="d-flex align-center justify-space-between">
                  <v-card-subtitle class="pa-0">금월(5/1 ~5/18)</v-card-subtitle>
                  <strong class="custom-title-2">4.48 <span class="body-2 text-color--non-activate">TOE</span></strong>
                </div>
              </v-banner>
            </div>
          </v-card>
      </v-col>
      <v-col xl="2">
        <v-card>
          <v-card-title>통신/사용 현황</v-card-title>
          <div class="px-5">
            <v-banner>
              <div class="d-flex align-center justify-space-between">
                <v-card-subtitle class="pa-0">전체검침개소</v-card-subtitle>
                <v-avatar size="42" :color="isDarkMode ? '#2fad35' : '#00c875'" min-width="64" class="font-weight-bold text-color--white-0">18</v-avatar>
              </div>
            </v-banner>
            <v-banner>
              <div class="d-flex align-center justify-space-between">
                <v-card-subtitle class="pa-0">미사용개소</v-card-subtitle>
                <v-avatar size="42" :color="isDarkMode ? '#fb8200' : '#fdab3d'" min-width="64" class="font-weight-bold text-color--white-0">9</v-avatar>
              </div>
            </v-banner>
            <v-banner class="v-banner--last">
              <div class="d-flex align-center justify-space-between">
                <v-card-subtitle class="pa-0">통신이상</v-card-subtitle>
                <v-avatar size="42" :color="isDarkMode ? '#fb5a8b' : '#ff7b8b'" min-width="64" class="font-weight-bold text-color--white-0">5</v-avatar>
              </div>
            </v-banner>
          </div>
        </v-card>
      </v-col>
      <v-col xl="3">
        <v-card>
          <v-card-title>금일 전기 사용량</v-card-title>
          <div class="px-5 pb-5" style="height:calc(100% - 70px)">
            <div class="text-center">
              <div>
                <strong class="custom-title-1">1,040 <span class="font-weight-regular custom-text-1">kWh</span></strong>
                <div class="d-flex align-center justify-center mt-3">
                  <span class="body-1 text-color--non-activate">전주 평균대비(0시-15시)</span>
                  <div class="d-flex align-baseline ml-2" :style="{ color: '#ff76bb' }">
                    <strong class="mr-1 custom-text-1">56</strong>
                    <span class="caption mr-1">kWh</span>
                    <v-icon small color="#fb5a83">mdi-arrow-up</v-icon>
                  </div>
                </div>
              </div>
            </div>
            <div class="mx-2 mt-4" style="height:calc(100% - 101px)">
              <div :style="{width: '100%', minHeight: '150px', height: '100%', backgroundColor: 'rgba(255, 0, 0, .6)'}"></div>
            </div>
          </div>
        </v-card>
      </v-col>
      <v-col xl="3">
        <v-card>
          <v-card-title>금일 전기 비용</v-card-title>
          <div class="px-5 pb-5" style="height:calc(100% - 70px)">
            <div class="text-center">
              <div>
                <strong class="custom-title-1">100 <span class="font-weight-regular custom-text-1">천</span></strong>
                <div class="d-flex align-center justify-center mt-3">
                  <span class="body-1 text-color--non-activate">전주 평균대비(0시-15시)</span>
                  <div class="d-flex align-baseline ml-2" :style="{ color: '#01ae6a' }">
                    <strong class="mr-1 custom-text-1">60</strong>
                    <span class="caption mr-1">천원</span>
                    <v-icon small color="#2fad35">mdi-arrow-down</v-icon>
                  </div>
                </div>
              </div>
            </div>
            <div class="mx-2 mt-4" style="height:calc(100% - 101px)">
              <div :style="{width: '100%', minHeight: '150px', height: '100%', backgroundColor: 'rgba(255, 0, 0, .6)'}"></div>
            </div>
          </div>
        </v-card>
      </v-col>
      <v-col
        cols="12"
        sm="12"
        xl="6"
      >
        <v-card>
          <div class="d-flex align-center justify-space-between">
            <v-card-title>에너지 사용현황</v-card-title>
            <v-card-actions class="d-flex justify-sm-end align-center pa-5">
                <span class="body-2 mr-5">현재온도 <span :style="{ color: isDarkMode ? '#2d8cf6' : '#366dbe' }">22.00 ℃</span></span>
                <v-radio-group
                    v-model="radios"
                    hide-details
                    dense
                    row
                    class="mt-0"
                >
                    <v-radio
                        label="금일"
                        value="금일"
                        :color="isDarkMode ? '#2d8cf6' : '#366dbe'"
                        on-icon="mdi-record-circle"
                        :ripple="false"
                    ></v-radio>
                    <v-radio
                        label="금월"
                        value="금월"
                        :color="isDarkMode ? '#2d8cf6' : '#366dbe'"
                        on-icon="mdi-record-circle"
                        :ripple="false"
                    ></v-radio>
                </v-radio-group>
            </v-card-actions>
          </div>
          <div class="pl-5 pr-5 pb-5" style="height:calc(100% - 70px)">
            <div :style="{ width: '100%', minheight: '200px', height: '100%', backgroundColor: 'rgba(255, 0, 0, 0.6)'}"></div>
          </div>
        </v-card>
      </v-col>
      <v-col
        cols="12"
        sm="12"
        xl="5"
      >
        <v-card>
            <div class="d-flex align-center justify-space-between">
              <v-card-title class="font-weight-bold">전력품질</v-card-title>
              <v-card-actions>
                <v-radio-group
                  v-model="radios2"
                  hide-details
                  dense
                  row
                >
                  <v-radio label="Kw" value="Kw" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
                  <v-radio label="A(R)" value="A(R)" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
                  <v-radio label="V(R)" value="V(R)" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
                  <v-radio label="V(RS)" value="V(RS)" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
                  <v-radio label="PF" value="PF" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
                  <v-radio label="Hz" value="Hz" :color="isDarkMode ? '#2d8cf6' : '#366dbe'" on-icon="mdi-record-circle" :ripple="false"></v-radio>
                </v-radio-group>
              </v-card-actions>
            </div>
            <div class="pt-0 pr-5 pl-5 pb-5" style="height:calc(100% - 70px)">
                <div :style="{ width: '100%', height: '100%', backgroundColor: 'rgba(255, 0, 0, 0.6)'}"></div>
            </div>
        </v-card>
      </v-col>
      <v-col
        cols="12"
        sm="6"
        xl="4"
      >
        <v-card>
            <v-card-title>주요 검침현황</v-card-title>
            <div class="v-virtual-scroll-wrapper px-5">
                <v-virtual-scroll
                    max-height="264"
                    :items="tableDatas"
                    :item-height="42"
                >
                    <template v-slot:default="{ item, index }">
                        <v-banner
                            single-line
                            :class="{ 'v-banner--last': index === tableDatas.length - 1 }"
                        >
                            <v-row
                                justify="space-between"
                                align="center"
                                no-gutters
                            >
                                <v-col cols="auto">
                                    <p class="body-2 mb-0">{{ item.order }}</p>
                                </v-col>
                                <v-col cols="6">
                                    <div class="d-flex align-center">
                                      <v-chip
                                          label
                                          small
                                          :ripple="false"

                                          class="body-2"
                                      >
                                      {{ item.chips }}
                                      </v-chip>
                                      <p class="body-2 mb-0 ml-3">{{ item.title.length >= 14 ? item.title.slice(0, 10) + '...' : item.title }}</p>
                                    </div>
                                </v-col>
                                <v-col cols="3">
                                    <p class="body-2 mb-0">{{ item.Kw }}</p>
                                </v-col>
                                <v-col cols="2">
                                    <v-icon :color="tableDataGetColorByState(item.state)" size="8" class="mr-1">mdi-circle</v-icon>
                                    <span class="body-2">{{ item.state }}</span>
                                </v-col>
                            </v-row>
                        </v-banner>
                    </template>
                </v-virtual-scroll>
            </div>
        </v-card>
    </v-col>
    <v-col
      cols="12"
      sm="6"
      xl="3"
    >
      <v-card height="328">
          <v-card-title>Log</v-card-title>
          <v-timeline
              dense
              class="pt-0 px-5"
          >
              <div class="v-virtual-scroll-wrapper">
                  <v-virtual-scroll
                    width="100%"
                    max-height="222"
                    :items="logList"
                    :item-height="34"
                  >
                      <template v-slot:default="{ item, index }">
                          <v-timeline-item
                            :color="index === 0 ? '#196dcb': '#6a9bf4'"
                            small
                            fill-dot
                            class="pb-0"
                          >
                            <span class="body-2 ml-4">{{ item.time }}</span>
                            <span class="body-2 ml-5">{{ item.log }}</span>
                          </v-timeline-item>
                      </template>
                  </v-virtual-scroll>
              </div>
          </v-timeline>
        </v-card>
    </v-col>
    </v-row> -->
	</div>
</template>

<script>
import { mapState } from 'vuex'; // , mapActions
import DateUtility from '~/plugins/dateUtility';

let myTitle;
//const myPrgmId = 'myIndex';
const myPrgmId = 'PRG0001';
export default {
	layout: 'default',
	asyncData(context) {
		const myState = context.store.state;
		context.store.commit('setActiveMenuInfo', myState.menuData[myPrgmId]);
		myTitle =
			myState.activeMenuInfo != null ? myState.activeMenuInfo.menuNm : '';
	},
	meta: {
		title: () => {
			return myTitle;
		},
		prgmId: myPrgmId,
		closable: false,
	},
	computed: {
		...mapState({
			isDarkMode: 'isDarkMode',
			myHome: 'myHome',
		}),
	},
	data() {
		return {
			myPrgmId: myPrgmId,
		};
	},

	beforeCreate() {
		this.$store.dispatch('chkOpenTabList', {
			key: 'create',
			prgmId: myPrgmId,
			defaultData: defaultData,
		});
	},
	created() {},
	mounted() {},
	beforeDestroy() {},
	methods: {},
};
const defaultData = {};
</script>

<style lang="scss">
.v-avatar {
	border-radius: 21px;
	font-size: 1.75rem;
}
</style>
