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-calendar';
import moment from 'moment';
import { getIssueHistoriesByPowerPlantId } from '../entities/issue-history/query';
import { POWER_PLANT_PAGE_LIMIT, POWER_PLANT_STATUS } from '../shared/const/power-plant';
import { getPowerPlantStatus, getIsSunset } from '../shared/utils/func/power-plant';
import { POWER_PLANT_STATUS_DISPLAY } from '../shared/const/power-plant';
import '../features/eaas-pagenation';
import { getRefreshTime } from '../shared/api/queries/common';
import { isMobileDevice } from '@operato/utils';
import { getFirstPowerPlantId } from '../shared/utils/func/power-plant';
let IssueHistoryPage = class IssueHistoryPage extends PageView {
    constructor() {
        super(...arguments);
        this.powerPlantId = '';
        this.currentPath = '';
        this.selectedFromDate = moment().format('YYYY-MM-DD');
        this.page = 1;
        this.issueHistories = [];
        this.issueHistorySummary = {};
    }
    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); /* Full height of the viewport */
          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: 10px;
        }

        div.title-container {
          margin-top: var(--margin-wide);
          padding: 0;
          padding-bottom: 5px;
          border-bottom: 2px solid #2681eb;
          width: 79.2%;
        }
        .title-container div {
          gap: 0;
          padding: 0;
          margin-bottom: -5px;
          margin-top: 5px;
        }
        .title-container div a {
          background-color: var(--md-sys-color-outline);
          text-decoration: none;
          padding: var(--padding-narrow) var(--padding-wide);
          padding-bottom: 0px;
          color: #aebff0;
        }
        .title-container div a:hover {
          color: var(--md-sys-color-on-secondary);
        }
        .title-container div a.active {
          background-color: var(--md-sys-color-tertiary);
          color: var(--md-sys-color-on-secondary);
          font-weight: bold;
        }
        .title-container div a.active:before {
          content: '';
          position: relative;
          display: inline-block;
          margin-right: 7px;
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 5px solid var(--md-sys-color-on-secondary);
        }
        h2 {
          flex: 1;
          margin: 0;
          padding: 0;
          font-size: 1.17em;
        }

        .main-container {
          flex: 1;
        }
        .container-A {
          display: flex;
          justify-content: space-between;
        }
        .container-A-1,
        .container-B {
          flex: 4;
        }
        .container-A-2,
        .container-C {
          flex: 5;

          & > div {
            flex-direction: column;
          }
        }
        .container-A-3,
        .container-D {
          flex: 2;
        }
        .container-A .content {
          display: flex;
        }

        .container-B {
          flex: 9;
          flex-direction: column;
        }
        .table-container {
          overflow-y: auto;
          max-height: 70vh;
        }
        .issue-table {
          width: 100%;
          table-layout: fixed;
          border-spacing: 0;

          th {
            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;
          }
          td {
            border-bottom: 1px solid rgba(173, 191, 240, 0.2);
            padding: 7px 4px;
            font-size: 0.9em;
            text-align: center;

            &.issue-status-normal {
              color: var(--status-success-color);
              font-weight: bold;
            }
            &.issue-status-stop {
              color: var(--status-warning-color);
              font-weight: bold;
            }
            &.issue-status-fault {
              color: var(--status-danger-color);
              font-weight: bold;
            }
            &.issue-status-communication_fault {
              color: #9d2adb;
              font-weight: bold;
            }
          }
          th:nth-child(1),
          td:nth-child(1) {
            width: 110px;
          }
          th:nth-child(2),
          td:nth-child(2) {
            width: 80px;
          }
          th:nth-child(3),
          td:nth-child(3) {
            width: 120px;
          }
          th:nth-child(4),
          td:nth-child(4) {
            width: auto;
          }
        }
        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;
        }
        .container-C {
          flex: 2;
          flex-direction: column;
          position: relative;
        }
        div.pp-status {
          flex-direction: initial;
          align-items: center;
          padding: 5px;
          border-radius: 7px;
        }
        .pp-status.normal {
          background-color: var(--status-info-color);
        }
        .pp-status.success {
          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.communication_fault {
          background-color: #9d2adb;
        }
        .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.info-cell {
          border: 1px solid var(--md-sys-color-on-tertiary-container);
          border-radius: 10px;
          display: block;
          padding: var(--padding-default) var(--padding-wide);
          font-size: 1.3em;
          line-height: 1.3;
        }
        .info-cell label {
          display: block;
          font-size: 0.7em;
        }
        .normal {
          background:
            linear-gradient(to bottom right, rgba(255, 255, 255, 0.3) 0%, transparent 60%), rgba(57, 138, 206, 0.9);
        }
        .shidden {
          display: none;
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
          .shidden {
            display: initial;
          }
          .mhidden {
            display: none !important; /* mobile mode content hidden */
          }
          .container {
            padding: 10px;
            height: calc(100vh - 130px);
            max-height: 100%;
          }
          .container div {
            gap: var(--padding-narrow);
          }
          .container-A,
          .main-container {
            flex-direction: column;
          }
          div.main-container {
            flex-direction: column-reverse; /* Reverse order */
            padding: 0;
            flex: 1;
            overflow-y: auto;
          }
          div.title-container {
            width: initial;
          }
          div.container-B {
            flex: 1;
            overflow-y: auto;
          }
          div.container-C {
            display: block;
            flex: initial;
            padding: 0;

            eaas-calendar {
              display: block;
              margin-bottom: var(--margin-default);
              margin-top: var(--margin-default);
            }
          }

          div.info-cell,
          div.pp-status {
            display: inline-block;
            width: 28%;
            font-size: 1.1em;
          }
          div.info-cell {
            position: relative;
            top: -3px;
            padding: 8px 4px 5px 9px;
          }
          div.pp-status {
            margin-left: 2px;
            padding: 1px 2px 5px 7px;
          }
          div.pp-status label {
            font-size: 0.75em;
          }
          div.pp-status strong {
            font-size: 1.2em;
          }
          th {
            font-size: 0.9em;
          }
          td {
            padding: 4px 2px;
          }
          .issue-table {
            th:nth-child(1),
            td:nth-child(1) {
              width: 65px;
            }
            th:nth-child(2),
            td:nth-child(2) {
              width: 50px;
            }
            th:nth-child(3),
            td:nth-child(3) {
              width: 60px;
            }
            th:nth-child(4),
            td:nth-child(4) {
              width: auto;
            }
          }
        }
      }
    `
    ]; }
    get context() {
        return { title: '상태정보' };
    }
    render() {
        if (!this.powerPlantId)
            return html ``;
        return html `
      <!-- 전체레이아웃 Container begin-->
      <div class="container">
        <!-- 상단 공통 바 Container begin-->
        <power-plant-header .powerPlantId=${this.powerPlantId} .currentPath=${this.currentPath}></power-plant-header>
        <!-- 상단 공통 바 Container end-->

        <!-- title container begin-->
        <div class="title-container">
          <h2>상태정보</h2>
        </div>
        <!-- title container end-->

        <!-- 중앙 Container begin-->
        <div class="main-container">
          <!-- 시간대별 챠트 요약정보 좌측 Container begin-->
          <div class="container-B">
            <div class="table-container">
              <table class="issue-table">
                <tr>
                  <th>발생시간</th>
                  <th>인버터</th>
                  <th>알람타입</th>
                  <th>상세내용</th>
                </tr>
                ${this.issueHistories.map(issueHistory => {
            const collectorAt = moment(Number(issueHistory.collected_at)).format('HH:mm:ss');
            const isSunset = getIsSunset(collectorAt);
            const alarmType = getPowerPlantStatus(issueHistory.com, issueHistory.run);
            const msgStatus = getPowerPlantStatus(issueHistory.com, issueHistory.run, 'F', isSunset);
            let msg = msgStatus === POWER_PLANT_STATUS.FAULT ? issueHistory.fault : POWER_PLANT_STATUS_DISPLAY[msgStatus];
            return html `
                    <tr>
                      <td>${collectorAt}</td>
                      <td><strong>${issueHistory.inverter_no.toString().padStart(2, '0')}</strong></td>
                      <td class="issue-status-${status}">${POWER_PLANT_STATUS_DISPLAY[alarmType]}</td>
                      <td>${msg}</td>
                    </tr>
                  `;
        })}
              </table>
            </div>

            <eaas-pagenation
              .currentPage=${this.page}
              totalRecords=${this.issueHistorySummary.count}
              pageSize=${POWER_PLANT_PAGE_LIMIT}
              @page-changed=${this.handlePageChange}
              maxPages=${5}
            ></eaas-pagenation>
          </div>
          <!-- 시간대별 챠트 요약정보 좌측 Container end-->

          <!-- 사이드 정보 우측 Container begin-->
          <div class="container-C">
            <eaas-calendar
              .selectedDate=${this.selectedFromDate}
              @change=${this.handleFromDateChange}
              title="조회일자"
            ></eaas-calendar>

            <div class="info-cell normal">
              <label>전체</label>
              <strong>${this.issueHistorySummary.count || 0}</strong> 건
            </div>
            <div class="pp-status warning">
              <md-icon class="mhidden">cancel</md-icon>
              <label>가동정지</label>
              <strong>${this.issueHistorySummary.com || 0}</strong>
            </div>
            <div class="pp-status danger">
              <md-icon class="mhidden">offline_bolt</md-icon>
              <label>발전장애</label>
              <strong>${this.issueHistorySummary.run || 0}</strong>
            </div>
          </div>
          <!-- 사이드 정보 우측 Container end-->
        </div>
        <!-- 중앙 Container end-->
      </div>
      <!-- 전체레이아웃 Container end-->
    `;
    }
    async pageUpdated(changes, lifecycle) {
        if (this.active) {
            if (!lifecycle.resourceId) {
                navigate(`${lifecycle.page}/${await getFirstPowerPlantId()}`);
                return;
            }
            this.initParams();
            this.powerPlantId = lifecycle.resourceId;
            this.currentPath = lifecycle.page;
            await this.updateComplete;
            this.getIssueHistory();
            if (isMobileDevice() === false) {
                const refreshTime = await getRefreshTime();
                if (this.refreshInterval)
                    clearInterval(this.refreshInterval);
                this.refreshInterval = window.setInterval(() => {
                    this.getIssueHistory();
                }, refreshTime);
            }
        }
        else {
            if (this.refreshInterval) {
                clearInterval(this.refreshInterval);
                this.refreshInterval = undefined;
            }
        }
    }
    initParams() {
        this.page = 1;
        this.selectedFromDate = moment().format('YYYY-MM-DD');
    }
    handleFromDateChange(e) {
        this.selectedFromDate = e.detail.value;
        this.page = 1;
        this.getIssueHistory();
    }
    async getIssueHistory() {
        // 헤더 정보 갱신
        if (this.powerPlantHeader) {
            await this.powerPlantHeader.fetchPowerPlantHeaderInfo();
        }
        const { data: { issueHistories, issueHistorySummary } } = await getIssueHistoriesByPowerPlantId(this.powerPlantId, this.selectedFromDate, this.selectedFromDate, {
            page: this.page,
            limit: POWER_PLANT_PAGE_LIMIT
        });
        this.issueHistories = issueHistories || [];
        this.issueHistorySummary = issueHistorySummary || {};
    }
    handlePageChange(e) {
        this.page = e.detail.page;
        this.getIssueHistory();
    }
};
__decorate([
    state(),
    __metadata("design:type", String)
], IssueHistoryPage.prototype, "powerPlantId", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], IssueHistoryPage.prototype, "currentPath", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], IssueHistoryPage.prototype, "selectedFromDate", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], IssueHistoryPage.prototype, "page", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], IssueHistoryPage.prototype, "issueHistories", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], IssueHistoryPage.prototype, "issueHistorySummary", void 0);
__decorate([
    query('power-plant-header'),
    __metadata("design:type", Object)
], IssueHistoryPage.prototype, "powerPlantHeader", void 0);
IssueHistoryPage = __decorate([
    customElement('issue-history-page')
], IssueHistoryPage);
export { IssueHistoryPage };
//# sourceMappingURL=issue-history-page.js.map