<template>
  <div class="l-layout">
    <!-- <h1 class="h1-title">대시보드</h1> -->
    <PageTitle text="대시보드" />
    <!-- <CheckBox
      :parentPrgmId="myPrgmId"
      label="사용여부"
      valueNm="useFg"
      :required="true"
    />

    <component
      :is="'RadioStandard'"
      :parentPrgmId="myPrgmId"
      label="기준"
      :labelCols="2"
      :textCols="10"
    /> -->
    <v-row ref="rowParent">
      <a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
        <!--<a-card class="pa-5" :border="false">
				<div style="height: 10%">
						<v-row>
							<v-col :cols="6">
								<v-card-title class="pa-0">에너지 사용량</v-card-title>
							</v-col>
							<v-col :cols="6">
								<v-card-subtitle class="mt-0 pa-0 text-right">
									{{ dtToday }} 기준</v-card-subtitle
								>
							</v-col>
						</v-row>
					</div>
			<p>Test card 1</p>
			<a-button>new new</a-button>
			<BtnSearch />
			</a-card> -->
        <!-- <AntCard
          :ref="'dashBoard_' + chart_01"
          @click="chartClickEvent('dashBoard_' + chart_01, $event)"
        > -->
        <v-card
          style="height: 312px"
          class="pa-5"
          :ref="'dashBoard_' + chart_01"
          @click="chartClickEvent('dashBoard_' + chart_01, $event)"
        >
          <!-- <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">
							{{ dtToday }} 기준</v-card-subtitle
						>
					</div> -->
          <!-- Card header -->
          <div style="height: 10%">
            <v-row>
              <div
                style="
                  position: absolute;
                  left: 0;
                  top: 10px;
                  width: 4px;
                  height: 50px;
                  background-color: #91caff;
                  border-radius: 2px;
                "
              ></div>

              <v-col :cols="6">
                <v-card-title class="pa-0">에너지 사용량</v-card-title>
              </v-col>
              <v-col :cols="6">
                <v-card-subtitle class="mt-0 pa-0 text-right">
                  {{ dtToday }} 기준</v-card-subtitle
                >
              </v-col>
            </v-row>
          </div>

          <div style="height: 10%"></div>
          <!-- Three row above chart-->
          <v-row>
            <v-col :cols="6" style="width: 100%; height: 100%">
              <div
                class="d-flex align-left justify-space-between flex-column"
                style="height: 33%; text-align: center"
              >
                <v-row>
                  <v-col :cols="12" style="text-align: left"> 금일 사용량 : </v-col>
                </v-row>
                <v-row>
                  <v-col cols="auto" style="text-align: left">
                    <p class="card-text-info">{{ enrgUsageDayVal }}</p>
                  </v-col>
                  <v-col :cols="3" style="text-align: left"> MWh </v-col>
                </v-row>
              </div>

              <div
                class="d-flex align-left justify-space-between flex-column"
                style="height: 33%; text-align: center"
              >
                <v-row>
                  <v-col :cols="12" style="text-align: left"> 금월 누적량 : </v-col>
                </v-row>
                <v-row>
                  <v-col cols="auto" style="text-align: left">
                    <p class="card-text-info">{{ enrgUsageMnthVal }}</p>
                  </v-col>
                  <v-col :cols="3" style="text-align: left"> MWh </v-col>
                </v-row>
              </div>
              <div
                class="d-flex align-left justify-space-between flex-column"
                style="height: 33%; text-align: center"
              >
                <v-row>
                  <v-col :cols="12" style="text-align: left"> 금월 계획량 : </v-col>
                  <v-col cols="auto" style="text-align: left">
                    <p class="card-text-info">{{ enrgUsagePlanVal }}</p>
                  </v-col>
                  <v-col :cols="3" style="text-align: left"> MWh </v-col>
                </v-row>
              </div>
              <!-- <div style="height: 10%;"></div> -->
            </v-col>

            <!-- Energy usage chart -->
            <div style="height: 5%"></div>
            <v-col :cols="6" style="width: 100%">
              <div
                :style="{
                  width: '300px',
                  height: '100%',
                  marginLeft: '-74px',
                  position: 'relative',
                }"
              >
                <!-- <div :style="{ width: '100%', height: '130px' }"> -->
                     
                <v-progress-circular
                  v-if="isGaugeLoading"
                  indeterminate
                  color="primary"
                  size="64"
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  "
                ></v-progress-circular>

                <component
                  :style="{ width: '300px', height: '100%' }"
                  :is="loadChart_01 ? 'Chart' : null"
                  :parentPrgmId="myPrgmId"
                  :chartName="'enrgUsageGauge'"
                  :ref="'dashBoard_' + chart_01"
                />
              </div>
            </v-col>
          </v-row>
          <!-- <div style="height: 5%"></div> -->
          <!-- </AntCard> -->
        </v-card>
      </a-col>
      <!-- greenhouse gas emissions-->

      <a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
        <!-- <AntCard> -->
        <v-card class="pa-5">
          <!-- <div
            style="
              position: absolute;
              left: 0;
              top: 10px;
              width: 4px;
              height: 50px;
              background-color: #91caff;
              border-radius: 2px;
            "
          ></div>
          <v-card-title>온실가스 배출량</v-card-title> -->

          <div style="height: 10%">
            <v-row>
              <div
                style="
                  position: absolute;
                  left: 0;
                  top: 10px;
                  width: 4px;
                  height: 50px;
                  background-color: #91caff;
                  border-radius: 2px;
                "
              ></div>

              <v-col :cols="6">
                <v-card-title class="pa-0">온실가스 배출량</v-card-title>
              </v-col>
              <v-col :cols="6">
                <v-card-subtitle class="mt-0 pa-0 text-right"> (tCO2eq)</v-card-subtitle>
              </v-col>
            </v-row>
          </div>

          <div style="margin-top: 25px">
            <v-banner>
              <div class="d-flex align-center justify-space-between">
                <span class="pa-0 card-text-title">금일:</span>
                <strong class="custom-title-3"
                  ><span class="card-text-info">{{ CO2DayVal }}</span>
                  <!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
                </strong>
              </div>
            </v-banner>
            <v-banner>
              <div class="d-flex align-center justify-space-between">
                <span class="pa-0 card-text-title">당월: </span>
                <strong class="custom-title-3"
                  ><span class="card-text-info">{{ CO2MnthVal }}</span>
                  <!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
                </strong>
              </div>
            </v-banner>
            <v-banner>
              <div class="d-flex align-center justify-space-between">
                <span class="pa-0 card-text-title">전월: </span>
                <strong class="custom-title-3"
                  ><span class="card-text-info">{{ CO2BefMnthVal }}</span>
                  <!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
                </strong>
              </div>
            </v-banner>
            <v-banner>
              <div class="d-flex align-center justify-space-between">
                <span class="pa-0 card-text-title">금년: </span>
                <strong class="custom-title-3"
                  ><span class="card-text-info">{{ CO2YearVal }}</span>
                  <!-- <span class="body-2 text-color--non-activate">tCO2eq</span> -->
                </strong>
              </div>
            </v-banner>
          </div>
          <!-- </AntCard> -->
        </v-card>
      </a-col>
      <!-- Performance compared to the previous day-->
      <a-col :sm="24" :xl="12" :style="{ padding: '5px' }">
        <!-- <AntCard> -->
        <v-card>
          <div
            style="
              position: absolute;
              left: 0;
              top: 10px;
              width: 4px;
              height: 50px;
              background-color: #91caff;
              border-radius: 2px;
            "
          ></div>
          <!-- <div class="d-flex align-center justify-space-between" :style="{ width: '100%', height: '25%' }"> -->
          <v-card-title :style="{ height: '15%' }">전일 대비 실적</v-card-title>
          <!-- </div> -->
          <div :style="{ width: '100%', height: '234px', overflow: 'visible' }">
            <v-progress-circular
              v-if="isLine1Loading"
              indeterminate
              color="primary"
              size="64"
              style="
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              "
            ></v-progress-circular>
            <component
              :style="{ width: '100%', height: '100%' }"
              :is="loadChart_02 ? 'Chart' : null"
              :parentPrgmId="myPrgmId"
              :chartName="'compareEqpmTotChart'"
              :ref="'dashBoard_' + chart_02"
            />
          </div>
          <!-- </AntCard> -->
        </v-card>
      </a-col>
      <!-- </v-row>	 -->
      <!-- <v-row ref="rowParent2" style="height: 33%"> -->
      <!-- <v-col cols="12" sm="6" xl="3" style="height: 33%"> -->
      <a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
        <v-card
          class="pa-5"
          :ref="'dashBoard_' + chart_03"
          @click="chartClickEvent('dashBoard_' + chart_03, $event)"
        >
          <!-- <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">
							{{ dtToday }} 기준</v-card-subtitle
						>
					</div> -->
          <div style="height: 10%">
            <v-row>
              <div
                style="
                  position: absolute;
                  left: 0;
                  top: 10px;
                  width: 4px;
                  height: 50px;
                  background-color: #91caff;
                  border-radius: 2px;
                "
              ></div>
              <v-col :cols="6">
                <v-card-title class="pa-0">금일 효율 현황</v-card-title>
              </v-col>
            </v-row>
          </div>
          <div style="height: 10%"></div>

          <!-- <div
							class="d-flex align-center justify-space-between"
              style="height: 33%; text-align: center"
						>
							<v-row>
                <v-col :cols="12"> &nbsp; </v-col>
							</v-row>
            </div> -->
          <v-row>
            <v-col :cols="6" style="width: 100%; height: 100%">
              <div
                class="d-flex align-left justify-space-between flex-column"
                style="height: 33%; text-align: center"
              >
                <v-row>
                  <v-col :cols="12" style="text-align: left"> 가이드 발생 건 수 : </v-col>
                </v-row>
                <v-row>
                  <v-col cols="auto" style="text-align: left">
                    <!-- <p class="textInfo">{{ ngDtlCnt }}</p> -->
                    <p class="card-text-info">{{ ngDtlCnt }}</p>
                  </v-col>
                  <v-col :cols="3" style="text-align: left"> 건 </v-col>
                </v-row>

                <!-- <v-row>
								<v-col :cols="1"> </v-col>
                  <v-col :cols="5" style="text-align: right"> 가이드 발생 건 수 : </v-col>
                  <v-col :cols="3" style="text-align: right">
									{{ ngDtlCnt }}
								</v-col>
                  <v-col :cols="1" style="text-align: left"> 건 </v-col>
								<v-col :cols="2"> </v-col>
                </v-row> -->
              </div>
              <div
                class="d-flex align-left justify-space-between flex-column"
                style="height: 33%; text-align: center"
              >
                <v-row>
                  <v-col :cols="12" style="text-align: left"> 가이드 조치 건 수 : </v-col>
                </v-row>
                <v-row>
                  <v-col cols="auto" style="text-align: left">
                    <!-- <p class="textInfo">{{ ngDtlSolvCnt }}</p> -->
                    <p class="card-text-info">{{ ngDtlSolvCnt }}</p>
                  </v-col>
                  <v-col :cols="3" style="text-align: left"> 건 </v-col>
                </v-row>
                <!-- <v-row>
								<v-col :cols="1"> </v-col>
                  <v-col :cols="5" style="text-align: right"> 가이드 조치 건 수 : </v-col>
                  <v-col :cols="3" style="text-align: right">
									{{ ngDtlSolvCnt }}
								</v-col>
                  <v-col :cols="2" style="text-align: left"> 건 </v-col>
								<v-col :cols="1"> </v-col>
                </v-row> -->
              </div>
            </v-col>

            <!-- <div style="height: 10%;"></div> -->

            <div style="height: 5%"></div>
            <v-col :cols="6" style="width: 100%">
              <div
                :style="{
                  width: '300px',
                  height: '100%',
                  marginLeft: '-74px',
                  position: 'relative',
                }"
              >
                <!-- <div :style="{ width: '100%', height: '130px' }"> -->

                <v-progress-circular
                  v-if="isGauge2Loading"
                  indeterminate
                  color="primary"
                  size="64"
                  style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  "
                ></v-progress-circular>
                <component
                  :style="{ width: '300px', height: '220px' }"
                  :is="loadChart_03 ? 'Chart' : null"
                  :parentPrgmId="myPrgmId"
                  :chartName="'todayEfficiencyStatus'"
                  :ref="'dashBoard_' + chart_03"
                />
              </div>
            </v-col>
          </v-row>
          <!-- <div style="height: 5%"></div> -->
        </v-card>
        <!-- </v-col> -->
      </a-col>

      <!-- <v-col cols="12" sm="6" xl="3" style="height: 33%"> -->
      <a-col :sm="12" :xl="6" :style="{ padding: '5px' }">
        <v-card :ref="'dashBoard_' + chart_04">
          <div
            style="
              position: absolute;
              left: 0;
              top: 10px;
              width: 4px;
              height: 50px;
              background-color: #91caff;
              border-radius: 2px;
            "
          ></div>
          <v-card-title>금일 NG 설비 Top 10</v-card-title>
          <div :style="{ width: '100%', height: '75%' }">
            <v-progress-circular
              v-if="isPieLoading"
              indeterminate
              color="primary"
              size="64"
              style="
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              "
            ></v-progress-circular>
            <component
              :style="{ width: '100%', height: '100%' }"
              :is="loadChart_04 ? 'Chart' : null"
              :parentPrgmId="myPrgmId"
              :chartName="'todayNgTopTen'"
              :ref="'dashBoard_' + chart_04"
              @click="topTenChartClickEvent"
            />
          </div>
        </v-card>
        <!-- </v-col> -->
      </a-col>

      <!-- <v-col cols="12" sm="12" xl="6" style="height: 33%"> -->
      <a-col :sm="24" :xl="12" :style="{ padding: '5px' }">
        <v-card>
          <div
            style="
              position: absolute;
              left: 0;
              top: 10px;
              width: 4px;
              height: 50px;
              background-color: #91caff;
              border-radius: 2px;
            "
          ></div>
          <!-- <div class="d-flex align-center justify-space-between"> -->
          <v-card-title :style="{ height: '15%' }">전일 대비 NG</v-card-title>
          <!-- </div> -->
          <div :style="{ width: '100%', height: '80%' }">
            <v-progress-circular
              v-if="isLine2Loading"
              indeterminate
              color="primary"
              size="64"
              style="
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              "
            ></v-progress-circular>
            <component
              :style="{ width: '100%', height: '100%' }"
              :is="loadChart_05 ? 'Chart' : null"
              :parentPrgmId="myPrgmId"
              :chartName="'compareEqpmTGdChart'"
              :ref="'dashBoard_' + chart_05"
            />
          </div>
        </v-card>
        <!-- </v-col> -->
      </a-col>
      <!-- </v-row> -->
      <!-- <v-row ref="rowParent3" style="height: 33%"> -->
      <v-col cols="12" sm="12" xl="12" style="height: 300px">
        <v-card style="border-radius: 4px" class="pb-5">
          <div style="height: 20px"></div>
          <div class="h100 px-5" style="height: calc(100% - 30px)">
            <div ref="gridParent" class="h100 w100">
              <component
                :is="loadGrid ? 'Grid' : null"
                :gridName="'dashBoard_grid_01'"
                :parentPrgmId="myPrgmId"
                :ref="gridName"
                @dblClick="gridClickEvent"
              />
            </div>
          </div>
        </v-card>
      </v-col>
    </v-row>
    <!-- <h2>대시보드 입니다.</h2>
    <v-btn @click="axiosTest()">axios 테스트</v-btn> -->
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex"; // , mapActions
import Vue from "vue";
import { resize } from "@/mixin/resize.js";
import DateUtility from "~/plugins/dateUtility";
import Utility from "~/plugins/utility";
import Grid from "~/components/common/Grid";
import Chart from "~/components/common/Chart";

import AntCard from "~/components/common/card/AntCard";

import UnusedStatPopPage from "~/components/common/modal/UnusedStatPopPage";
import EtcStatPopPage from "~/components/common/modal/EtcStatPopPage";
import BtnSearch from "~/components/common/button/BtnSearch";
import CheckBox from "~/components/common/checkbox/CheckBox";
import RadioStandard from "~/components/common/RadioStandard";
import PageTitle from "~/components/common/PageTitle";

import getGaugeChartOption from "~/components/common/chartoptions/GaugeChart";
import getLineChartOption from "~/components/common/chartoptions/LineChart";
let myTitle;
//const myPrgmId = "PRG0021";
let myPrgmId;
export default {
  mixins: [resize],
  layout: "default",
  async asyncData(context) {
    const myState = context.store.state;
    // context.store.commit("setActiveMenuInfo", myState.menuData[myPrgmId]);
    // myTitle = myState.activeMenuInfo.menuNm;
    //const menuId = context.route.query.prgmId;
    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: false,
  },
  components: {
    DateUtility,
    Grid,
    Chart,
    UnusedStatPopPage,
    EtcStatPopPage,
    PageTitle
  },
  computed: {
    ...mapState({
      myHome: "myHome",
      pageData: (state) => state.pageData[myPrgmId],
      isDarkMode: "isDarkMode",
      myHome: "myHome",
    }),
  },
  watch: {
    rdbElecQual() {
      //전력품질 라디오버튼 변경
      this.getElecQuality();
    },
    rdbEnrgUsage() {
      //금일/금월 라디오버튼 변경
      this.getEnrgUsage();
    },
    isDarkMode(newVal) {
      // let chartOption = this.getGuageChartOption2(this.chart_01);
      let chartOption = getGaugeChartOption({
        title: this.chart_01,
        isDarkMode: this.isDarkMode,
      });
      chartOption["series"][0]["data"][0].value = this.$store.state.pageData[myPrgmId][
        this.chart_01
      ]?.series?.[0]?.data?.[0]?.value;
      this.$store.state.pageData[myPrgmId][this.chart_01] = chartOption;

      // let chartOption3 = this.getGuageChartOption2(this.chart_03);
      let chartOption3 = getGaugeChartOption({
        title: this.chart_03,
        isDarkMode: this.isDarkMode,
      });
      chartOption3["series"][0]["data"][0].value = this.$store.state.pageData[myPrgmId][
        this.chart_03
      ]?.series?.[0]?.data?.[0]?.value;
      this.$store.state.pageData[myPrgmId][this.chart_03] = chartOption3;

      let mockres = this.$store.state.pageData[myPrgmId][this.chart_04];
      this.setChart04Data(mockres);

      this.setChart02Data("test");

      this.setChart05Data("test");
    },
    // beforeDestroy() {
    // 	this.cancelAutoUpdate();
    // 	this.chkOpenTabList({ key: 'destroy', prgmId: myPrgmId });
    // },
  },
  async beforeCreate() {
    myPrgmId = this.$route.query.prgmId;
    // openTabList
    this.$store.dispatch("chkOpenTabList", {
      key: "create",
      prgmId: myPrgmId,
      defaultData: defaultData,
    });
  },
  async created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.cancelAutoUpdate();
    this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
  },
  data() {
    return {
      myPrgmId: myPrgmId,
      dtToday: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
      enrgUsageDayVal: "",
      enrgUsageMnthVal: "",
      enrgUsagePlanVal: "",
      CO2DayVal: "",
      CO2MnthVal: "",
      CO2PlanVal: "",
      CO2BefMnthVal: "",
      CO2YearVal: "",
      ngDtlCnt: "",
      ngDtlSolvCnt: "",

      //차트
      chart_01: "enrgUsageGauge",
      loadChart_01: false,
      isGaugeLoading: true,

      chart_02: "compareEqpmTotChart",
      loadChart_02: false,
      isLine1Loading: true,

      chart_03: "todayEfficiencyStatus",
      loadChart_03: false,
      isGauge2Loading: true,

      chart_04: "todayNgTopTen",
      loadChart_04: false,
      isPieLoading: true,

      chart_05: "compareEqpmTGdChart",
      loadChart_05: false,
      isLine2Loading: true,

      gridName: "dashBoard_grid_01",
      loadGrid: false,
      isGridLoading: true,
    };
  },
  methods: {
    ...mapMutations({
      setChartXAxisData: "setChartXAxisData",
      setChartSeries: "setChartSeries",
      setChartOption: "setChartOption",
      setChartColorData: "setChartColorData",
      setGridOption: "setGridOption",
      setGridColumn: "setGridColumn",
      setGridData: "setGridData",
      setPageData: "setPageData",
    }),
    ...mapActions({
      postApi: "modules/list/postApi",
      postApiReturn: "modules/list/postApiReturn",
      chkOpenTabList: "chkOpenTabList",
    }),
    cancelAutoUpdate() {
      clearInterval(this.timer);
    },
    async init() {
      // this.search();
      await this.gridInit();
      await new Promise((resolve) => setTimeout(resolve, 1500));
      if (this.$router.currentRoute.fullPath == this.myHome.root) {
        this.dtToday = Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm");

        await this.getEnrgAndCO2Data();
        await this.getCompareEqpmTotData();
        await this.getTodayEfficiencyStatus();
        await this.getTodayNgTopTen();
        await this.getCompareEqpmTGdChart();
        await this.getGridData();
      }
      this.timer = setInterval(this.search, 90000); //15분 주기마다 갱신
    },
    async search() {
      await new Promise((resolve) => setTimeout(resolve, 1500));
      if (this.$router.currentRoute.fullPath == this.myHome.root) {
        this.dtToday = Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm");

        await this.getEnrgAndCO2Data();
        await this.getCompareEqpmTotData();
        await this.getTodayEfficiencyStatus();
        await this.getTodayNgTopTen();
        await this.getCompareEqpmTGdChart();
        await this.getGridData();
      }
    },
    async gridInit() {
      this.loadGrid = false;
      // let gridHeight = 241;
      var gridHeight;
      if (this.$refs.gridParent != undefined) {
        // gridHeight = gridHeight*0.9
        gridHeight = this.$refs.gridParent.offsetHeight - 35;
        // console.log("gridHeight : ", gridHeight);
      }
      const myOptions = {
        // scrollX: false,
        setScroll: true,
        columnOptions: {
          //frozenCount:2,
          minWidth: 70,
          resizable: true,
        },
        header: {
          height: 38,
        },
      };
      this.setGridOption({
        gridKey: this.gridName,
        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
      });
      let hhMapper = {
        "00": "00~01",
        "01": "01~02",
        "02": "02~03",
        "03": "03~04",
        "04": "04~05",
        "05": "05~06",
        "06": "06~07",
        "07": "07~08",
        "08": "08~09",
        "09": "09~10",
        10: "10~11",
        11: "11~12",
        12: "12~13",
        13: "13~14",
        14: "14~15",
        15: "15~16",
        16: "16~17",
        17: "17~18",
        18: "18~19",
        19: "19~20",
        20: "20~21",
        21: "21~22",
        22: "22~23",
        23: "23~00",
      };
      const myColumns = [
        {
          header: "NO",
          name: "rowNum",
          width: 70,
          align: "center",
          // hidden: true,
        },
        {
          header: "발생일",
          name: "totDttm",
          align: "center",
          formatter({ value }) {
            return Utility.setFormatDate(value, "YYYY-MM-DD");
          },
          width: 100,
        },
        {
          header: "발생 시간대",
          name: "totTime",
          align: "center",
          formatter({ value }) {
            return hhMapper[Utility.setFormatDate(value, "HH")];
          },
          width: 100,
        },
        { header: "빌딩", name: "fabNm", align: "left", width: 50 },
        { header: "빌딩", name: "fabId", align: "left", hidden: true },
        { header: "설비 그룹", name: "eqpmGrpNm", align: "left", width: 100 },
        { header: "설비 그룹", name: "eqpmGrpId", align: "left", hidden: true },
        { header: "설비", name: "eqpmNm", align: "left", width: 130 },
        { header: "설비", name: "eqpmId", align: "left", hidden: true },
        { header: "가이드 지표명", name: "gdIdxNm", align: "left", width: 200 },
        {
          header: "가이드 지표명",
          name: "gdIdxId",
          align: "left",
          hidden: true,
        },
        { header: "주의", name: "careStndVal", align: "right", width: 40 },
        { header: "경고", name: "warnStndVal", align: "right", width: 40 },
        { header: "가이드", name: "totVal", align: "right", width: 40 },
        { header: "알람 내용", name: "alrmMsg", align: "left" },
        { header: "설비종류", name: "eqpmKindId", align: "left", hidden: true },
        { header: "설비종류", name: "eqpmKindNm", align: "left", hidden: true },
      ];

      this.setGridColumn({
        gridKey: this.gridName,
        value: myColumns,
      });

      this.loadGrid = true;
      // this.getGridData();
    },
    async getGridData() {
      this.loadGrid = false;
      // console
      const res = await this.postApiReturn({
        apiKey: "selectIssueGdIdxData",
        resKey: "issueGdIdxData",
        sendParam: {},
      });
      // let fakeData = [
      // 	{
      // 		'alrmKind' : "WARN",
      // 		'alrmMsg' : "냉동기 전류부하율이 @V1%로 높음 (평균 @V2% 대비 @V3% 낮음) -@EQPM",
      // 		'careStndVal' : 50,
      // 		'warnStndVal' : 60,
      // 		'eccId' : "ECC000004",
      // 		'eqpmGrpNm' : "냉동기저온1",
      // 		'eqpmGrpId' : "EQG000001",
      // 		'eqpmKindId' : "EKIND0001",
      // 		'eqpmId' : "CHI-201",
      // 		'eqpmNm' : "CHI-201",
      // 		'fabId' : "ECC000003",
      // 		'fabNm' : "삼천1공장",
      // 		'gdIdxId' : "GD00001",
      // 		'gdIdxNm' : "전류부하율 평균 편차",
      // 		'rowKey' : 0,
      // 		'rowNum' : 1,
      // 		'rowSpanMap' : {},
      // 		'sortKey' : 0,
      // 		'sortSeq' : 1,
      // 		'totDttm' : Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
      // 		'totTime' : '2022-12-20 02:43:24',
      // 		'totVal' : 70
      // 	},
      // 	{
      // 		'alrmKind' : "WARN",
      // 		'alrmMsg' : "냉동기 냉각수 유량 부하율이 @V1%로 높음 -@EQPM",
      // 		'careStndVal' : 70,
      // 		'warnStndVal' : 100,
      // 		'eccId' : "ECC000004",
      // 		'eqpmGrpNm' : "냉동기고온1",
      // 		'eqpmGrpId' : "EQG000001",
      // 		'eqpmKindId' : "EKIND0001",
      // 		'eqpmId' : "CHI-302",
      // 		'eqpmNm' : "CHI-302",
      // 		'fabId' : "ECC000004",
      // 		'fabNm' : "삼천1공장",
      // 		'gdIdxId' : "GD00011",
      // 		'gdIdxNm' : "냉각수 유량 부하율",
      // 		'rowKey' : 0,
      // 		'rowNum' : 2,
      // 		'rowSpanMap' : {},
      // 		'sortKey' : 0,
      // 		'sortSeq' : 1,
      // 		'totDttm' : Utility.setFormatDate(new Date(), 'YYYY-MM-DD'),
      // 		'totTime' : '2022-12-20 07:23:38',
      // 		'totVal' : 120
      // 	}

      // ]

      // this.setGridData({
      // 	gridKey: this.gridName,
      // 	value: fakeData,
      // });

      this.setGridData({
        gridKey: this.gridName,
        value: res,
      });

      this.loadGrid = true;
    },
    async getEnrgAndCO2Data() {
      this.loadChart_01 = false;
      const res = await this.postApiReturn({
        apiKey: "selectEnrgAndCO2Data",
        resKey: "enrgAndCO2Data",
        sendParam: {},
      });
      // //////////////////////////////////////////
      // // 시연용 data 세팅
      // res[0]['dayVal'] = 18.0;
      // res[0]['mnthVal'] = 507.0;
      // res[0]['planVal'] = 653.0;
      // res[0]['co2DayVal'] = 9.0;
      // res[0]['co2MnthVal'] = 238.0;
      // res[0]['co2PlanVal'] = 307.0;
      // res[0]['co2YearVal'] = 1224.0;
      // res[0]['effcRt'] = 77.59;
      // //////////////////////////////////////////
      // 대시보드 표기
      this.enrgUsageDayVal = this.numberFormatter(
        parseFloat(res[0]["dayVal"]).toFixed(0)
      );
      this.enrgUsageMnthVal = this.numberFormatter(
        parseFloat(res[0]["mnthVal"]).toFixed(0)
      );
      this.enrgUsagePlanVal = this.numberFormatter(
        parseFloat(res[0]["planVal"]).toFixed(0)
      );
      // 대시보드 표기
      this.CO2DayVal = this.numberFormatter(parseFloat(res[0]["co2DayVal"]).toFixed(0));
      this.CO2MnthVal = this.numberFormatter(parseFloat(res[0]["co2MnthVal"]).toFixed(0));
      this.CO2PlanVal = this.numberFormatter(parseFloat(res[0]["co2PlanVal"]).toFixed(0));
      this.CO2BefMnthVal = this.numberFormatter(
        parseFloat(res[0]["co2BefMnthVal"]).toFixed(0)
      );
      this.CO2YearVal = this.numberFormatter(parseFloat(res[0]["co2YearVal"]).toFixed(0));
      this.$nextTick(() => {
        let chartOption = null;
        // chartOption = this.getGuageChartOption2(this.chart_01);
        chartOption = getGaugeChartOption({
          title: "Energy Usage",
          isDarkMode: this.isDarkMode,
        });
        console.log("charto:", chartOption);
        chartOption["series"][0]["data"][0].value =
          res[0]["effcRt"] != null ? res[0]["effcRt"] : 0;
        this.$store.state.pageData[myPrgmId][this.chart_01] = chartOption;
        // if(res[0]['effcRt'] == undefined || res[0]['effcRt'] == null){
        // 	res[0]['effcRt'] = null;
        // }
        // this.setChart01Data(
        // 	{
        // 		effcRt : res[0]['effcRt'],
        // 		stat : res[0]['effcRt'] < 33 ? '정상' : res[0]['effcRt'] > 66 ? '위험' : '주의'
        // 	}
        // );
      });
      this.loadChart_01 = true;
      this.isGaugeLoading = false;
    },
    async getCompareEqpmTotData() {
      this.loadChart_02 = false;
      const res = await this.postApiReturn({
        apiKey: "selectCompareEqpmTotData",
        resKey: "compareEqpmTotData",
        sendParam: {},
      });
      this.$nextTick(() => {
        this.setChart02Data(res);
      });
      this.loadChart_02 = true;
      this.isLine1Loading = false;
    },
    async getTodayEfficiencyStatus() {
      this.loadChart_03 = false;
      const res = await this.postApiReturn({
        apiKey: "selectTodayEfficiencyStatus",
        resKey: "todayEfficiencyStatus",
        sendParam: {},
      });

      // 대시보드 표기
      this.ngDtlCnt = this.numberFormatter(res[0]["ngDtlCnt"]);
      this.ngDtlSolvCnt = this.numberFormatter(res[0]["ngDtlSolvCnt"]);
      let effcRt = this.numberFormatter(
        (res[0]["ngDtlSolvCnt"] / res[0]["ngDtlCnt"]) * 100
      );
      // let effcRt = this.numberFormatter(78.21)
      this.$nextTick(() => {
        let chartOption = null;
        // chartOption = this.getGuageChartOption2(this.chart_03);
        chartOption = getGaugeChartOption({
          title: "Today Efficiency",
          isDarkMode: this.isDarkMode,
        });
        chartOption["series"][0]["data"][0].value = isNaN(effcRt) ? 0 : effcRt;
        this.$store.state.pageData[myPrgmId][this.chart_03] = chartOption;
      });
      this.loadChart_03 = true;
      this.isGauge2Loading = false;
      // this.$ref.dashBoard_todayEfficiencyStatus.resize();
    },
    async getTodayNgTopTen() {
      this.loadChart_04 = false;
      const res = await this.postApiReturn({
        apiKey: "selectTodayNgTopTen",
        resKey: "todayNgTopTen",
        sendParam: {},
      });
      this.setPageData({
        chart04Data: res,
      });
      this.$nextTick(() => {
        this.setChart04Data(res);
      });
      this.loadChart_04 = true;
      this.isPieLoading = false;
    },
    async getCompareEqpmTGdChart() {
      this.loadChart_05 = false;
      const res = await this.postApiReturn({
        apiKey: "selectCompareEqpmTGdChart",
        resKey: "compareEqpmTGdChart",
        sendParam: {},
      });
      this.$nextTick(() => {
        this.setChart05Data(res);
      });
      this.loadChart_05 = true;
      this.isLine2Loading = false;
    },
    async setChart05Data(data) {
      if (this.$store.state.pageData[this.myPrgmId].compareEqpmTGdChart != undefined) {
        this.$store.state.pageData[this.myPrgmId].compareEqpmTGdChart.series = [];
      }
      if (!data.length) {
        return;
      }
      let xAxisData = [];
      let seriesData = [];
      // let legendData = {
      //   befBefVal: "전전일",
      //   befVal: "전일",
      //   dayVal: "금일",
      // };

    //   let legendData = ["전전일", "전일", "금일"];

      let befBefValDataList = {
        name: "전전일",
        type: "line",
        // 'smooth' : true,
        showSymbol: false,
        lineStyle: { width: 2 },
        data: [],
      };
      let befValDataList = {
        name: "전일",
        type: "line",
        // 'smooth' : true,
        showSymbol: false,
        lineStyle: { width: 2 },
        data: [],
      };
      let dayValDataList = {
        name: "금일",
        type: "line",
        // 'smooth' : true,
        showSymbol: false,
        lineStyle: { width: 2 },
        data: [],
      };
      // for (var i = 0; i < data.length; i++) {
      //////없애야함//////
      // let total = 0;
      let hour = Utility.setFormatDate(
        new Date().setTime(new Date().getTime() - 1 * 60 * 60 * 1000),
        "HH"
      );
      //////없애야함//////
      for (var i = 0; i < 24; i++) {
        if (data[i].tm != undefined) {
          xAxisData.push(parseInt(data[i].tm));
        } else {
          xAxisData.push(i);
        }

        // 	//////없애야함//////
        // 	let num = parseInt(Math.random() * (13 - 7) + 7);
        // 	let num2 = parseInt(Math.random() * (11 - 6) + 6);
        // 	let num3 = parseInt(Math.random() * (10 - 5) + 5);
        // 	let tempTotal = num + num2 + num3;
        // 	total += tempTotal;
        // 	let befBefVal = num;
        // 	let befVal = num2;
        // 	let dayVal = num3;
        // 	//////////////////
        let befBefVal = data[i].befBefVal != undefined ? data[i].befBefVal : 0;
        let befVal = data[i].befVal != undefined ? data[i].befVal : 0;

        befBefValDataList["data"].push(befBefVal);
        befValDataList["data"].push(befVal);
        if (i <= parseInt(hour)) {
          let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
          dayValDataList["data"].push(dayVal);
        }
      }
      seriesData = [befBefValDataList, befValDataList, dayValDataList];
      //////없애야함//////
      // this.ngDtlCnt = this.numberFormatter(total);
      // this.ngDtlSolvCnt = this.numberFormatter(parseInt(total*3/4)+12);
      //////없애야함//////

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

      // {
      //   grid: {
      //     left: "3%",
      //     right: "5%",
      //     top: "25%",
      //     // bottom: '15%',
      //     containLabel: true,
      //   },
      //   legend: {
      //     data: legendData,
      //     icon: "circle",
      //     top: "0%", // Position from the top
      //     right: "5%", // Position from the right
      //     orient: "horizontal", // Ensures the legend items are laid out horizontally
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     splitLine: false,
      //     data: xAxisData,
      //   },
      //   yAxis: {
      //     type: "value",
      //     position: "left",
      //     // name: 'kWh',
      //     // splitLine: false,
      //   },
      //   series: seriesData,
      // };

      console.log("chart 5 data:", seriesData);
      await this.$nextTick(() => {});
      this.setChartOption({
        chartKey: "compareEqpmTGdChart",
        value: chartOption,
      });
    },
    async setChart04Data(data) {
      if (this.$store.state.pageData[this.myPrgmId].todayNgTopTen != undefined) {
        this.$store.state.pageData[this.myPrgmId].todayNgTopTen.series = [];
      }
      if (!data.length) {
        return;
      }
      let seriesData = [
        {
          type: "pie",
          data: [],
          label: {
            show: false,
          },
          left: "22%",
          radius: ["50%", "80%"], // Bigger inner and outer radius
          center: ["60%", "50%"], // Shift chart slightly right to make room for legend
          itemStyle: {
            borderColor: "#fff", // Color of the gap
            borderWidth: 2, // Thickness of the gap
          },
        },
      ];
      let pidChartdata = [];
      for (var i = 0; i < data.length; i++) {
        if (data[i].eqpmId != undefined) {
          pidChartdata.push({
            value: data[i]["ngDtlCnt"],
            name: data[i]["eqpmId"],
            groupId: data[i]["eqpmNm"],
          });
        }
      }
      // let eqpmNmList  = [
      // 	'CHI-202',
      // 	'CHI-201',
      // 	'UT_LT_CH101',
      // 	'UT_LT_CH102',
      // 	'UT_LT_CH103',
      // 	'UT_LT_CH104',
      // 	'UT_LT_CH105',
      // 	'U-CH-013',
      // 	'U-CH-014',
      // 	'U-CH-015',
      // 	'U-CH-016',
      // 	'U-CH-017',
      // 	'U-CH-018',
      // 	'U-CH-019',
      // 	'U-CH-015B',
      // 	'U-CH-015C',
      // 	'U-CH-015D',
      // 	'U-CH-015E',
      // 	'UT_HT_CT101',
      // 	'UT_HT_CT102',
      // 	'UT_HT_CT103',
      // 	'UT_HT_CP101',
      // 	'VCB_A',
      // 	'U-CH-012',
      // 	'U-CH-015F',
      // 	'U-CH-016A',
      // ]
      // for(var i=1; i<21; i++){

      // 	pidChartdata.push({
      // 		// value:  data[i]['ngDtlCnt'],
      // 		value:  i+parseInt(Math.random()*(9-5)+5),
      // 		name: eqpmNmList[i],
      // 		groupId: eqpmNmList[i]
      // 	});
      // }
      seriesData[0]["data"] = [...pidChartdata];
      var chartOption = {
        grid: {
          // left: '3%',
          // right: '-60%',
          // top: '15%',
          // bottom: '15%',
          bottom: 0,
          // containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // data: legendData,
          // bottom: 'bottom',
          // icon: 'bar',
          // show: false,
          top: "middle",
          type: "scroll",
          orient: "vertical",
          left: "left",
          textStyle: {
            color: this.isDarkMode ? "#fff" : "#333333",
          },
        },
        series: seriesData,
      };
      await this.$nextTick(() => {});
      this.setChartOption({ chartKey: "todayNgTopTen", value: chartOption });
    },
    async setChart02Data(data) {
      if (this.$store.state.pageData[this.myPrgmId].compareEqpmTotChart != undefined) {
        this.$store.state.pageData[this.myPrgmId].compareEqpmTotChart.series = [];
      }
      if (!data.length) {
        return;
      }
      let xAxisData = [];
      let seriesData = [];
      // let legendMapper = {
      // 	'befBefVal' : '전전일',
      // 	'befVal' : '전일',
      // 	'dayVal' : '금일'
      // }
      let befBefValDataList = {
        name: "전전일",
        type: "line",
        // 'smooth' : true,
        showSymbol: false,
        lineStyle: { width: 2 },
        data: [],
      };
      let befValDataList = {
        name: "전일",
        type: "line",
        // 'smooth' : true,
        showSymbol: false,
        lineStyle: { width: 2 },
        data: [],
      };
      let dayValDataList = {
        name: "금일",
        type: "line",
        // 'smooth' : true,
        showSymbol: false,
        lineStyle: { width: 2 },
        data: [],
      };
      // for (var i = 0; i < data.length; i++) {
      let hour = Utility.setFormatDate(
        new Date().setTime(new Date().getTime() - 1 * 60 * 60 * 1000),
        "HH"
      );
      for (var i = 0; i < 24; i++) {
        if (data[i].tm != undefined) {
          xAxisData.push(parseInt(data[i].tm));
        } else {
          xAxisData.push(i);
        }
        //////없애야함//////

        // 	let num = parseInt(Math.random() * (13 - 10) + 10).toString().padStart(2, '0');
        // 	let num2 = parseInt(Math.random() * (9 - 1) + 1).toString().padStart(2, '0');
        // 	let num3 = parseInt(Math.random() * (13 - 10) + 10).toString().padStart(2, '0');
        // 	let num4 = parseInt(Math.random() * (9 - 1) + 1).toString().padStart(2, '0');
        // 	let num5 = parseInt(Math.random() * (13 - 10) + 10).toString().padStart(2, '0');
        // 	let num6  = parseInt(Math.random() * (9 - 1) + 1).toString().padStart(2, '0');
        // 	let befBefVal = num+num2;
        // 	let befVal = num3+num4;
        // 	let dayVal = num5+num6;
        // 	//////없애야함//////
        let befBefVal = data[i].befBefVal != undefined ? data[i].befBefVal : 0;
        let befVal = data[i].befVal != undefined ? data[i].befVal : 0;
        befBefValDataList["data"].push(befBefVal);
        befValDataList["data"].push(befVal);
        if (i <= parseInt(hour)) {
          let dayVal = data[i].dayVal != undefined ? data[i].dayVal : 0;
          dayValDataList["data"].push(dayVal);
        }
      }
      seriesData = [befBefValDataList, befValDataList, dayValDataList];

      // seriesData = [
      //   {
      //     name: "Before Before",
      //     type: "bar",
      //     data: [133, 70, 124, 131, 115, 89, 63],
      //   },
      //   {
      //     name: "Before",
      //     type: "bar",
      //     data: [116, 93, 120, 113, 65, 109, 149],
      //   },
      //   {
      //     name: "Day",
      //     type: "bar",
      //     data: [135, 76, 86, 134, 79, 139, 120],
      //   },
      // ];
      var chartOption = getLineChartOption({
        xAxisData: xAxisData,
        // legendData: legendData,
        seriesData: seriesData,
        isDarkMode: this.isDarkMode,
      });

      // {
      //   grid: {
      //     left: "3%",
      //     right: "5%",
      //     top: "25%",
      //     // bottom: '15%',
      //     containLabel: true,
      //   },
      //   legend: {
      //     data: legendData,
      //     icon: "circle",
      //     top: "0%", // Position from the top
      //     right: "5%", // Position from the right
      //     orient: "horizontal", // Ensures the legend items are laid out horizontally
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     splitLine: false,
      //     data: xAxisData,
      //   },
      //   yAxis: {
      //     type: "value",
      //     position: "left",
      //     // name: 'kWh',
      //     // splitLine: false,
      //   },
      //   series: seriesData,
      // };
      await this.$nextTick(() => {});
      this.setChartOption({
        chartKey: "compareEqpmTotChart",
        value: chartOption,
      });
    },
    getGuageChartOption(chartName) {
      const gaugeColors = [
        [0, "#ed1c24"],
        [0.6, "#ed1c24"],
        [0.8, "#f7931e"],
        [1.0, "#009245"],
      ];
      const gaugeColors2 = [
        [0, "#009245"],
        [0.6, "#009245"],
        [0.8, "#f7931e"],
        [1.0, "#ed1c24"],
      ];
      var guageChartOption = {
        grid: {
          // top: '-10%',
          bottom: 0,
        },
        title: {},
        series: [
          {
            type: "gauge",
            center: ["50%", "80%"],
            radius: "100%",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              // color: '#FFAB91'
              color: "auto",
              // color:gaugeColors
            },
            progress: {
              // show: true,
              show: false,
              width: 20,
            },
            pointer: {
              // show: false
              show: true,
              itemStyle: {
                // color: '#FFAB91',
                color: "auto",
              },
            },
            axisLine: {
              lineStyle: {
                width: 20,
                color: chartName == "todayEfficiencyStatus" ? gaugeColors : gaugeColors2,
              },
            },
            axisTick: {
              distance: -35,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              distance: -38,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: -10,
              color: "#999",
              fontSize: 10,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "100%",
              lineHeight: 25,
              borderRadius: 8,
              // offsetCenter: [0, '-15%'],
              offsetCenter: [0, "33%"],
              fontSize: 15,
              // fontSize: 20,
              fontWeight: "bolder",
              formatter: "{value} %",
              color: "auto",
            },
            data: [
              {
                value: NaN,
              },
            ],
          },
        ],
      };

      return guageChartOption;
    },

    // //차트Setting
    // async setChart01Data(data) {
    // 	this.$store.state.pageData[this.myPrgmId].enrgUsageGauge.series = [];
    // 	if (data.effcRt == null) {
    // 		return;
    // 	}

    // 	const arrDarkColors = {
    // 		정상: '#01ae6a',
    // 		주의: '#ffb046',
    // 		위험: '#f6637b',
    // 	};
    // 	const arrLightColors = {
    // 		정상: '#01ae6a',
    // 		주의: '#ffb046',
    // 		위험: '#f6637b',
    // 	};

    // 	const darkGaugeColors = [
    // 		[0.125, '#009245'],
    // 		[0.25, '#39b54a'],
    // 		[0.375, '#d9e021'],
    // 		[0.5, '#fcee21'],
    // 		[0.625, '#fbb03b'],
    // 		[0.75, '#f7931e'],
    // 		[0.875, '#f15a24'],
    // 		[1.0, '#ed1c24'],
    // 	];
    // 	const lightGaugeColors = [
    // 		[0.125, '#58c06f'],
    // 		[0.25, '#7cd574'],
    // 		[0.375, '#fbe462'],
    // 		[0.5, '#ffd771'],
    // 		[0.625, '#ffad7f'],
    // 		[0.75, '#ff966e'],
    // 		[0.875, '#ff706e'],
    // 		[1.0, '#ff6689'],
    // 	];

    // 	var chartOption = {
    // 		series: [
    // 			{
    // 				type: 'gauge',
    // 				startAngle: 180,
    // 				endAngle: 0,
    // 				min: 0,
    // 				max: 100,
    // 				radius: '100%',
    // 				splitNumber: 8,
    // 				axisLine: {
    // 					lineStyle: {
    // 						width: 30,
    // 						color: this.isDarkMode ? darkGaugeColors : lightGaugeColors,
    // 					},
    // 				},
    // 				splitLine: {
    // 					show: false,
    // 				},
    // 				axisTick: {
    // 					show: false,
    // 				},
    // 				axisLabel: {
    // 					show: false,
    // 				},
    // 				pointer: {
    // 					length: '80%',
    // 					width: 5,
    // 					itemStyle: {
    // 						color: this.isDarkMode ? '#fff' : '#333333',
    // 					},
    // 				},
    // 				anchor: {
    // 					show: true,
    // 					showAbove: true,
    // 					size: 10,
    // 					itemStyle: {
    // 						borderWidth: 10,
    // 						borderColor: this.isDarkMode ? '#fff' : '#333333',
    // 					},
    // 				},
    // 				title: {
    // 					offsetCenter: ['90%', '30%'],
    // 					fontSize: 20,
    // 					color: this.isDarkMode
    // 						? arrDarkColors[data.stat]
    // 						: arrLightColors[data.stat],
    // 					fontWeight: 'bold',
    // 				},
    // 				detail: {
    // 					fontSize: 20,
    // 					offsetCenter: ['-75%', '30%'],
    // 					valueAnimation: true,
    // 					formatter: function(value) {
    // 						return '{value|' + value.toFixed(1) + '}{unit|%}';
    // 					},
    // 					rich: {
    // 						value: {
    // 							fontSize: 20,
    // 							color: this.isDarkMode ? '#fff' : '#111111',
    // 							fontWeight: 'bolder',
    // 						},
    // 						unit: {
    // 							fontSize: 14,
    // 							color: this.isDarkMode ? '#fff' : '#111111',
    // 							fontWeight: 'bolder',
    // 							padding: [0, 0, -5, 0],
    // 						},
    // 					},
    // 				},
    // 				data: [
    // 					{
    // 						name: data.stat,
    // 						value: data.effcRt,
    // 					},
    // 				],
    // 			},
    // 		],
    // 	};

    // 	this.setChartOption({ chartKey: 'enrgUsageGauge', value: chartOption });

    // 	this.loadChart_01 = true;
    // },

    tableDataGetDarkColorByState: (state) => {
      return {
        가동중: "#01ae6a",
        미사용: "#ffb046",
        비정상: "#f6637b",
      }[state];
    },
    tableDataGetLightColorByState: (state) => {
      return {
        가동중: "#3cc380",
        미사용: "#ffb13b",
        비정상: "#f98694",
      }[state];
    },
    chartClickEvent(argData, $event) {
      // console.log('chartClickEvent', argData);
      let pageMapper = {
        dashBoard_enrgUsageGauge: {
          pageName: "ems-effc-EnrgUseTotSummPage",
          prgmId: "PRG0080",
        },
        dashBoard_todayEfficiencyStatus: {
          pageName: "ems-effc-EnrgEffcTotSummPage",
          prgmId: "PRG0083",
        },
        // dashBoard_todayNgTopTen: {pageName: 'ems-effc-EnrgUseTotSummPage', prgmId: 'PRG0080'},
        // dashBoard_enrgUsageGauge: {pageName: 'ems-effc-EnrgUseTotSummPage', prgmId: 'PRG0080'},
      };
      var data = {
        ...argData,
        fromDt: this.pageData.fromDt,
      };

      var key = "tick_" + Math.random();
      this.$router.push({
        name: pageMapper[argData]["pageName"],
        query: {
          prgmId: pageMapper[argData]["prgmId"],
          // tick:key
        },
        params: {
          ...data,
          key: key,
        },
      });
    },
    numberFormatter(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    gridClickEvent(_, event, gridName) {
      var gridInstance = this.$refs[this.gridName].gridInstance;
      var eventRowData = gridInstance.invoke("getRow", event.rowKey);
      var data = {
        cmCycle: "CYC_DAY",
        fromDt:
          eventRowData.totDttm != undefined
            ? eventRowData.totDttm
            : Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
        fabId: eventRowData.fabId,
        eqpmKindId: eventRowData.eqpmKindId,
        eqpmGrpId: eventRowData.eqpmGrpId,
        eqpmId: eventRowData.eqpmId,
      };
      var key = "tick_" + Math.random();
      this.$router.push({
        name: "ems-effc-EnrgUseEqpmDetlMntrPage",
        query: {
          prgmId: "PRG0082",
          // tick:key
        },
        params: {
          ...data,
          key: key,
        },
      });
    },
    topTenChartClickEvent(event) {
      let chartData = this.pageData.chart04Data;
      // let chartData = this.$store.state.pageData[myPrgmId][this.chart_04]['series'][0]['data']
      let selectedChartData = chartData.filter((item) => {
        return item.eqpmId == event["data"]["groupId"];
      });
      var data = {
        cmCycle: "CYC_DAY",
        fromDt: Utility.setFormatDate(new Date(), "YYYY-MM-DD HH:mm"),
        fabId: selectedChartData[0].fabId,
        eqpmKindId: selectedChartData[0].eqpmKindId,
        eqpmGrpId: selectedChartData[0].eqpmGrpId,
        eqpmId: selectedChartData[0].eqpmId,
      };
      var key = "tick_" + Math.random();
      this.$router.push({
        name: "ems-effc-EnrgUseEqpmDetlMntrPage",
        query: {
          prgmId: "PRG0082",
          // tick:key
        },
        params: {
          ...data,
          key: key,
        },
      });
    },
  },
};
const defaultData = {
  chart04Data: [],
  dashBoard_grid_01: {
    data: [],
    option: {},
    column: [],
  },
  enrgUsageGauge: Utility.defaultChartOption(true),
  compareEqpmTotChart: Utility.defaultChartOption(true),
  todayEfficiencyStatus: Utility.defaultChartOption(true),
  todayNgTopTen: Utility.defaultChartOption(true),
  compareEqpmTGdChart: 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;
}

.textInfo {
  font-family: "Oxanium", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0;
  // color: #1677ff;
}

.textDetail {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  color: #00000073;
}
</style>
