import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { showToast } from '../../shared/utils/alert';
import { getInverterDetailByPowerPlantId } from '../../entities/inverter/query';
import { roundNumber } from '../../shared/utils/func/common';
import { getPowerPlantStatus } from '../../shared/utils/func/power-plant';
import { POWER_PLANT_STATUS_DISPLAY } from '../../shared/const/power-plant';
import moment from 'moment-timezone';
let InverterDetailPopup = class InverterDetailPopup extends LitElement {
    constructor() {
        super(...arguments);
        this.isOpen = false;
        this.powerPlantId = '';
        this.inverterStatuses = [];
    }
    static { this.styles = css `
    :host {
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
      }
      .popup {
        border: 2px solid var(--md-sys-color-tertiary);
        background-color: #111;
        display: flex;
        flex-direction: column;
        gap: var(--padding-wide);
        border-radius: 8px;
        padding: var(--padding-wide);
        width: 800px;
        box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
        position: relative;
        color: var(--md-sys-color-on-secondary);
      }
      .header {
        font-size: 1.2em;
        font-weight: bold;
      }
      .close-btn {
        position: relative;
        float: right;
        top: 2px;
        cursor: pointer;
      }
      div.content {
        background: url(../../assets/images/bg-inverter.png) no-repeat center;
        background-size: 100%;
        width: 90%;
        min-height: 300px;
        margin: auto;
        position: relative;

        text-align: center;
        justify-content: space-between;
        display: none;
      }
      .dc-info,
      .ac-info {
        position: relative;
        z-index: 5;
        max-height: 130px;
        overflow: hidden;
      }
      .dc-info div,
      .ac-info div {
        border: 1px solid var(--md-sys-color-on-tertiary-container);
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        margin-bottom: var(--padding-default);
        padding: var(--padding-narrow) var(--padding-default);
        text-align: center;
        font-size: 1.1em;
      }
      .dc-info {
        float: left;
        color: #c6f4c9;
      }
      .ac-info {
        float: right;
        color: #aebff0;
      }
      .dc-info span,
      .ac-info span {
        display: block;
        padding: var(--padding-narrow);
        padding-bottom: 0;
        text-align: center;
        font-size: 1em;
      }
      .content strong {
        color: var(--md-sys-color-on-secondary);
      }
      dashboard-arrow-animation {
        max-height: 180px;
        position: absolute;
        top: 10px;
        width: 100%;
      }
      .update-btn-container {
        color: var(--md-sys-color-surface-tint);
        text-align: right;
        font-size: 0.9em;
      }
      .update-btn {
        background-color: var(--md-sys-color-tertiary);
        height: 30px;
        border: 0;
        border-radius: 5px;
        margin-left: var(--margin-narrow);
        padding: var(--padding-narrow) var(--padding-wide);
        font-size: 1em;
        color: var(--md-sys-color-on-secondary);
        cursor: pointer;
      }
      .update-btn * {
        vertical-align: middle;
      }
      .update-btn md-icon {
        --md-icon-size: 20px;
      }
      .update-btn:hover {
        background-color: var(--status-success-color);
      }
      div.shidden {
        display: none;
      }

      table {
        width: 100%;
        border-collapse: collapse;

        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: var(--padding-narrow);
          font-size: 0.9em;
          color: var(--md-sys-color-surface-tint);
          font-weight: normal;
          line-height: 1.2;
        }
        td {
          border-bottom: 1px solid rgba(173, 191, 240, 0.2);
          padding: 7px 4px;
          font-size: 0.9em;
          text-align: center;

          &.issue-status {
            font-weight: bold;
            font-variation-settings: 'wght' 300;
          }

          &.issue-status-normal {
            color: var(--status-success-color);
          }
          &.issue-status-stop {
            color: var(--status-warning-color);
          }
          &.issue-status-fault {
            color: var(--status-danger-color);
          }
          &.issue-status-communication_fault {
            color: #9d2adb;
          }
        }
      }
    }
    /* Mobile Styles */
    @media (max-width: 768px) {
      .shidden {
        display: initial !important;
      }
      .mhidden {
        display: none !important; /* mobile mode content hidden */
      }
      .popup {
        width: 80% !important;
      }
      .m-inverter {
        max-height: 550px;
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        gap: var(--padding-default);
      }
      .inverter-cell {
        .issue-status-normal {
          color: var(--status-success-color);
        }
        .issue-status-stop {
          color: var(--status-warning-color);
        }
        .issue-status-fault {
          color: var(--status-danger-color);
        }
        .issue-status-communication_fault {
          color: #9d2adb;
        }
        label {
          font-weight: bold;
        }
        th {
          border-top: none !important;
          padding: 2px !important;
          line-height: 1 !important;
        }
        td {
          padding: 2px 4px !important;
          text-align: right !important;
        }

        .inverter-status {
          float: left;
          border-radius: 50%;
          width: 18px;
          height: 18px;
          margin-right: var(--margin-narrow);
          position: relative;
          top: 2px;
          text-align: center;
          font-weight: bold;
          font-variation-settings: 'wght' 300;

          md-icon {
            --md-icon-size: 15px;
          }
        }
      }
    }
  `; }
    render() {
        return this.isOpen
            ? html `
          <div class="overlay" @click="${this.close}">
            <div class="popup" @click="${e => e.stopPropagation()}">
              <div class="header">
                최근 운전정보
                <md-icon class="close-btn" @click="${this.close}">close</md-icon>
              </div>
              <div class="content mhidden">
                <div class="dc-info">
                  <div>
                    DC출력
                    <strong
                      >${roundNumber(this.inverterStatuses.reduce((acc, cur) => acc + Number(cur.dc), 0))} kW</strong
                    >
                  </div>
                  ${this.inverterStatuses.map(v => html `<span>${v.no} : <strong>${v.dc || 0} kW</strong></span>`)}
                </div>

                <div class="ac-info">
                  <div>
                    AC출력
                    <strong
                      >${roundNumber(this.inverterStatuses.reduce((acc, cur) => acc + Number(cur.ac), 0))} kW</strong
                    >
                  </div>
                  ${this.inverterStatuses.map(v => html `<span>${v.no} : <strong>${v.ac || 0} kW</strong></span>`)}
                </div>
                <dashboard-arrow-animation class="mhidden"></dashboard-arrow-animation>
              </div>
              <div class="update-btn-container mhidden">
                <span> ※ 수신 시간: ${this.getInverterLastReceivedTime()} </span>

                <button class="update-btn" @click="${this.updateData}"><md-icon>refresh</md-icon> 업데이트</button>
              </div>

              <table class="mhidden">
                <thead>
                  <tr>
                    <th>상태</th>
                    <th>인버터</th>
                    <th>DC전압</th>
                    <th>DC전류</th>
                    <th>DC전력</th>
                    <th>AC전압 R</th>
                    <th>AC전압 S</th>
                    <th>AC전압 T</th>
                    <th>AC전류 R</th>
                    <th>AC전류 S</th>
                    <th>AC전류 T</th>
                    <th>AC전력</th>
                  </tr>
                </thead>
                <tbody>
                  ${this.inverterStatuses.map(v => {
                const status = getPowerPlantStatus(v.com, v.run);
                return html `
                      <tr>
                        <td class="issue-status issue-status-${status.toLowerCase()}">
                          ${POWER_PLANT_STATUS_DISPLAY[status]}
                        </td>
                        <td>인버터 ${v.no.toString().padStart(2, '0')}</td>
                        <td>${v.DC_V}</td>
                        <td>${v.DC_I}</td>
                        <td>${v.DC_P}</td>
                        <td>${v.IV_R}</td>
                        <td>${v.IV_S}</td>
                        <td>${v.IV_T}</td>
                        <td>${v.IC_R}</td>
                        <td>${v.IC_S}</td>
                        <td>${v.IC_T}</td>
                        <td>${v.AC_P}</td>
                      </tr>
                    `;
            })}
                </tbody>
              </table>

              <div class="shidden m-inverter">
                ${this.inverterStatuses.map(v => {
                const status = getPowerPlantStatus(v.com, v.run);
                return html `<div class="inverter-cell">
                    <div>
                      <div class="inverter-status issue-status-${status.toLowerCase()}">
                        <md-icon>offline_bolt</md-icon>
                      </div>
                      <label>인버터 ${v.no.toString().padStart(2, '0')}</label>
                    </div>
                    <table>
                      <tr>
                        <th>DC전압</th>
                        <td>${v.DC_V}</td>
                        <th>DC전류</th>
                        <td>${v.DC_I}</td>
                      </tr>
                      <tr>
                        <th>DC전력</th>
                        <td>${v.DC_P}</td>
                        <th>AC전압R</th>
                        <td>${v.IV_R}</td>
                      </tr>
                      <tr>
                        <th>AC전압S</th>
                        <td>${v.IV_S}</td>
                        <th>AC전압T</th>
                        <td>${v.IV_T}</td>
                      </tr>
                      <tr>
                        <th>AC전류R</th>
                        <td>${v.IC_R}</td>
                        <th>AC전류S</th>
                        <td>${v.IC_S}</td>
                      </tr>
                      <tr>
                        <th>AC전류T</th>
                        <td>${v.IC_T}</td>
                        <th>AC전력</th>
                        <td>${v.AC_P}</td>
                      </tr>
                    </table>
                  </div> `;
            })}
              </div>
            </div>
          </div>
        `
            : '';
    }
    async open() {
        const { data: inverterStatuses } = (await getInverterDetailByPowerPlantId(this.powerPlantId)) || {};
        this.inverterStatuses = inverterStatuses;
        this.isOpen = true;
    }
    close() {
        this.isOpen = false;
    }
    async updateData() {
        const { data: inverterStatuses } = (await getInverterDetailByPowerPlantId(this.powerPlantId)) || {};
        this.inverterStatuses = inverterStatuses;
        showToast('인버터 데이터가 업데이트 되었습니다.');
    }
    getInverterLastReceivedTime() {
        return moment(Math.max(...this.inverterStatuses.map(v => Number(v.collectedAt))))
            .tz('Asia/Seoul')
            .format('YYYY년 MM월 DD일 HH:mm:ss');
    }
};
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Object)
], InverterDetailPopup.prototype, "isOpen", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], InverterDetailPopup.prototype, "powerPlantId", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], InverterDetailPopup.prototype, "inverterStatuses", void 0);
InverterDetailPopup = __decorate([
    customElement('popup-inverter-detail')
], InverterDetailPopup);
export { InverterDetailPopup };
//# sourceMappingURL=popup-inverter-detail.js.map