import { __decorate, __metadata } from "tslib";
import { css, html } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { navigate, PageView } from '@operato/shell';
import '../widgets/power-plant-header';
import '../features/eaas-chart';
import moment from 'moment';
import { getRefreshTime } from '../shared/api/queries/common';
import { isMobileDevice } from '@operato/utils';
import { getFirstPowerPlantId } from '../shared/utils/func/power-plant';
import { getPowerPlantStateByYearMonth } from '../entities/power-plant-state/query';
import { getPowerUsageSummaryByDate } from '../entities/power-usage/query';
let MarketInfoPage = class MarketInfoPage extends PageView {
    constructor() {
        super(...arguments);
        this.powerPlantId = '';
        this.currentPath = '';
        this.chartData = [];
        this.chartSeriesNames = ['추세별 평균 단가'];
        this.powerPlantState = {};
    }
    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;
          flex-direction: column;
          height: calc(100vh - 90px);
          border-top: 1px solid var(--md-sys-color-on-tertiary-container);
          padding: 20px 25px;
          overflow-y: auto;
        }

        .container * {
          color: var(--md-sys-color-on-secondary);
        }

        .container div {
          display: flex;
          gap: 15px;
          margin-top: 3px;
        }

        div.title-container {
          margin-top: var(--margin-wide);
          padding: 0;
          padding-bottom: 5px;
          border-bottom: 2px solid #2681eb;
        }
        h2 {
          flex: 1;
          margin: 0;
          padding: 0;
          font-size: 1.17em;
        }

        .main-container {
          display: flex;
          flex-direction: column;
          gap: var(--margin-wide);
          flex: 1;
        }

        /* 상단 2개 카드 레이아웃 */
        .container-A {
          display: flex;
          gap: var(--margin-wide);
        }
        .container-A-1,
        .container-A-2 {
          flex: 1;
        }

        .card {
          border: 1px solid var(--md-sys-color-on-tertiary-container);
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          padding: var(--padding-wide);
        }
        .card h3 {
          margin: 0 0 var(--margin-default) 0;
          font-size: 1em;
          color: var(--md-sys-color-surface-tint);
        }

        .market-table {
          width: 100%;
          border-spacing: 0;

          th {
            border-bottom: 1px solid rgba(173, 191, 240, 0.2);
            background-color: rgba(0, 0, 0, 0.3);
            padding: 6px 8px;
            color: var(--md-sys-color-surface-tint);
            text-align: center;
            font-weight: normal;
          }
          td {
            border-bottom: 1px solid rgba(173, 191, 240, 0.2);
            padding: 8px 8px;
            font-size: 0.95em;
            vertical-align: middle;
          }
          td.label {
            width: 40%;
            color: var(--md-sys-color-surface-tint);
          }
          td.value {
            text-align: right;
          }
          td.emphasis {
            color: var(--status-danger-color);
            font-weight: bold;
          }
        }

        .fee-table {
          td {
            text-align: center;

            &.label {
              width: 110px;
            }
          }
        }

        /* 하단 차트 카드 */
        .container-B {
          display: flex;
        }
        .chart-card {
          flex: 1;
          height: 360px;
        }
        .chart-header {
          width: 100%;
          justify-content: space-between;
          align-items: center;
          margin-bottom: var(--margin-default);
        }
        .chart-unit {
          color: var(--md-sys-color-surface-tint);
          font-size: 0.9em;
        }
        .chart-body {
          flex: 1;
        }
        .chart-body eaas-chart {
          display: block;
          width: 100%;
          height: 100%;

          #chart,
          .apexcharts-canvas {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
          .container {
            padding: 10px;
            height: calc(100vh - 130px);
            max-height: 100%;
          }
          .container div {
            gap: var(--padding-narrow);
          }
          .container-A {
            flex-direction: column;
          }
          .chart-card {
            height: 300px;
          }
          div.title-container {
            width: initial;
          }

          .market-table {
            th {
              font-size: 14px;
            }
          }

          .fee-table {
            td {
              &.label {
                width: 65px;
              }
            }
          }
        }
      }
    `
    ]; }
    get context() {
        return { title: '시장정보' };
    }
    render() {
        if (!this.powerPlantId)
            return html ``;
        return html `
      <div class="container">
        <power-plant-header .powerPlantId=${this.powerPlantId} .currentPath=${this.currentPath}></power-plant-header>

        <div class="title-container">
          <h2>시장정보</h2>
        </div>

        <div class="main-container">
          <!-- 상단: 좌우 2개 표 -->
          <div class="container-A">
            <div class="card container-A-1">
              <h3>당월 실시간 요금 적용 기준</h3>
              <table class="market-table">
                <tbody>
                  <tr>
                    <td class="label">적용 전기요금</td>
                    <td class="value">${this.powerPlantState.electricityFeeType}</td>
                  </tr>
                  <tr>
                    <td class="label">기본요금단가</td>
                    <td class="value">${this.powerPlantState?.basicFeeUnitPrice?.toLocaleString() || 0} 원/kW</td>
                  </tr>
                  <tr>
                    <td class="label">기본요금</td>
                    <td class="value">${this.powerPlantState?.basicFee?.toLocaleString() || 0} 원</td>
                  </tr>
                  <tr>
                    <td class="label">요금적용용량</td>
                    <td class="value">
                      ${this.powerPlantState?.feeApplyPower?.toLocaleString() || 0} kW
                      ${this.powerPlantState?.feeApplyPowerDate
            ? `(${moment(this.powerPlantState?.feeApplyPowerDate, 'YYYY-MM').format('YYYY년 MM월')})`
            : ''}
                    </td>
                  </tr>
                  <tr>
                    <td class="label">최대수요전력</td>
                    <td class="value">
                      ${this.powerPlantState?.maxDemand?.toLocaleString() || 0} kW
                      ${this.powerPlantState?.maxDemandDate
            ? `(${moment(this.powerPlantState?.maxDemandDate, 'YYYY-MM').format('YYYY년 MM월')})`
            : ''}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="card container-A-2">
              <h3>전력량요금 (원/kWh)</h3>
              <table class="market-table fee-table">
                <thead>
                  <tr>
                    <th>시간대</th>
                    <th>여름철<br />(6~8월)</th>
                    <th>봄/가을<br />(3~5, 9~10월)</th>
                    <th>겨울철<br />(11~2월)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="label">경부하</td>
                    <td>${this.powerPlantState?.usageFeeInSummerLight?.toLocaleString() || 0}</td>
                    <td>${this.powerPlantState?.usageFeeInSpringLight?.toLocaleString() || 0}</td>
                    <td>${this.powerPlantState?.usageFeeInWinterLight?.toLocaleString() || 0}</td>
                  </tr>
                  <tr>
                    <td class="label">중간부하</td>
                    <td>${this.powerPlantState?.usageFeeInSummerMid?.toLocaleString() || 0}</td>
                    <td>${this.powerPlantState?.usageFeeInSpringMid?.toLocaleString() || 0}</td>
                    <td>${this.powerPlantState?.usageFeeInWinterMid?.toLocaleString() || 0}</td>
                  </tr>
                  <tr>
                    <td class="label emphasis">최대부하</td>
                    <td class="emphasis">${this.powerPlantState?.usageFeeInSummerMax?.toLocaleString() || 0}</td>
                    <td class="emphasis">${this.powerPlantState?.usageFeeInSpringMax?.toLocaleString() || 0}</td>
                    <td class="emphasis">${this.powerPlantState?.usageFeeInWinterMax?.toLocaleString() || 0}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 하단: 라인 차트 -->
          <div class="container-B">
            <div class="card chart-card">
              <div class="chart-header">
                <h3>요금 단가 주차별 평균 (최근 6개월)</h3>
                <div class="chart-unit">단위: 원/kWh</div>
              </div>
              <div class="chart-body">
                <eaas-chart
                  .data=${this.chartData}
                  .seriesNames=${this.chartSeriesNames}
                  chartType="line"
                  prefix=" 원/kWh"
                  .hideLegend=${false}
                  .yTickAmount=${5}
                  .xLabelRotate=${isMobileDevice() ? -30 : 0}
                ></eaas-chart>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
    }
    async pageUpdated(changes, lifecycle) {
        if (this.active) {
            if (!lifecycle.resourceId) {
                navigate(`${lifecycle.page}/${await getFirstPowerPlantId()}`);
                return;
            }
            this.powerPlantId = lifecycle.resourceId;
            this.currentPath = lifecycle.page;
            await this.updateComplete;
            await this.getMarketInfo();
            if (isMobileDevice() === false) {
                const refreshTime = await getRefreshTime();
                if (this.refreshInterval)
                    clearInterval(this.refreshInterval);
                this.refreshInterval = window.setInterval(() => {
                    this.getMarketInfo();
                }, refreshTime);
            }
        }
        else {
            if (this.refreshInterval) {
                clearInterval(this.refreshInterval);
                this.refreshInterval = undefined;
            }
        }
    }
    async getMarketInfo() {
        if (this.powerPlantHeader) {
            await this.powerPlantHeader.fetchPowerPlantHeaderInfo();
        }
        // 상단 테이블 데이터
        const yearMonth = moment().tz('Asia/Seoul').format('YYYY-MM');
        const { data } = await getPowerPlantStateByYearMonth(yearMonth);
        this.powerPlantState = data || {};
        // 하단: 라인 차트 데이터
        const today = moment().tz('Asia/Seoul').format('YYYY-MM-DD');
        const before6Month = moment().tz('Asia/Seoul').subtract(6, 'months').format('YYYY-MM-DD');
        const { data: chartData } = await getPowerUsageSummaryByDate(this.powerPlantId, before6Month, today);
        this.chartData = chartData.map(item => ({
            label: item.date,
            values: [item.hourlyApplyPricing || 0]
        }));
    }
};
__decorate([
    state(),
    __metadata("design:type", String)
], MarketInfoPage.prototype, "powerPlantId", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], MarketInfoPage.prototype, "currentPath", void 0);
__decorate([
    state(),
    __metadata("design:type", Array)
], MarketInfoPage.prototype, "chartData", void 0);
__decorate([
    state(),
    __metadata("design:type", Array)
], MarketInfoPage.prototype, "chartSeriesNames", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], MarketInfoPage.prototype, "powerPlantState", void 0);
__decorate([
    query('power-plant-header'),
    __metadata("design:type", Object)
], MarketInfoPage.prototype, "powerPlantHeader", void 0);
MarketInfoPage = __decorate([
    customElement('market-info-page')
], MarketInfoPage);
export { MarketInfoPage };
//# sourceMappingURL=market-info-page.js.map