<script lang="ts"> 
	import { BedarfsausweisWohnenClient, AufnahmeClient } from "#components/Ausweis/types.js";

	export let ausweis: BedarfsausweisWohnenClient;
	export let gebaeude_aufnahme: AufnahmeClient;

	import { A9BerechnungNutzenergiebedarfTrinkwarmwasser } from "#lib/Berechnungen/BedarfsausweisWohnen/A9BerechnungNutzenergiebedarfTrinkwarmwasser.js";

	let trinkwasserWaermebedarf = 0, flaechenBezogenerWaermebedarf = 0, bezugsflaeche = 0, trinkwasserWaermebedarfJahr = 0

	$: {
		const result = A9BerechnungNutzenergiebedarfTrinkwarmwasser(ausweis, gebaeude_aufnahme)
		trinkwasserWaermebedarf = result.trinkwasserWaermebedarf
		flaechenBezogenerWaermebedarf = result.flaechenBezogenerWaermebedarf
		bezugsflaeche = result.bezugsflaeche
		trinkwasserWaermebedarfJahr = result.trinkwasserWaermebedarfJahr
	}
</script>

<div class="overflow-x-auto mt-16">
	<table class="table-auto border-collapse border border-gray-300 w-full text-sm">
		<!-- Tabellenkopf -->
		<thead>
			<tr class="bg-gray-200 text-left">
				<th colspan="3" class="border border-gray-300 p-2">
					<h2>Tabelle A.9 – Trinkwassererwärmung – Berechnung des Wärmebedarfs zur Trinkwassererwärmung</h2>
				</th>
			</tr>
			<tr class="text-center">
					<th class="w-1/4 border border-gray-300 p-2">Bezugsfläche <br> A<sub>NGF</sub> [m²] <br> (1)</th>
					<th class="w-1/4 border border-gray-300 p-2">Flächenbezogener Wärmebedarf <br> q<sub>w,b</sub> [kWh/(m²·a)] aus Tabell 19<br> (2)</th>
					<th class="border border-gray-300 p-2">Trinkwasserwärmebedarf <br> Q<sub>w,b</sub> = A<sub>NGF</sub> ⋅ q<sub>w,b</sub> ⋅ d<sub>mth</sub> / 365 [kWh]<br>(4) = (1) · (2) · (3) / 365</th>
				</tr>
			<tr class="text-center h-10">
					<th class="w-1/4 border border-gray-300 p-2 bg-yellow-100">
						{bezugsflaeche}
					</th>
					<th class="w-1/4 border border-gray-300 p-2 bg-blue-100">{flaechenBezogenerWaermebedarf}</th>
				</tr>
			<tr class="text-center">
				<th class="w-1/4 border border-gray-300 p-2">Monat</th>
				<th class="w-1/4 border border-gray-300 p-2">Tage im Monat<br>d<sub>mth</sub> [d] (3)</th>
			</tr>
		</thead>

		<!-- Tabellenkörper -->
		<tbody>
			<!-- Monatszeilen -->
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Januar</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Januar)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Februar</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">28</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Februar)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">März</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Maerz)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">April</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">30</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.April)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Mai</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Mai)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Juni</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">30</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Juni)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Juli</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Juli)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">August</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.August)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">September</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">30</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.September)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Oktober</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Oktober)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">November</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">30</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.November)}</td>
			</tr>
			<tr>
				<td class="w-1/4 border border-gray-300 p-2 text-center">Dezember</td>
				<td class="w-1/4 border border-gray-300 p-2 text-center bg-gray-100">31</td>
				<td class="border-2 border-gray-600 p-2 text-center">{Math.round(trinkwasserWaermebedarf.Dezember)}</td>
			</tr>
			<!-- Summenzeile -->
			<tr>
				<td colspan="1" class="border border-gray-300 p-2 text-center font-bold">
				</td>
				<td colspan="1" class="border border-gray-300 p-2 text-center font-bold">
					Jahressumme Q<sub>w,b</sub> [kWh/a]
				</td>
				<td colspan="1" class="border-2 border-gray-600 p-2 text-center font-bold">
					{Math.round(trinkwasserWaermebedarfJahr)}
				</td>
			</tr>
			<!-- Fußzeile -->
			<tr>
				<td colspan="3" class="border border-gray-300 p-2 text-left text-xs">
				</td>
			</tr>
		</tbody>
	</table>
</div>
