import { __decorate, __metadata } from "tslib";
import { css, html } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { store, PageView } from '@operato/shell';
import { BoardViewer } from '@operato/board/ox-board-viewer.js';
import { getPowerPlants } from '../entities/power-plant/query';
import { getPowerPlantGroups } from '../entities/power-plant-group/query';
import { getBoard } from '../shared/api/queries/board';
import { getCityWeather } from '../shared/api/queries/weather';
import { provider } from '@things-factory/board-ui/dist-client';
import { MAP_BOARD_NAME } from '../shared/const/board';
import { getPowerPlantStatus, getPowerPlantIconStatus } from '../shared/utils/func/power-plant';
import { POWER_PLANT_STATUS, POWER_PLANT_STATUS_DISPLAY, POWER_PLANT_PAGE_LIMIT, POWER_PLANT_MOBILE_PAGE_LIMIT } from '../shared/const/power-plant';
import { roundNumber } from '../shared/utils/func/common';
import { arrayToObject } from '../shared/utils/func/common';
import { OPEN_WEATHER_STATE_ICON } from '../shared/const/weather';
import { navigate } from '@operato/shell';
import { getRefreshTime } from '../shared/api/queries/common';
import { isMobileDevice } from '@operato/utils';
import '../features/eaas-select';
import '../widgets/dashboard-page/popup-group-add';
import '../widgets/dashboard-page/popup-group-manegement';
import '../features/eaas-pagenation';
import '../widgets/dashboard-page/popup-mobile-plant-world-map';
let DashboardPage = class DashboardPage extends connect(store)(PageView) {
    constructor() {
        super(...arguments);
        this.boardName = MAP_BOARD_NAME;
        this.powerPlantList = [];
        this.powerPlantGroupList = [];
        this.totalCapacity = 0;
        this.averageOperationTime = 0;
        this.listCount = 0;
        this.totalCount = 0;
        this.normalCount = 0;
        this.stopCount = 0;
        this.faultCount = 0;
        this.communicationFaultCount = 0;
        this.searchValue = '';
        this.selectedPowerPlantStatus = '';
        this.resourceId = '';
        this.page = 1;
        this.sortings = [{ name: 'name', desc: false }];
        this.PAGE_LIMIT = isMobileDevice() ? POWER_PLANT_MOBILE_PAGE_LIMIT : POWER_PLANT_PAGE_LIMIT;
    }
    static { this.styles = [
        css `
      :host {
        * ::-webkit-scrollbar {
          width: 5px;
        }
        *::-webkit-scrollbar-thumb {
          background-color: rgba(57, 78, 100, 0.5);
        }

        background-color: var(--primary-color);

        .container {
          display: flex;
          max-width: 100vw;
          height: calc(100vh - 50px); /* Full height of the viewport */
          border-top: 1px solid var(--md-sys-color-on-tertiary-container);
          overflow-y: auto;
        }
        .container * {
          color: var(--md-sys-color-on-secondary);
        }
        h2,
        h3 {
          margin: 0;
        }
        .container > div {
          display: flex;
          gap: 15px;
          padding: 20px;
          padding-bottom: 0;
          flex-direction: column;
          box-sizing: border-box;
        }

        .container-a {
          flex: 1;
        }
        .container-b {
          flex: 2;
        }

        /* Flex-grow for specific contents */
        .content-a3,
        .content-b3 {
          flex: 1; /* Content grows to fill remaining height */

          ox-board-viewer {
            width: 80%;
            aspect-ratio: 8 / 12;
            justify-self: anchor-center;
            overflow-y: hidden;

            background: url(../../assets/images/bg-map.png) center no-repeat;
            background-size: 95%;

            #target {
              overflow-y: hidden;
            }
          }

          .pp-table {
            width: 100%;
            border-spacing: 0;
            margin-bottom: var(--margin-default);
            position: relative;

            th {
              border-top: 2px solid rgba(173, 191, 240, 0.4);
              border-bottom: 1px solid rgba(173, 191, 240, 0.2);
              background-color: rgba(0, 0, 0, 0.3);
              padding: 5px;
              color: var(--md-sys-color-surface-tint);
              font-weight: normal;

              .sort-container {
                display: flex;
                color: unset;
                justify-content: center;

                md-icon {
                  color: unset;
                  margin-left: 3px;
                }
              }

              &.time-th {
                min-width: 70px;
              }
            }

            tbody tr {
              cursor: pointer;
            }
            .address {
              max-width: 170px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            td {
              border-bottom: 1px solid rgba(173, 191, 240, 0.2);
              padding: 7px 4px;
              font-size: 0.9em;
              white-space: nowrap;
              text-align: center;

              &.progress-td {
                padding-inline: 10px;
              }

              &.pp-status-normal {
                color: var(--status-success-color);
                font-weight: bold;
              }

              &.pp-status-stop {
                color: var(--status-warning-color);
                font-weight: bold;
              }

              &.pp-status-fault {
                color: var(--status-danger-color);
                font-weight: bold;
              }

              &.pp-status-communication_fault {
                color: #ca69ff;
                font-weight: bold;
              }
              md-icon.pp-status-normal {
                color: var(--status-success-color);
                --md-icon-size: 18px;
              }
              md-icon.pp-status-stop {
                color: var(--status-warning-color);
                --md-icon-size: 18px;
              }
              md-icon.pp-status-fault {
                color: var(--status-danger-color);
                --md-icon-size: 18px;
              }
              md-icon.pp-status-communication_fault {
                color: #ca69ff;
                --md-icon-size: 18px;
              }

              a {
                text-decoration: none;
                font-weight: bold;
              }
              strong {
                white-space: nowrap;
              }
            }
          }
        }
        td * {
          vertical-align: middle;
        }
        progress {
          width: 100%;
          min-width: 100px;
          height: 20px;
          border-radius: 7px;
          overflow: hidden;
          margin-top: 3px;
          appearance: none;
          -webkit-appearance: none;
        }
        progress::-webkit-progress-bar {
          background-color: rgba(0, 0, 0, 0.15);
        }
        progress.pp-status-progress-stop {
          border: 1px solid rgba(238, 141, 3, 0.4);
        }
        progress.pp-status-progress-stop::-webkit-progress-value {
          background-color: rgba(238, 141, 3, 0.9);
        }
        progress.pp-status-progress-normal {
          border: 1px solid rgba(53, 162, 74, 0.4);
        }
        progress.pp-status-progress-normal::-webkit-progress-value {
          background-color: rgba(53, 162, 74, 0.9);
        }
        progress.pp-status-progress-fault {
          border: 1px solid rgba(209, 73, 70, 0.4);
        }
        progress.pp-status-progress-fault::-webkit-progress-value {
          background-color: rgba(209, 73, 70, 0.9);
        }
        progress.pp-status-progress-communication_fault {
          border: 1px solid rgba(157, 42, 219, 0.4);
        }
        progress.pp-status-progress-communication_fault::-webkit-progress-value {
          background-color: rgba(157, 42, 219, 0.9);
        }
        progress + span {
          display: block;
          position: absolute;
          margin-top: -20px;
          margin-left: 9px;
          font-size: 0.9em;
        }

        progress.pp-saving-progress {
          border: 1px solid rgba(57, 138, 206, 0.4);
        }
        progress.pp-saving-progress::-webkit-progress-value {
          background-color: rgba(57, 138, 206, 0.9);
        }
        .summery-panel {
          border-radius: 9px;
          padding: 10px 20px;
        }
        .summery-panel * {
          vertical-align: middle;
        }
        .summery-panel md-icon {
          color: var(--md-sys-color-surface-tint);
          --md-icon-size: 32px;
        }
        .summery-panel label {
          font-size: 1.1em;
        }
        .summery-panel strong {
          float: right;
          font-size: 1.5em;
        }
        .summery-panel.volume {
          background: url(../../assets/images/bg-panel1.png) no-repeat rgba(0, 0, 0, 0.25);
        }
        .summery-panel.time {
          background: url(../../assets/images/bg-panel2.png) no-repeat rgba(0, 0, 0, 0.25);
        }

        .content-search {
          background-color: rgba(174, 191, 240, 0.15);
          border-radius: 9px;
          padding: 10px 15px;
          position: relative;

          .search-group {
            display: inline-flex;
            justify-content: space-between;
            gap: 10px;
          }

          md-icon {
            position: absolute;
            opacity: 0.8;
          }

          .btn-solar {
            display: none;
          }

          input {
            border: none;
            border-bottom: 2px solid rgba(173, 191, 240, 0.4);
            padding: var(--padding-narrow);
            padding-left: 25px;
            background-color: transparent;
            color: var(--md-sys-color-on-secondary);
            font-size: 1em;
            font-weight: 600;
          }
          input:focus {
            outline: none;
            box-shadow: none;
          }
          input::placeholder {
            color: var(--md-sys-color-surface-tint);
            opacity: 0.4;
          }
        }
        .content-a3 {
          flex: initial;
        }
        /* Content b-1 layout */
        .content-b1 {
          display: flex;
          gap: 2%;
          flex-wrap: wrap;

          .pp-status {
            flex: 1;
            align-items: center;
            padding: 5px;
            border-radius: 7px;
            text-decoration: none;
            cursor: pointer;

            &[active] {
              border: 2px solid var(--md-sys-color-on-secondary);
            }
          }
          .pp-status.all {
            background:
              linear-gradient(to bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 60%), rgba(57, 138, 206, 0.9);
          }

          .pp-status.normal {
            background:
              linear-gradient(to bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 60%), rgba(53, 162, 74, 0.9);
          }

          .pp-status.danger {
            background:
              linear-gradient(to bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 60%), rgba(209, 73, 70, 0.9);
          }

          .pp-status.warning {
            background:
              linear-gradient(to bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 60%), rgba(238, 141, 3, 0.9);
          }

          .pp-status.warning1 {
            background:
              linear-gradient(to bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 60%), rgba(202, 105, 255, 0.9);
          }
          .pp-status md-icon {
            --md-icon-size: 36px;
            float: left;
            padding: 5px;
            padding-top: 7px;
            padding-right: 10px;
          }
          .pp-status strong {
            display: block;
            margin-top: -1px;
            font-size: 1.8em;
            line-height: 1;
          }
        }
        div.pagenation {
          display: block;
          font-size: 0.9em;
        }
        .pagenation md-icon {
          font-size: 24px;
          color: var(--md-sys-color-surface-tint);
        }
        .pagenation .total {
          float: right;
          gap: 0 5px;
          color: var(--md-sys-color-surface-tint);
        }
        .total strong {
          color: var(--md-sys-color-on-secondary);
        }
        div.number {
          float: left;
          display: block;
          color: var(--md-sys-color-surface-tint);
        }
        .number * {
          vertical-align: middle;
          text-decoration: none;
        }
        .number a {
          padding: var(--padding-narrow) var(--padding-default);
          color: var(--md-sys-color-surface-tint);
        }
        .number a.active {
          color: var(--md-sys-color-on-secondary);
          font-weight: bold;
          text-decoration: underline;
        }
        .number a:hover {
          color: var(--md-sys-color-on-secondary);
          font-weight: bold;
          text-decoration: underline;
        }
        .content-group {
          float: right;
          display: flex;
          align-items: center;
          gap: var(--padding-narrow);
        }
        .default-label {
          color: var(--md-sys-color-surface-tint);
        }
        button {
          background-color: var(--md-sys-color-tertiary);
          height: 30px;
          border: 0;
          border-radius: 5px;
          padding: 5px 12px;
          font-size: 0.8em;
          line-height: 1.2;
          cursor: pointer;
          white-space: nowrap;
        }
        button * {
          vertical-align: middle;
        }
        button md-icon {
          --md-icon-size: 23px;
          position: initial !important;
          margin-top: -2px;
        }
        .focus-button {
          background-color: var(--status-success-color);
        }

        .content-b1 > div {
          flex: 1;
        }

        ox-board-viewer {
          flex: 1;
        }
        .shidden {
          display: none;
        }

        /* Mobile View */
        @media screen and (max-width: 768px) {
          .container {
            flex-direction: column;
            height: calc(100vh - 100px); /* Full height of the viewport */
            min-height: 100%;
          }
          .container > div {
            padding: 10px;
            gap: 10px;
          }
          .shidden {
            display: initial;
          }
          .mhidden {
            display: none !important; /* mobile mode content hidden */
          }

          .container-b {
            flex: 1; /* Fill the height of the screen */
            overflow-y: auto;
          }

          .content-b1 {
            width: 100%;
            text-align: center;

            label {
              letter-spacing: -1px;
            }
          }
          button {
            padding: var(--padding-narrow) var(--padding-default);
          }
          .content-b1 > div:first-child {
            flex: none;
            width: 100%; /* Content b-1-1 fills the width */
            margin-bottom: 10px;
          }

          .content-b1 > div:not(:first-child) {
            flex: 1; /* Divide remaining items into 4 parts */
            box-sizing: border-box;
            text-align: center;
          }
          .content-b4 {
            overflow-y: auto;
          }
          .content-search {
            display: flex;
            flex-direction: column;
            gap: var(--padding-default);

            .btn-solar {
              font-size: 13px;
              display: flex;
              align-items: center;
              gap: 5px;
              white-space: nowrap;
            }

            .content-group {
              float: initial;
              letter-spacing: -1px;
            }
            eaas-select {
              flex: 1;
            }
          }

          .listview-cell {
            display: block;
            text-decoration: none;
            margin-top: var(--padding-narrow);
            padding-bottom: var(--padding-default);
            border-bottom: 1px solid var(--md-sys-color-on-tertiary-container);

            .listview-title label {
              font-size: 1.2em;
              font-weight: 700;
            }
            .listview-title .power {
              display: block;
              float: right;
            }
            .listview-title .address {
              display: block;
              font-size: 0.85em;
              color: var(--md-sys-color-surface-tint);
              opacity: 0.8;
            }
            .listview-info {
              display: flex;
              font-size: 0.9em;
            }
            .listview-info label {
              opacity: 0.7;
            }
            .listview-info span {
              flex: 1;
              font-weight: 600;
              text-indent: var(--padding-narrow);
            }
            .listview-status {
              display: flex;
              gap: var(--padding-default);
              align-items: center;
              font-size: 0.9em;
            }
            .listview-status span {
              flex: 1;
            }
            .listview-status span strong {
              &.pp-status-normal {
                color: var(--status-success-color);
                font-weight: bold;
              }

              &.pp-status-stop {
                color: var(--status-warning-color);
                font-weight: bold;
              }

              &.pp-status-fault {
                color: var(--status-danger-color);
                font-weight: bold;
              }

              &.pp-status-communication_fault {
                color: #ca69ff;
                font-weight: bold;
              }
            }
            .listview-status .progress-container {
              flex: 2;
              position: relative;

              progress {
                width: 100%;
              }
              span {
                position: absolute;
                bottom: 4px;
              }
            }

            .listview-status .dual-progress {
              display: flex;
              gap: var(--padding-default);
              align-items: center;
              flex: 2;
            }
            .listview-status .dual-progress .progress-block {
              position: relative;
              flex: 1;
            }
            .listview-status .dual-progress .progress-block progress {
              width: 100%;
            }
            .listview-status .dual-progress .progress-block span {
              display: block;
              position: absolute;
              left: 9px;
              bottom: 4px;
              margin-top: 0;
            }
          }
        }
      }
    `
    ]; }
    get context() {
        return { title: '대시보드' };
    }
    render() {
        return html `
      <div class="container">
        <!-- 통합요약 Container A begin-->
        <div class="container-a mhidden">
          <div class="summery-panel volume">
            <md-icon>offline_bolt</md-icon>
            <label>전체 발전소 용량</label>
            <strong>${roundNumber(this.totalCapacity, 2).toLocaleString()} kW</strong>
          </div>
          <div class="summery-panel time">
            <md-icon>pace</md-icon>
            <label>전국평균발전시간</label>
            <strong>${this.averageOperationTime || 0} 시간</strong>
          </div>
          <div class="content content-a3">
            <h3>전국 발전량</h3>
            <ox-board-viewer
              .board=${this.board}
              .provider=${provider}
              ?hide-fullscreen=${true}
              ?hide-navigation=${true}
            ></ox-board-viewer>
          </div>
        </div>
        <!-- 통합요약 Container A end-->

        <!-- 대시보드 Container B begin-->
        <div class="container-b">
          <div class="content content-b1">
            <a
              class="pp-status all"
              ?active=${this.selectedPowerPlantStatus === ''}
              @click=${() => this.onClickPowerPlantStatus('')}
            >
              <md-icon class="mhidden">solar_power</md-icon>
              <label class="mhidden">전체발전소</label>
              <label class="shidden">전체발전</label>
              <strong>${this.totalCount}</strong>
            </a>
            <a
              class="pp-status normal"
              ?active=${this.selectedPowerPlantStatus === POWER_PLANT_STATUS.NORMAL}
              @click=${() => this.onClickPowerPlantStatus(POWER_PLANT_STATUS.NORMAL)}
            >
              <md-icon class="mhidden">check_circle</md-icon>
              <label class="mhidden">정상발전소</label>
              <label class="shidden">정상발전</label>
              <strong>${this.normalCount}</strong>
            </a>
            <a
              class="pp-status warning"
              ?active=${this.selectedPowerPlantStatus === POWER_PLANT_STATUS.STOP}
              @click=${() => this.onClickPowerPlantStatus(POWER_PLANT_STATUS.STOP)}
            >
              <md-icon class="mhidden">cancel</md-icon>
              <label>가동정지</label>
              <strong>${this.stopCount}</strong>
            </a>
            <a
              class="pp-status danger"
              ?active=${this.selectedPowerPlantStatus === POWER_PLANT_STATUS.FAULT}
              @click=${() => this.onClickPowerPlantStatus(POWER_PLANT_STATUS.FAULT)}
            >
              <md-icon class="mhidden">offline_bolt</md-icon>
              <label>발전장애</label>
              <strong>${this.faultCount}</strong>
            </a>
            <a
              class="pp-status warning1"
              ?active=${this.selectedPowerPlantStatus === POWER_PLANT_STATUS.COMMUNICATION_FAULT}
              @click=${() => this.onClickPowerPlantStatus(POWER_PLANT_STATUS.COMMUNICATION_FAULT)}
            >
              <md-icon class="mhidden">wifi</md-icon>
              <label>통신장애</label>
              <strong>${this.communicationFaultCount}</strong>
            </a>
          </div>
          <div class="content content-search">
            <div class="search-group">
              <md-icon @click=${() => this.searchPowerPlant()}>search</md-icon>
              <input
                type="text"
                placeholder="발전소 검색"
                @keydown=${this.handleSearch}
                @input=${this.handleInput}
                .value=${this.searchValue}
              />
              <button class="shidden btn-solar" @click=${() => this.openMobilePlantWorldMap()}>
                <md-icon>solar_power</md-icon>전국
              </button>
            </div>

            <div class="content-group">
              <label class="default-label"
                >발전소 그룹 (총 <strong>${this.powerPlantGroupList?.length}</strong>개)</label
              >

              <eaas-select
                .items=${this.powerPlantGroupList}
                .selectedItem=${this.selectedPowerPlantGroup}
                @selection-changed=${this.handlePowerPlantGroupSelection}
              ></eaas-select>

              <button class="focus-button" @click=${() => this.popupGroupAdd.open()}>
                <md-icon class="mhidden">add</md-icon> 추가
              </button>

              <button @click=${() => this.popupGroupManegement.open()}>관리</button>
            </div>
          </div>

          <!-- 데스크탑 모드 발전소 상세 표시 -->
          <div class="content content-b3 mhidden">
            <table class="pp-table">
              <thead>
                <tr>
                  <th>상태</th>
                  <th @click=${() => this.handleSort('name')} style="cursor: pointer;">
                    <div class="sort-container">
                      발전소
                      ${this.sortings[0]?.name === 'name'
            ? html `<md-icon>${this.sortings[0].desc ? 'arrow_downward' : 'arrow_upward'}</md-icon>`
            : ''}
                    </div>
                  </th>
                  <th>위치</th>
                  <th>설비용량</th>
                  <th>출력</th>
                  <th>이용률</th>
                  <th>절감률</th>
                  <th>발전량</th>
                  <th class="time-th">발전시간</th>
                  <th>날씨</th>
                </tr>
              </thead>
              <tbody>
                ${this.powerPlantList?.map(item => {
            const { maxInverterCommunicationStatus, maxInverterOperationStatus, isNoSignal, capacity = 0, alternatingCurrent = 0, generationTime = 0, generationAmount = 0, usage = 0, weatherId, name, address } = item;
            const status = getPowerPlantStatus(Number(maxInverterCommunicationStatus), Number(maxInverterOperationStatus), isNoSignal);
            const iconStatus = getPowerPlantIconStatus(Number(maxInverterCommunicationStatus), Number(maxInverterOperationStatus), isNoSignal);
            const todayGenerationRate = !capacity || !alternatingCurrent ? 0 : roundNumber((alternatingCurrent / capacity) * 100, 2);
            const todayGenerationTime = !capacity || !generationTime ? 0 : Math.round(generationTime * 10) / 10;
            const weatherState = OPEN_WEATHER_STATE_ICON[this.cityWeather[weatherId]?.weather.state];
            const savingRate = roundNumber((generationAmount / Number(usage + generationAmount)) * 100, 2) || 0;
            return html `
                    <tr @click=${() => navigate(`generation-status/${item.id}`)}>
                      <td class="pp-status-${status.toLowerCase()}">
                        <md-icon class="pp-status-${iconStatus[1].toLowerCase()}">wifi</md-icon>
                        <md-icon class="pp-status-${iconStatus[0].toLowerCase()}">offline_bolt</md-icon>
                        ${POWER_PLANT_STATUS_DISPLAY[status]}
                      </td>
                      <td><strong>${name}</strong></td>
                      <td class="address">${address}</td>
                      <td>${capacity || 0}kW</td>
                      <td>${alternatingCurrent || 0}kW</td>
                      <td class="progress-td">
                        <progress
                          class="pp-status-progress-${status.toLowerCase()}"
                          value="${todayGenerationRate}"
                          max="100"
                        ></progress>
                        <span>${todayGenerationRate} %</span>
                      </td>
                      <td class="progress-td">
                        <progress class="pp-saving-progress" value="${savingRate}" max="100"></progress>
                        <span>${savingRate} %</span>
                      </td>
                      <td>${generationAmount?.toLocaleString() || 0}kWh</td>
                      <td>${todayGenerationTime}시간</td>
                      <td><md-icon class="mhidden">${weatherState}</md-icon></td>
                    </tr>
                  `;
        })}
              </tbody>
            </table>

            <eaas-pagenation
              totalRecords=${this.listCount}
              pageSize=${this.PAGE_LIMIT}
              @page-changed=${this.handlePageChange}
              .currentPage=${this.page}
            ></eaas-pagenation>
          </div>

          <!-- 모바일 모드 발전소 상세 표시 -->
          <div class="content content-b4 shidden">
            ${this.powerPlantList?.map(item => {
            const { maxInverterCommunicationStatus, maxInverterOperationStatus, isNoSignal, capacity = 0, alternatingCurrent = 0, generationTime = 0, generationAmount = 0, name, address, usage = 0 } = item;
            const status = getPowerPlantStatus(Number(maxInverterCommunicationStatus), Number(maxInverterOperationStatus), isNoSignal);
            const todayGenerationRate = !capacity || !alternatingCurrent ? 0 : roundNumber((alternatingCurrent / capacity) * 100, 2);
            const todayGenerationTime = !capacity || !generationTime ? 0 : Math.round(generationTime * 10) / 10;
            const savingRate = roundNumber((generationAmount / Number(usage + generationAmount)) * 100, 2) || 0;
            return html `
                <a class="listview-cell" href="generation-status/${item.id}">
                  <div class="listview-title">
                    <label>${name}</label>
                    <span class="power"><strong>${capacity || 0}kW</strong></span>
                    <span class="address">${address}</span>
                  </div>
                  <div class="listview-info">
                    <label>오늘 발전량 : </label>
                    <span>${generationAmount?.toLocaleString() || 0} kWh</span>
                    <label>발전시간 : </label>
                    <span>${todayGenerationTime} 시간</span>
                  </div>
                  <div class="listview-status ">
                    <span>
                      <strong class="pp-status-${status.toLowerCase()}"> ${POWER_PLANT_STATUS_DISPLAY[status]} </strong>
                    </span>

                    <div class="dual-progress">
                      <div class="progress-block">
                        <progress
                          class="pp-status-progress-${status.toLowerCase()}"
                          value="${todayGenerationRate}"
                          max="100"
                        ></progress>
                        <span>${todayGenerationRate} %</span>
                      </div>
                      <!-- <div class="progress-block">
                        <progress class="pp-saving-progress" value="${savingRate}" max="100"></progress>
                        <span>${savingRate} %</span>
                      </div> --->
                    </div>
                  </div>
                </a>
              `;
        })}

            <eaas-pagenation
              totalRecords=${this.listCount}
              pageSize=${this.PAGE_LIMIT}
              @page-changed=${this.handlePageChange}
              .currentPage=${this.page}
              maxPages=${5}
            ></eaas-pagenation>
          </div>
        </div>
        <!-- 대시보드 Container B begin-->
      </div>

      <popup-group-add @close=${this.handlePopupGroupAddClose}></popup-group-add>
      <popup-group-manegement @close=${this.handlePopupGroupManegementClose}></popup-group-manegement>
      <popup-mobile-plant-world-map></popup-mobile-plant-world-map>
    `;
    }
    firstUpdated() {
        // 쉐도우 돔 안에 스크롤 숨기는 css 강제 삽입
        const root = this.viewer?.shadowRoot;
        if (!root)
            return;
        if (!root.querySelector('style[data-ox-target-overflow-fix]')) {
            const styleEl = document.createElement('style');
            styleEl.setAttribute('data-ox-target-overflow-fix', '');
            styleEl.textContent = '#target > div { overflow-y: hidden !important; }';
            root.appendChild(styleEl);
        }
    }
    async pageInitialized(lifecycle) {
        // 처음 들어올때 발전소가 1개면 발전 현황으로 이동
        const { data } = await getPowerPlants({ filters: [], pagination: { page: 1, limit: 1 } });
        if (!lifecycle.resourceId && data.total.count == 1) {
            navigate(`generation-status/${data.items[0].id}`);
        }
        const weather = (await getCityWeather())?.items || [];
        const powerPlantGroupList = (await getPowerPlantGroups())?.data?.items || [];
        this.cityWeather = arrayToObject(weather, 'id');
        this.powerPlantGroupList = powerPlantGroupList;
    }
    async pageUpdated(changes, lifecycle) {
        if (this.active) {
            this.initParams();
            this.setPowerPlantList({
                filters: this.getFilter(),
                sortings: this.sortings
            });
            this.boardRefresh();
            this.resourceId = lifecycle.resourceId || '';
            if (isMobileDevice() === false) {
                const refreshTime = await getRefreshTime();
                if (this.refreshInterval)
                    clearInterval(this.refreshInterval);
                this.refreshInterval = window.setInterval(() => {
                    this.setPowerPlantList({
                        filters: this.getFilter(),
                        sortings: this.sortings
                    });
                }, refreshTime);
            }
        }
        else {
            this.viewer.closeScene();
            if (this.refreshInterval) {
                clearInterval(this.refreshInterval);
                this.refreshInterval = undefined;
            }
        }
    }
    initParams() {
        this.searchValue = '';
        this.selectedPowerPlantStatus = '';
        this.selectedPowerPlantGroup = null;
        this.page = 1;
        this.sortings = [{ name: 'name', desc: false }];
    }
    async boardRefresh() {
        this.viewer.closeScene();
        try {
            const board = await getBoard(this.boardName);
            if (!board) {
                this.board = null;
                throw 'board not found';
            }
            this.board = { ...board, model: JSON.parse(board.model) };
        }
        catch (ex) { }
    }
    onClickPowerPlantStatus(status) {
        this.selectedPowerPlantStatus = status;
        this.searchPowerPlant();
    }
    handlePowerPlantGroupSelection(e) {
        this.selectedPowerPlantGroup = e.detail;
        this.searchPowerPlant();
    }
    handleInput(e) {
        const input = e.target;
        this.searchValue = input.value;
    }
    // 엔터면 검색
    handleSearch(e) {
        if (e.key !== 'Enter')
            return;
        clearTimeout(this.debounceTimer);
        this.debounceTimer = window.setTimeout(() => {
            this.searchPowerPlant();
        }, 500);
    }
    searchPowerPlant() {
        const filters = this.getFilter();
        this.page = 1;
        this.setPowerPlantList({
            filters,
            pagination: { page: this.page, limit: this.PAGE_LIMIT },
            sortings: this.sortings
        });
    }
    getFilter() {
        const filters = [];
        if (this.selectedPowerPlantStatus) {
            filters.push({ name: 'status', operator: 'eq', value: this.selectedPowerPlantStatus });
        }
        if (this.searchValue) {
            filters.push({ name: 'name', operator: 'contains', value: this.searchValue });
        }
        if (this.selectedPowerPlantGroup) {
            filters.push({ name: 'groupId', operator: 'eq', value: this.selectedPowerPlantGroup.id });
        }
        return filters;
    }
    async setPowerPlantList({ filters, pagination = { page: 1, limit: this.PAGE_LIMIT }, sortings }) {
        const { data } = await getPowerPlants({ filters, pagination, sortings });
        this.powerPlantList = data.items;
        this.totalCount = data.total.count;
        this.normalCount = data.total.normalCount;
        this.stopCount = data.total.stopCount;
        this.faultCount = data.total.faultCount;
        this.communicationFaultCount = data.total.communicationFaultCount;
        this.listCount = data.total.listCount;
        this.totalCapacity = data.total.capacity;
        this.averageOperationTime = Math.round((data.total.generationTime / data.total.count) * 10) / 10;
        if (!this.resourceId) {
            navigate(`dashboard/${this.powerPlantList[0].id}`);
        }
    }
    async handlePopupGroupAddClose() {
        const powerPlantGroupList = (await getPowerPlantGroups())?.data?.items || [];
        this.powerPlantGroupList = powerPlantGroupList;
    }
    async handlePopupGroupManegementClose() {
        const powerPlantGroupList = (await getPowerPlantGroups())?.data?.items || [];
        this.powerPlantGroupList = powerPlantGroupList;
    }
    handlePageChange(e) {
        this.page = e.detail.page;
        this.setPowerPlantList({
            filters: this.getFilter(),
            pagination: { page: this.page, limit: this.PAGE_LIMIT },
            sortings: this.sortings
        });
    }
    openMobilePlantWorldMap() {
        this.popupMobilePlantWorldMap.open();
    }
    handleSort(field) {
        this.sortings = [{ name: field, desc: !this.sortings[0].desc }];
        this.setPowerPlantList({
            filters: this.getFilter(),
            pagination: { page: this.page, limit: this.PAGE_LIMIT },
            sortings: this.sortings
        });
    }
};
__decorate([
    state(),
    __metadata("design:type", Object)
], DashboardPage.prototype, "board", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], DashboardPage.prototype, "boardName", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], DashboardPage.prototype, "cityWeather", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], DashboardPage.prototype, "powerPlantList", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], DashboardPage.prototype, "powerPlantGroupList", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], DashboardPage.prototype, "selectedPowerPlantGroup", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "totalCapacity", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "averageOperationTime", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "listCount", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "totalCount", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "normalCount", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "stopCount", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "faultCount", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "communicationFaultCount", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], DashboardPage.prototype, "searchValue", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], DashboardPage.prototype, "selectedPowerPlantStatus", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], DashboardPage.prototype, "resourceId", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], DashboardPage.prototype, "page", void 0);
__decorate([
    state(),
    __metadata("design:type", Array)
], DashboardPage.prototype, "sortings", void 0);
__decorate([
    query('ox-board-viewer'),
    __metadata("design:type", BoardViewer)
], DashboardPage.prototype, "viewer", void 0);
__decorate([
    query('popup-group-add'),
    __metadata("design:type", Object)
], DashboardPage.prototype, "popupGroupAdd", void 0);
__decorate([
    query('popup-group-manegement'),
    __metadata("design:type", Object)
], DashboardPage.prototype, "popupGroupManegement", void 0);
__decorate([
    query('popup-mobile-plant-world-map'),
    __metadata("design:type", Object)
], DashboardPage.prototype, "popupMobilePlantWorldMap", void 0);
DashboardPage = __decorate([
    customElement('dashboard-page')
], DashboardPage);
export { DashboardPage };
//# sourceMappingURL=dashboard-page.js.map