<template>
  <div ref="mainDiv" class="l-layout">
    <CommonPageTitle />
    <v-row ref="searchFilter">
      <v-col :cols="12">
        <v-card class="searchFilter">
          <v-row>
            <v-col :cols="3">
              <component
                :is="'SelectBox'"
                ref="SelectBox1"
                :propsValue="selectValue01"
                :itemList="selectValueList01"
                :label="'FAB'"
                :labelCols="12"
                :textCols="12"
                :customClass="'select-large'"
                @update:propsValue="selectValue01 = $event"
              />
            </v-col>
            <v-col :cols="3">
              <component
                :is="'SelectBox'"
                ref="SelectBox2"
                :propsValue="selectValue02"
                :itemList="selectValueList02"
                :label="'설비종류'"
                :labelCols="12"
                :textCols="12"
                :customClass="'select-large'"
                @update:propsValue="selectValue02 = $event"
              />
            </v-col>
            <v-col :cols="3">
              <component
                :is="'SelectBox'"
                ref="SelectBox3"
                :propsValue="selectValue03"
                :itemList="selectValueList03"
                :label="'설비그룹'"
                :labelCols="12"
                :textCols="12"
                :customClass="'select-large'"
                @update:propsValue="selectValue03 = $event"
              />
            </v-col>
            <v-col :cols="3">
              <component
                :is="'SelectBox'"
                ref="SelectBox4"
                :propsValue="selectValue04"
                :itemList="selectValueList04"
                :label="'설비'"
                :labelCols="12"
                :textCols="12"
                :customClass="'select-large'"
                @update:propsValue="selectValue04 = $event"
              />
            </v-col> </v-row
          ><v-row>
            <v-col :cols="3">
              <component
                :is="'SelectCmCycle'"
                :parentPrgmId="myPrgmId"
                :labelCols="12"
                :textCols="12"
                :customClass="'select-large'"
                :label="'구분'"
              />
            </v-col>
            <v-col :cols="3">
              <component
                :is="'DatePicker'"
                :label="'대상년월'"
                :parentPrgmId="myPrgmId"
                :isRangeOption="false"
                :textCols="12"
                :customClass="'datepicker-large'"
              />
            </v-col>
            <v-col :cols="6" class="text-right">
              <!-- <v-btn style="margin-top: 22px" :ripple="false" @click="search()"
                >조회</v-btn
              > -->
              <a-button
                style="margin-top: 25px; height: 40px"
                icon="search"
                class="search-button"
                type="primary"
                @click="search"
                >조회</a-button
              >
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
    <v-row ref="contents" style="height: calc(100vh - 230px)">
      <v-col :cols="12" style="height: 100%">
        <v-row class="pa-1" style="height: 50%; width: 100%">
          <div style="width: 100%; height: 100%; overflow: hidden">
            <v-card style="background: none; height: 15%">
              <v-card-title
                class="d-flex align-center justify-space-between"
                style="padding: 0px"
              >
                <span style="margin-top: 10px" class="tit ft-size_20 ft-weight_600">
                  주요가이드 지표
                </span>
              </v-card-title>
            </v-card>
            <div style="height: 85%">
              <v-row style="height: 100%; overflow: auto">
                <v-col
                  :cols="3"
                  style="height: 100%"
                  v-for="(value, key, index) in contentData01"
                  :key="'key1' + index"
                >
                  <v-card style="position: relative; overflow: hidden">
                    <!-- Card header -->
                    <div
                      style="
                        position: absolute;
                        left: 0;
                        top: 20px;
                        width: 4px;
                        height: 30px;
                        background-color: #91caff;
                        border-radius: 2px;
                      "
                    ></div>
                    <v-card-title style="padding-left: 10px">{{
                      value["gdIdxNm"]
                    }}</v-card-title>
                    <div class="v-box" style="height: 80%; padding: 3px; margin: 10px">
                      <v-col :cols="12" style="height: 100%">
                        <div style="height: 85%">
                          <component
                            class="w100 h100"
                            :is="loadChart ? 'Chart' : null"
                            :parentPrgmId="myPrgmId"
                            :chartName="'chartGroup01_' + value['gdIdxId']"
                            :ref="'chartGroup01_' + value['gdIdxId']"
                          />
                        </div>
                      </v-col>
                    </div>
                  </v-card>
                </v-col>
              </v-row>
            </div>
          </div>
        </v-row>
        <v-row class="pa-1" style="height: 45%; width: 100%">
          <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
            <div style="height: 15%">
              <v-card-title class="d-flex align-center justify-space-between pl-3 pt-2">
                <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
              </v-card-title>
            </div>
            <div
              ref="gridParent01"
              class="pl-3 mt-3"
              style="height: 75%; overflow: hidden;"
            >
              <component
                :ref="gridName01"
                :is="loadGrid01 ? 'Grid' : null"
                :gridName="gridName01"
                :parentPrgmId="myPrgmId"
              />
            </div>
          </v-card>
        </v-row>
        <v-row class="pa-1" style="height: 40%; width: 100%">
          <div style="height: 100%; width: 100%">
            <v-row style="height: 100%">
              <v-col :cols="5" class="">
                <v-card class="pa-1" style="height: 100%; width: 100%">
                  <div style="height: 15%">
                    <v-card-title class="d-flex align-center justify-space-between pl-3">
                      <span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
                    </v-card-title>
                  </div>
                  <div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
                    <component
                      :ref="gridName02"
                      :is="loadGrid02 ? 'Grid' : null"
                      :gridName="gridName02"
                      :parentPrgmId="myPrgmId"
                      @getRowsData="getRowData02"
                    />
                  </div>
                </v-card>
              </v-col>
              <v-col :cols="7" class="">
                <v-card class="pa-1" style="height: 100%; width: 100%">
                  <div style="height: 25%">
                    <v-card-title class="d-flex align-center justify-space-between pa-5">
                      <span class="tit ft-size_20 ft-weight_600">시간별 TREND 정보</span>
                    </v-card-title>
                  </div>
                  <div ref="trendChartParent" style="height: 75%">
                    <component
                      class="w100 h100"
                      :is="loadTrendChart ? 'Chart' : null"
                      :parentPrgmId="myPrgmId"
                      :chartName="'trendChart'"
                    />
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </div>
        </v-row>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import mixinGlobal from "@/mixin/global.js";
import { resize } from "@/mixin/resize.js";
import Utility from "~/plugins/utility";
import SelectBox from "@/components/common/select/SelectBox";
import SelectCmCycle from "@/components/common/select/SelectCmCycle";
import DatePicker from "@/components/common/Datepicker";
import Grid from "~/components/common/Grid";
import Chart from "~/components/common/Chart";
import PageTitle from "~/components/common/PageTitle";

let myTitle;
let myPrgmId;
let paramKey;

export default {
  mixins: [mixinGlobal, resize],
  async asyncData(context) {
    const myState = context.store.state;
    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: true,
  },
  components: {
    Utility,
    SelectBox,
    SelectCmCycle,
    DatePicker,
    Grid,
    Chart,
  },
  data() {
    return {
      myPrgmId: myPrgmId,

      initedFlag: false,
      queryParams: null,

      selectValueList01: [],
      selectValueList02: [],
      selectValueList03: [],
      selectValueList04: [],

      selectValue01: null,
      selectValue02: null,
      selectValue03: null,
      selectValue04: null,

      contentData01: {},

      loadGrid01: false,
      loadGrid02: false,
      gridName01: "grid01",
      gridName02: "grid02",

      loadTrendChart: false,
    };
  },
  computed: {
    ...mapState({
      pageData: (state) => state.pageData[myPrgmId],
    }),
    fromDt() {
      return this.pageData.fromDt;
    },
  },
  watch: {
    async $route(to, from) {
      if (to.query.prgmId == myPrgmId) {
        if (to.params.key) {
          document.getElementById("refresh").click();
        }
      }
    },
    async selectValue01(value) {
      if (this.initedFlag) {
        // await this.search();
        await this.getSelectValueList04();
      }
    },
    async selectValue02(value) {
      if (this.initedFlag) {
        await this.getSelectValueList03();
      }
    },
    async selectValue03(value) {
      if (this.initedFlag) {
        await this.getSelectValueList04();
      }
    },
    async selectValue04(value) {
      if (this.initedFlag) {
        await this.search();
      }
    },
    async fromDt(value) {
      if (this.initedFlag) {
        await this.search();
      }
    },
  },
  async beforeCreate() {
    myPrgmId = this.$route.query.prgmId;
    await this.$store.dispatch("chkOpenTabList", {
      key: "create",
      prgmId: myPrgmId,
      defaultData: defaultData,
    });
  },
  created() {},
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.initedFlag = false;
    this.chkOpenTabList({ key: "destroy", prgmId: myPrgmId });
  },
  methods: {
    ...mapMutations({
      setChartOption: "setChartOption",
    }),
    async init() {
      await this.getSelectValueList();
      await this.setQueryParams();
      await this.search();

      this.initedFlag = true;
    },
    async setQueryParams() {
      this.queryParams = null;

      if (paramKey == this.$route.params.key) {
        return;
      }
      if (this.$route.params.key) {
        paramKey = this.$route.params.key;
        this.queryParams = this.$route.params;
      }

      if (this.queryParams && typeof this.queryParams == "object") {
        this.setPageData({
          dateInitedFlag: true,
        });
        this.selectValue01 = this.queryParams["fabId"];
        this.selectValue02 = this.queryParams["eqpmKindId"];
        await this.getSelectValueList03();
        this.selectValue03 = this.queryParams["eqpmGrpId"];
        await this.getSelectValueList04();
        this.selectValue04 = this.queryParams["eqpmId"];

        this.setPageData({
          fromDt: this.queryParams["fromDt"],
          cmCycle: this.queryParams["cmCycle"],
        });
      }
    },
    async getSelectValueList() {
      await this.getSelectValueList01();
      await this.getSelectValueList02();
      await this.getSelectValueList03();
      await this.getSelectValueList04();
    },
    async getSelectValueList01() {
      let res = await this.postApiReturn({
        apiKey: "selectFabCodeList",
        resKey: "fabCodeLists",
        sendParam: {},
      });
      if (res.length > 0) {
        this.selectValueList01 = await res.map((item) => {
          return {
            text: item.eccNm,
            value: item.eccId,
          };
        });
        this.selectValue01 = this.selectValueList01[0].value;
      } else {
        this.selectValueList01 = [];
        this.selectValue01 = null;
      }
    },
    async getSelectValueList02() {
      var res = await this.postApiReturn({
        apiKey: "selectEmsEqpmKindList",
        resKey: "eqpmGrpPysclQtyMngData",
        sendParam: {},
      });

      if (res.length > 0) {
        this.selectValueList02 = await res.map((item) => {
          return {
            text: item.eqpmKindNm,
            value: item.eqpmKindId,
            data: {
              ...item,
            },
          };
        });
        this.selectValue02 = this.selectValueList02[0].value;
      } else {
        this.selectValueList02 = [];
        this.selectValue02 = null;
      }
    },
    async getSelectValueList03() {
      var res = await this.postApiReturn({
        apiKey: "selectEmsEqpmGrpList",
        resKey: "eqpmGrpPysclQtyMngData",
        sendParam: {
          eqpmKindId: this.selectValue02,
        },
      });

      if (res.length > 0) {
        this.selectValueList03 = await res.map((item) => {
          return {
            text: item.eqpmGrpNm,
            value: item.eqpmGrpId,
            data: {
              ...item,
            },
          };
        });
        this.selectValue03 = this.selectValueList03[0].value;
      } else {
        this.selectValueList03 = [];
        this.selectValue03 = null;
      }
    },
    async getSelectValueList04() {
      var res = await this.postApiReturn({
        apiKey: "selectFabEqpmList",
        resKey: "enrgUseEqpmDetlMntrData",
        sendParam: {
          fabId: this.selectValue01,
          eqpmGrpId: this.selectValue03,
        },
      });

      if (res.length > 0) {
        this.selectValueList04 = await res.map((item) => {
          return {
            text: item.eqpmNm,
            value: item.eqpmId,
            data: {
              ...item,
            },
          };
        });
        this.selectValue04 = this.selectValueList04[0].value;
      } else {
        this.selectValueList04 = [];
        this.selectValue04 = null;
      }
    },
    async search() {
      // console.log('search ...');
      // console.log('selectValue01 : ', this.selectValue01);
      // console.log('selectValue02 : ', this.selectValue02);
      // console.log('selectValue03 : ', this.selectValue03);
      // console.log('selectValue04 : ', this.selectValue04);
      // console.log('cmCycle : ', this.pageData.cmCycle);
      // console.log('fromDt : ', this.fromDt);

      await this.setContentData();

      this.setPageData({
        dateInitedFlag: false,
      });
    },
    reloadChart() {
      this.loadChart = false;
      this.$nextTick(() => {
        this.loadChart = true;
      });
    },
    async setContentData() {
      await this.setContentData01();
      await this.setContentData02();
      await this.setContentData03();
      // await this.setContentData04();
    },
    async setContentData01() {
      var apiKey = null;
      var res = null;
      this.contentData01 = {};

      if (this.pageData.cmCycle == "CYC_DAY") {
        apiKey = "selectDailyEnrgUseMainGuideIdx";
      } else if (this.pageData.cmCycle == "CYC_MONTH") {
        apiKey = "selectMonthlyEnrgUseMainGuideIdx";
      }

      res = await this.postApiReturn({
        apiKey: apiKey,
				resKey: 'enrgUseEqpmDetlMntrData',
        sendParam: {
          eqpmGrpId: this.selectValue03,
          eqpmId: this.selectValue04,
          fromDt: this.fromDt,
        },
      });
      this.contentData01 = await this.makeContentData01(res);
      await this.setChartGroup01(this.contentData01);
      this.reloadChart();
    },
    async setContentData02() {
      const _this = this;
      const myOptions = {
        columnOptions: {
          resizable: true,
        },
        header: {
          height: 38,
        },
      };
      const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
      var columnList = [
        { header: "NO", name: "no", width: 40, align: "center" },
        { header: "gdIdxId", name: "gdIdxId", hidden: true },
        { header: "totDttm", name: "totDttm", hidden: true },
        { header: "발생일", name: "totDt", width: 150, align: "center" },
        { header: "발생시간대", name: "totTm", width: 100, align: "center" },
        { header: "가이드지표명", name: "gdIdxNm", width: 200 },
        { header: "가이드값", name: "totVal", hidden: true },
        { header: "주의값", name: "caseStndVal", hidden: true },
        { header: "경고값", name: "warnStndVal", hidden: true },
        { header: "알람종류", name: "alrmKind", hidden: true },
        { header: "알람내용", name: "alrmMsg" },
      ];
      var res = [];
      var newRes = [];

      this.loadGrid01 = false;

      res = await this.postApiReturn({
				apiKey: 'selectEnrgUseGuideAlarmInfo',
				resKey: 'enrgUseEqpmDetlMntrData',
        sendParam: {
          cmCycle: this.pageData.cmCycle,
          eqpmId: this.selectValue04,
          fromDt: this.fromDt,
					alrmKind: ['WARN', 'CARE'],
        },
      });

      for (var i = 0; i < res.length; i++) {
        newRes.push({
          ...res[i],
          no: i + 1,
        });
      }

      this.setGridOption({
        gridKey: this.gridName01,
        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
      });
      this.setGridColumn({
        gridKey: this.gridName01,
        value: columnList,
      });
      this.setGridData({
        gridKey: this.gridName01,
        value: newRes,
      });

      this.loadGrid01 = true;
    },
    async setContentData03() {
      const _this = this;
      const myOptions = {
        columnOptions: {
          resizable: true,
        },
        header: {
          height: 38,
        },
      };
      const gridHeight = this.$refs.mainDiv.offsetHeight * 0.17;
      var columnList = [
        { header: "NO", name: "no", align: "right", width: 40 },
        { header: "물리량ID", name: "pysclQtyId", width: 100, align: "left" },
        { header: "물리량코드", name: "pysclQtyCd", align: "left" },
        { header: "물리량명", name: "pysclQtyNm", width: 190, align: "left" },
        { header: "물리량타입", name: "pysclQtyTp", width: 100, align: "left" },
      ];
      var res = [];
      var newRes = [];

      this.loadGrid02 = false;

      res = await this.postApiReturn({
        apiKey: "selectEnrgUseEqpmDescInfo",
        resKey: "enrgUseEqpmDetlMntrData",
        sendParam: {
          eqpmGrpId: this.selectValue03,
        },
      });

      for (var i = 0; i < res.length; i++) {
        newRes.push({
          ...res[i],
          no: i + 1,
        });
      }

      this.setGridOption({
        gridKey: this.gridName02,
        value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
      });
      this.setGridColumn({
        gridKey: this.gridName02,
        value: columnList,
      });
      this.setGridData({
        gridKey: this.gridName02,
        value: newRes,
      });

      this.loadGrid02 = true;

      await this.$nextTick();
      this.$refs[this.gridName02].focus({
        rowKey: 0,
				columnName: 'no',
        setScroll: true,
      });
    },
    async setContentData04(selectedData) {
      var res = null;
      var _this = this;
      var xAxisData = null;
      var seriesData = null;
      var sliderHandleSize = 100;

      this.loadTrendChart = false;

      xAxisData = this.makeTrendChartXaxisData();

      if (this.pageData.cmCycle == "CYC_MONTH") {
        sliderHandleSize = ((24 / xAxisData.length) * 100 * 24) / 25;
      }

      res = await this.postApiReturn({
				apiKey: 'selectEnrgUseHourlyTrendInfo',
				resKey: 'enrgUseEqpmDetlMntrData',
        sendParam: {
          pysclQtyId: selectedData.pysclQtyId,
          eqpmId: this.selectValue04,
          fromDt: this.fromDt,
          cmCycle: this.pageData.cmCycle,
        },
      });

      seriesData = new Array(xAxisData.length).fill(NaN);

      for (var i = 0; i < res.length; i++) {
        if (this.pageData.cmCycle == "CYC_MONTH") {
          seriesData[res[i]["monthCnt"]] = res[i]["totVal"];
        } else if (this.pageData.cmCycle == "CYC_DAY") {
          seriesData[res[i]["dayCnt"]] = res[i]["totVal"];
        }
      }

      var chartOption = {
        grid: {
          top: "3%",
          bottom: "25%",
        },
        tooltip: {
          axisPointer: {
            label: {
              formatter: function (value) {
                value = value.value;
                return (
                  value.substring(5, 7) +
                  "월 " +
                  value.substring(8, 10) +
                  "일 " +
                  value.substring(11, 13) +
                  "시"
                );
              },
            },
          },
        },
        xAxis: {
          data: xAxisData,
          axisLabel: {
            formatter: function (value) {
              return value.substring(11, 13) + "시";
            },
          },
          axisTick: {
            interval: 23,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", // Makes the lines dashed
              color: "#ccc", // Optional: customize the color
            },
          },
        },
        series: [
          {
            type: "line",
            data: seriesData,
            itemStyle: {
              color: "#D32029",
            },
            // symbol: "circle",
            showSymbol: true,
            connectNulls: true,
          },
          // {
          //   type: "line",
          //   data: seriesData2,
          //   symbol: "none",
          //   itemStyle: {
          //     color: "#FAAD14",
          //   },
          // },
        ],
        dataZoom: [
          {
            type: "slider",
            // zoomLock: true,
            zoomLock: false,
            brushSelect: false,
            start: 0, // 0-100 %
            end: sliderHandleSize, // 0-100 %
          },
          {
            type: "inside",
            zoomOnMouseWheel: false,
            moveOnMouseMove: false,
            moveOnMouseWheel: true,
          },
        ],
      };

      this.setChartOption({ chartKey: "trendChart", value: chartOption });
      this.loadTrendChart = true;
    },
    async getRowData02(selectedData) {
      await this.setContentData04(selectedData);
    },
    async makeContentData01(data) {
      var result = {};
      for (var i = 0; i < data.length; i++) {
        if (!result.hasOwnProperty(data[i]["gdIdxId"])) {
          result[data[i]["gdIdxId"]] = {
            gdIdxId: data[i]["gdIdxId"],
            gdIdxNm: data[i]["gdIdxNm"],
            data: [],
          };

          result[data[i]["gdIdxId"]]["data"].push({
            ...data[i],
          });
        } else {
          result[data[i]["gdIdxId"]]["data"].push({
            ...data[i],
          });
        }
      }

      var idxData = await this.postApiReturn({
				apiKey: 'selectEnrgUseMainIdxDesc',
				resKey: 'eqpmIndMntrData',
        sendParam: {
          eqpmGrpId: this.selectValue03,
        },
      });

      for (var i = 0; i < idxData.length; i++) {
        if (!result.hasOwnProperty(idxData[i]["gdIdxId"])) {
          result[idxData[i]["gdIdxId"]] = {
            gdIdxId: idxData[i]["gdIdxId"],
            gdIdxNm: idxData[i]["gdIdxNm"],
            data: [],
          };
        }
      }

      return result;
    },
    async setChartGroup01(data) {
      this.loadChart = false;
      await this.$nextTick();
      this.initChartGroup01(data);
      this.setChartGroup01Data(data);
      this.loadChart = true;
    },
    initChartGroup01(data) {
      var dataKeyList = Object.keys(data);
      var currentChartData = null;
      var chartKey = null;

      for (var i = 0; i < dataKeyList.length; i++) {
        currentChartData = data[dataKeyList[i]];
				chartKey = 'chartGroup01_' + currentChartData['gdIdxId'];

        this.setPageData({
          [chartKey]: this.getGroup01ChartOption(),
        });
      }
    },
    setChartGroup01Data(data) {
      var dataKeyList = Object.keys(data);
      var currentChartData = null;
      var chartKey = null;
      var xAxisData = null;
      var seriesData = null;

      xAxisData = this.makeChartGroup01XaxisData();

      for (var i = 0; i < dataKeyList.length; i++) {
        seriesData = new Array(xAxisData.length).fill(NaN);

        currentChartData = data[dataKeyList[i]];
        chartKey = "chartGroup01_" + currentChartData["gdIdxId"];

        for (var j = 0; j < currentChartData["data"].length; j++) {
          seriesData[currentChartData["data"][j]["dataNum"]] =
            currentChartData["data"][j]["totVal"];
        }

        this.$store.state.pageData[myPrgmId][chartKey]["xAxis"]["data"] = xAxisData;
        this.$store.state.pageData[myPrgmId][chartKey]["series"][0]["data"] = seriesData;
      }
    },
    getGroup01ChartOption() {
      var chartOption = Utility.defaultChartOption(true);

      chartOption["series"][0]["type"] = "line";
      chartOption["grid"]["bottom"] = "3%";

      chartOption["series"][0]["itemStyle"] = {
        color: "#D32029",
      };

      // Add dashed horizontal grid lines from y-axis
      chartOption["yAxis"] = {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed", // Makes the lines dashed
          },
        },
      };

      return chartOption;
    },
    makeChartGroup01XaxisData() {
      var result = [];
      var paramsDt = this.fromDt;

      if (this.pageData.cmCycle == "CYC_MONTH") {
        var tempDate = new Date(
          paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
        );
        var lastDayOfMonth = getLastDayOfMonth(tempDate);

        for (var i = 1; i <= lastDayOfMonth; i++) {
          result.push(i);
        }
      } else if (this.pageData.cmCycle == "CYC_DAY") {
        for (var i = 0; i < 24; i++) {
          result.push(i);
        }
      }

      return result;
    },
    makeTrendChartXaxisData() {
      var result = [];
      var paramsDt = this.fromDt;
      var timezoneOffset = new Date().getTimezoneOffset() * 60000;

      if (this.pageData.cmCycle == "CYC_MONTH") {
        var tempDate = new Date(
          paramsDt.substring(0, 4) + "-" + paramsDt.substring(4, 6) + "-01 00:00"
        );
        var lastDayOfMonth = getLastDayOfMonth(tempDate);

        tempDate = new Date(tempDate - timezoneOffset);
        result.push(tempDate.toISOString());

        for (var i = 0; i < 24 * lastDayOfMonth - 1; i++) {
          tempDate = addHours(1, tempDate);
          result.push(tempDate.toISOString());
        }
      } else if (this.pageData.cmCycle == "CYC_DAY") {
        var tempDate = new Date(
          paramsDt.substring(0, 4) +
            "-" +
            paramsDt.substring(4, 6) +
            "-" +
            paramsDt.substring(6, 8) +
            " 00:00"
        );

        tempDate = new Date(tempDate - timezoneOffset);
        result.push(tempDate.toISOString());

        for (var i = 0; i < 23; i++) {
          tempDate = addHours(1, tempDate);
          result.push(tempDate.toISOString());
        }
      }

      return result;
    },
  },
};

function addHours(h, date) {
  date.setTime(date.getTime() + h * 60 * 60 * 1000);

  return date;
}

function getLastDayOfMonth(date) {
  return new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1) - 1).getDate();
}

const defaultData = {
  dateInitedFlag: false,
  cmCycle: "CYC_MONTH",
  cmCycleList: [
    { idx: 0, text: "월", value: "CYC_MONTH" },
    { idx: 1, text: "일", value: "CYC_DAY" },
  ],
  defaultRange: {
    CYC_MONTH: 1,
    CYC_DAY: 1,
  },
  fromDt: Utility.setFormatDate(new Date(), "YYYYMM"), // 조회 시작일

  grid01: {
    data: [],
    column: [],
    option: {},
  },

  grid02: {
    data: [],
    column: [],
    option: {},
  },

  trendChart: Utility.defaultChartOption(true),
};
</script>
