<script lang="js">
import ritzenbergenlib from "../../ritzenbergenlib";
import Modal from "../Modal.vue";
export default {
  props: {
    users: {
      type: Array,
      required: true,
    },
    ts: {
      type: null,
      required: true,
    },
  },
  methods: {
    closeModal(){
      this.modalOpen=false;
    },
    openModal(spieltag, user){
      this.modalOpen=true;
      this.spieltag=spieltag;
      this.user=user;
    },
		calcPoints(spiel){
				return ritzenbergenlib.RitzenbergenLib.calcPoints(spiel);
		}
  },
  components: {
    Modal,
  },
  data(){
    return {
      modalOpen: false,
      spieltag: null,
      user: null,
      RitzenbergenLib: ritzenbergenlib.RitzenbergenLib
    }
  },
  computed: {

  },
  asyncComputed: {
    modalContent: {
      get(){
        if(this.spieltag==undefined) return [];
        let params=new URLSearchParams({
          spieltag: this.spieltag+1,
          user: this.ts[this.spieltag][this.user].user.id
        });
        return fetch(this.RitzenbergenLib.api("/bulitipp/spieltag-user.php?")+params.toString()).then((response)=>{
          return response.json();
        }).then((data)=>{
          return data.data;
        })
        ;
      },
      default: []
    }
  }
};
</script>
<template>
  <Modal v-if="modalOpen" @closemodal="closeModal"
    ><h1 class="detailansichtSchriftart">
      Detailansicht für {{ ts[spieltag][user].user.username }},
      {{ spieltag + 1 }}. Spieltag
    </h1>
    <table>
      <tr>
        <td>Tipp von {{ ts[spieltag][user].user.username }}</td>
        <td>Ergebnis</td>
        <td>Tipp</td>
        <td>Punkte</td>
      </tr>
      <tr v-for="spiel in modalContent">
        <td>{{ spiel.paarung.heim }} - {{ spiel.paarung.gast }}</td>
        <td>{{ spiel.result[0] }} - {{ spiel.result[1] }}</td>
        <td v-if="spiel.tipp!=null">{{ spiel.tipp[0] }} - {{ spiel.tipp[1] }}</td>
        <td v-else> - </td>
        <td>{{ calcPoints(spiel) }}</td>
      </tr>
    </table>
  </Modal>
  <section class="buli-table" id="buli-table">
    <br /><br />
    <h2>Punktetabelle</h2>
    <table>
      <tbody>
        <tr>
          <td>Tag</td>
          <td v-for="spieltag in ts[0]">{{ spieltag.user.username }}</td>
        </tr>
        <tr v-for="(spieltag, i) in ts">
          <td>{{ i + 1 }}</td>

          <!-- Open BTN -->
          <td
            class="as-link"
            v-for="(userpoints, j) in spieltag"
            @click="openModal(i, j)"
          >
            {{ userpoints.tsPoints }}
          </td>
        </tr>

        <tr>
          <td>Summe</td>

          <td v-for="user in users">{{ user.points }}</td>
        </tr>
      </tbody>
    </table>
  </section>
</template>
<style scoped>
@import "../../assets/css/bulitipp2.css";
</style>
