<script setup>
import { store } from "./store.js";
import BehoerdeItem from "./components/BehoerdeItem.vue";
import TruckAndStopsign from "./components/TruckAndStopsign.vue";
</script>
<script>
/** ------------------------------------------------------
 * Container der Startseite des Quiz
 * @author DigS-Gov Projekt
 * ------------------------------------------------------
 */
export default {
  components: { BehoerdeItem, TruckAndStopsign },
  data() {
    return {
      store,
    };
  },
  mounted(){
  //   console.log("Onboarding Page: + "+this.$route.path);
  //   console.log("Onboarding Page: + "+ this.$route.name);
  //    if(this.$route.name == "onboarding_a"){
  //     store.config.variante_A=true;
  //     store.config.variante_B=false;
  //     store.config.variante_C=false;
  //   } 
  //   if(this.$route.name == "onboarding_b"){
  //     store.config.variante_A=false;
  //     store.config.variante_B=true;
  //     store.config.variante_C=false;
  //   }
  //   if(this.$route.name == "onboarding_c"){
  //     store.config.variante_A=true;
  //     store.config.variante_B=false;
  //     store.config.variante_C=true;
  //   }

    // Send logs to server if played for the first time
    if (store.alreadyPlayedOnce == false) {

      // try to retrieve session-id (for evaulation purposes)
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      if (store.session_id == "") store.session_id = urlParams.get("session");

      var logString = "Spielaufruf";

      // actually send logs only if session-id is present (user is part of evaluation)
      if (store.session_id != null) store.logData(logString);
    }
    // store.setStates();
  }
};
</script>

<template>
  <section id="onboarding">
    <p>
      Wissen Sie, mit welchen Behörden Ihre Meldebehörde nach der Ummeldung automatisch
      Daten austauscht?
    </p>

    <p v-if="store.config.variante_A">
      Testen Sie Ihr Wissen bei diesem kleinen Quiz!
    </p>
    <p v-if="store.config.variante_B">
      Bei dem folgenden Quiz soll ein Umzugswagen auf der Straße die Datenweitergabe von
      der Meldebehörde an eine andere Behörde symbolisieren. Zu Beginn existieren noch
      keine Straßen zwischen den Behörden, es erfolgt also noch kein Datenaustausch.
    </p>
    <table>
  <tr>
    <td> <p v-if="store.config.variante_A" font>
      Der Umzugswagen auf der Straße symbolisiert die Datenweitergabe von der Meldebehörde an eine andere Behörde.
      Die Weitergabe erfolgt in diesem Fall immer, für jede Person, die in Deutschland umzieht.
    </p></td>
    <td width="50%"><svg id="first_example" width="80%" viewBox="30 0 670 140">
      <svg id="Strasse_GEZ" v-if="store.config.variante_A" x="290" y="60">
        <rect class="gray_street" width="240" height="15"></rect>
        <line class="cls-2" x1="0" y1="7.5" x2="240" y2="7.5" />
      </svg>
      <BehoerdeItem id="Knoten_Zuzugsmeldebehoerde" field_name="Zuzugsmeldebehörde" value_name="zuzugsmeldebehoerde"
        icon_name="Icon_Zuzugsmeldebehoerde" is_main_node="true" width="267" height="145" x="40" y="0" />
      <BehoerdeItem id="Knoten_GEZ" :force_active="store.config.variante_A" field_name="Beitragsservice" value_name="gez"
        icon_name="Icon_GEZ" x="490" y="10" />
      <TruckAndStopsign id="TruckAndStopsign" x="370" y="15" view="right" value_name="default" truck_active>
      </TruckAndStopsign>
    </svg></td>
     
  </tr>
  <tr>
    <td><p>Klicken Sie einmal auf die Straße und es erscheint ein Warndreieck. 
      Dieses symbolisiert, dass die Datenweitergabe hier von persönlichen Bedingungen (beispielsweise Religionszugehörigkeit) abhängt. </p>  </td>
    <td > <svg id="second_example" width="80%" viewBox="30 0 670 140">
      <svg id="Strasse_GEZ" x="290" y="60">
        <rect class="gray_street" width="240" height="15"></rect>
        <line class="cls-2" x1="0" y1="7.5" x2="240" y2="7.5" />
      </svg>
      <BehoerdeItem id="Knoten_Zuzugsmeldebehoerde" field_name="Zuzugsmeldebehörde" value_name="zuzugsmeldebehoerde"
        icon_name="Icon_Zuzugsmeldebehoerde" is_main_node="true" width="267" height="145" x="40" y="0" />
      <BehoerdeItem id="Knoten_GEZ" :force_active="store.config.variante_A" field_name="Beitragsservice" value_name="gez"
        icon_name="Icon_GEZ" x="490" y="10" />
      <TruckAndStopsign id="TruckAndStopsign" x="370" y="15" view="right" value_name="gez"
       bedingt_active></TruckAndStopsign>
    </svg></td>
   
  </tr>
  <tr>
    <td> <p v-if="store.config.variante_B">
      Sie können auf eine Behörde klicken und es erscheint eine Straße mit einem
      Umzugswagen. Damit zeigen Sie an, dass Ihrer Meinung nach zwischen der Meldebehörde
      und der anderen Behörde eine automatische Datenweitergabe nach der Ummeldung
      erfolgt.
    </p>
    <p v-if="store.config.variante_A" font>
      Sie können auch zweimal auf die Straße klicken und diese so blockieren. 
      Damit zeigen Sie an, dass dort Ihrer Meinung nach durch die Meldebehörde keine Datenweitergabe erfolgt.
    </p>
    </td>
    <td><svg id="third_example" width="80%" viewBox="30 0 670 140">
      <svg id="Strasse_GEZ" x="290" y="60">
        <rect class="gray_street" width="240" height="15"></rect>
        <line class="cls-2" x1="0" y1="7.5" x2="240" y2="7.5" />
      </svg>
      <BehoerdeItem id="Knoten_Zuzugsmeldebehoerde" field_name="Zuzugsmeldebehörde" value_name="zuzugsmeldebehoerde"
        icon_name="Icon_Zuzugsmeldebehoerde" is_main_node="true" width="267" height="145" x="40" y="0" />
      <BehoerdeItem id="Knoten_GEZ" :force_active="store.config.variante_B" field_name="Beitragsservice" value_name="gez"
        icon_name="Icon_GEZ" x="490" y="10" />
      <TruckAndStopsign id="TruckAndStopsign" x="370" y="15" view="right" value_name="gez"
        :stopsign_active="store.config.variante_A" :truck_active="store.config.variante_B"></TruckAndStopsign>
    </svg></td>

  </tr>
</table> 
    <p>Bereit, Ihr Wissen zu testen?</p>
  </section>
</template>

<style scoped>
#onboarding {
  max-width: 100%;
  margin: auto;
}
tr {
  min-height: 100px;
  max-height: 300px;
  height: 200px;
}
p {
  width: 100%;
  font-size: 130%;
  fill: currentColor;
}

#Knoten_GEZ {
  pointer-events: none;
}

#TruckAndStopsign {
  pointer-events: none;
}

/** --- Anfang Straßen-Styles --- */
.cls-1 {
  fill: #ccc;
}

.cls-2 {
  stroke: #f2f2f2;
  stroke-width: 1.5px;
  stroke-dasharray: 7.5 7.5;
  stroke-miterlimit: 10;
}

/** --- Ende Straßen-Styles --- */
</style>
