<script lang="ts">
    import { A11BerechnungWaermequellenZusammenstellung } from "#lib/Berechnungen/BedarfsausweisWohnen/A11BerechnungWaermequellenZusammenstellung.js";
  
  $: result = A11BerechnungWaermequellenZusammenstellung();
  
  </script>


<div class="overflow-x-auto mt-16">
    <table class="table-auto border-collapse border border-gray-300 w-full text-left">
      <thead>
        <tr class="bg-gray-200 text-left">
          <th colspan="7" class="border border-gray-300 p-2">
            <h2>Tabelle A.11 — Gebäude – Zusammenstellung der Wärmequellen</h2>
          </th>
        <tr class="text-center">
          <th colspan="1" class="border border-gray-300 p-2">Bezugsfläche<br>A<sub>NGF</sub> [m<sup>2</sup>]<br>(1)</th>
          <th colspan="2" class="border border-gray-300 p-2">Interne Wärmequellen q<sub>i</sub> [Wh/m<sup>2</sup>d]<br>
            (DIN V 18599-10:2018-09, Tabelle 4) (2)</th>
          <th colspan="4" class="border border-gray-300 p-2"></th>
          <tr class="text-center h-10">
            <th colspan="1" class="border border-gray-300 p-2  bg-yellow-100"></th>
            <th colspan="2" class="border border-gray-300 p-2  bg-yellow-100"></th>
            <th colspan="4" class="border border-gray-300 p-2"></th>
          </tr>
    
        <tr class="text-center">
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
          Monat</th>
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
          Tage im Monat<br>d<sub>mth</sub> [d] (3)</th>
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
            Interne Wärmequellen<br>
            Q<sub>l</sub> = A<sub>NGF</sub> · q<sub>l</sub> · d<sub>mth</sub> / 1000 [kWh]<br>(4) = (1) · (2) · (3) / 1000
          </th>
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
            Solare Wärmequellen<br>
            Q<sub>S,tr</sub> [kWh]<br>aus Tabelle A.7 (5)
          </th>
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
            Wärmequellen Anlagentechnik<br>
            Q<sub>l,source</sub> =  Q<sub>l,source,h</sub> + Q<sub>l,source,w</sub> [kWh]<br>aus Tabelle A.8 (8) und Tabelle A.10 (4)<br>(6)
          </th>
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
            Summe Wärmequellen als Energie<br>
            Q<sub>i,ges</sub> = Q<sub>l</sub> + Q<sub>S,tr</sub> +  Q<sub>l,source</sub> [kWh]<br>(7) = (4) + (5) + (6)
          </th>
          <th class="border border-gray-300 px-4 py-2 text-gray-700">
            Summe Wärmequellen als Leistung<br>
            P<sub>i,ges</sub> =  Q<sub>i,ges</sub> / (24 · d<sub>mth</sub>) · 1000 [W]<br>(8) = (7) / [24 · (3)] · 1000
          </th>
        </tr>
      </thead>
      <tbody class="text-center">
        <tr>
          <td class="border border-gray-300 px-4 py-2">Januar</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Januar}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Januar*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseJanuar*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">Februar</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Februar}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Februar*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseFebruar*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">März</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.März}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.März*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseMaerz*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">April</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.April}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.April*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseApril*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">Mai</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Mai}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Mai*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseMai*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">Juni</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Juni}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Juni*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseJuni*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">Juli</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Juli}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Juli*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseJuli*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">August</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.August}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.August*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseAugust*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">September</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.September}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.September*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseSeptember*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">Oktober</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Oktober}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Oktober*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseOktober*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">November</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.November}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.November*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseNovember*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 px-4 py-2">Dezember</td>
          <td class="border border-gray-300 px-4 py-2 bg-gray-100">{result.TageMonat.Dezember}</td>
          <td class="border-2 border-gray-600 px-4 py-2">{Math.round(result.interneWaermeQuellenProMonat.Dezember*100)/100}</td>
          <td class="border border-gray-300 px-4 py-2 bg-yellow-100">{Math.round(result.summeErgebnisseDezember*100)/100}</td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
          <td class="border-2 border-gray-600 px-4 py-2"></td>
        </tr>
        <tr class="text-center h-10">
          <th colspan="2" class="border border-gray-300 p-2">Jahressummen</th>
          <th colspan="1" class="border-2 border-gray-600 p-2"></th>
          <th colspan="1" class="border-2 border-gray-600 p-2"></th>
          <th colspan="1" class="border-2 border-gray-600 p-2"></th>
          <th colspan="1" class="border-2 border-gray-600 p-2"></th>
          <th colspan="1" class="border-2 border-gray-600 p-2"></th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="7" class="border border-gray-300 px-4 py-2 text-sm">
            Interne Wärmequellen<sup>a</sup>: EFH: q<sub>i</sub> = 45 Wh/m<sup>2</sup>d; MFH: q<sub>i</sub> = 90 Wh/m<sup>2</sup>d<br>
            <sup>a</sup> Werte sind auf Nettogrundfläche (NGF) bezogen.
          </td>
        </tr>
      </tfoot>
    </table>
  </div>