<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;
    }
  },
  components: {
    Modal,
  },
  data(){
    return {
      modalOpen: false,
      spieltag: null,
      user: null
    }
  },
  computed: {
    tsSource(){
      return ritzenbergenlib.RitzenbergenLib.api("/bulitipp/buli-punkte.php?spieltag="+(spieltag+1)+"&paarung=null&detail=user&name="+ts[spieltag][user].user.username);
    }
  }
};
</script>
<template>
  <Modal v-if="modalOpen" @closemodal="closeModal"><h1 class="detailansichtSchriftart">Detailansicht für {{ ts[spieltag][user].user.username }}, {{ spieltag+1 }}. Spieltag</h1>
        <table class="detailansichtSchriftart">
            <tr>
                <td>Tipp von {{ ts[spieltag][user].user.username }}</td>
                <td>Ergebnis</td>
                <td>Tipp</td>
                <td>Punkte</td>
            </tr>
            <tr>
                <td>0 - 0</td>
                <td>0 - 0</td>
                <td>0 - 0</td>
                <td>3</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>
