<script lang="js">
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import Modal from "../Modal.vue";
export default {
	props: {
		ergebnisse: {
			type: Array,
			required: true,
		},
		maxspieltag: {
			type: Number,
			required: true,
		},
		tipps: {
			type: Array,
			required: true,
		},
		users: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			RitzenbergenLib,
			showmodal: false,
			modalindex: 0,
		};
	},
	components: {
		Modal,
	},
	methods: {
		ps(heim, gast, ergebnisHeim, ergebnisGast) {
			if(heim == ergebnisHeim && gast == ergebnisGast) {
				return 3;
			}
			const tippDiff = heim - gast;
			const ergebnisDiff = ergebnisHeim - ergebnisGast;
			if(tippDiff === ergebnisDiff) {
				return 2;
			}
			if(heim > gast && ergebnisHeim > ergebnisGast) {
				return 1;
			}
			if(heim < gast && ergebnisHeim < ergebnisGast) {
				return 1;
			}
			return 0;
		},
	},
};
</script>
<template>
	<section class="buli-results scroll-x" id="buliresults-section">
		<br /><br />
		<h2>Paarungsergebnisse {{ maxspieltag }}. Spieltag</h2>
		<Modal v-if="showmodal" @closemodal="showmodal = false">
			<h1 class="detailansichtSchriftart">
				Detailansicht {{ maxspieltag }}. Spieltag
			</h1>
			<h2 class="detailansichtSchriftart">
				{{ ergebnisse[modalindex].paarung.heim }} -
				{{ ergebnisse[modalindex].paarung.gast }}
			</h2>
			<h1>
				{{ ergebnisse[modalindex].heim }} -
				{{ ergebnisse[modalindex].gast }}
			</h1>
			<table class="detailansichtSchriftart">
				<tbody>
					<tr>
						<td>Name</td>
						<td>Tipp</td>
						<td>Punkte</td>
						<td>Gesamtpunktzahl</td>
					</tr>
					<tr
						v-for="(tipp, i) in tipps.filter(
							(tipp) =>
								tipp.tipp.paarungsid ==
								ergebnisse[modalindex].paarung.id
						)"
						:key="i"
					>
						<td>
							{{
								users.filter((user) => user.id == tipp.user)[0]
									.username
							}}
						</td>
						<td>{{ tipp.tipp.heim }} - {{ tipp.tipp.gast }}</td>
						<td>{{ ps(tipp.tipp.heim, tipp.tipp.gast, ergebnisse[modalindex].heim, ergebnisse[modalindex].gast) }}</td>
						<td>
							{{
								users.filter((user) => user.id == tipp.user)[0]
									.points
							}}
						</td>
					</tr>
				</tbody>
			</table>
		</Modal>
		<table>
			<tbody>
				<tr>
					<td>Paarung</td>
					<td>Ergebnis</td>
				</tr>
				<tr v-for="(ergebnis, i) in ergebnisse" :key="i">
					<td
						@click="
							showmodal = true;
							modalindex = i;
						"
					>
						<span class="as-link">
							<span class="teams">
								<span class="team">
									<img
										:src="
											RitzenbergenLib.RitzenbergenLib.api(
												'/bulitipp/get-image.php?team=' +
													ergebnis.paarung.heim
											)
										"
										alt=""
									/>
									<p>{{ ergebnis.paarung.heim }}</p>
								</span>
								<span class="vs"></span>
								<span class="team">
									<p>{{ ergebnis.paarung.gast }}</p>
									<img
										:src="
											RitzenbergenLib.RitzenbergenLib.api(
												'/bulitipp/get-image.php?team=' +
													ergebnis.paarung.gast
											)
										"
										alt=""
									/>
								</span>
							</span>
						</span>
					</td>
					<td>
						<p>{{ ergebnis.heim }} - {{ ergebnis.gast }}</p>
					</td>
				</tr>
			</tbody>
		</table>
	</section>
</template>
<style scoped>
@import "../../assets/css/bulitipp2.css";

h1 {
	text-align: center;
}
</style>
