<template>
  <div id="my-data">
    <template v-if="showData">
      <b-table striped hover :items="myData"></b-table>
    </template>
    {{variabileDiTest}}
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MyData",
  props: ["variabileDiTest"],
  data() {
    return {
      myToken: localStorage.getItem("accessToken"),
      showData: false,
      myData: undefined,
      filteredData: {},
    };
  },
  async mounted() {
    try {
      this.myData = await axios.get("http://127.0.0.1:8000/api/profile", {
        headers: { Authorization: `Bearer ${this.myToken}` },
      });
    } catch (error) {
      if (error.response) {
        // console.log(error.response.data);
        // console.log(error.response.status);
        // console.log(error.response.headers);
        if (error.response.status == "403")
          //unauthorized
          this.$router.push({ name: "Home" });
      }
    }

    this.myData = this.myData.data.data;

    for (const key in this.myData) {
      // console.log(`${key}: ${this.myData[key]}`);
      if (
        !(
          this.myData[key] == "" ||
          this.myData[key] == "null" ||
          this.myData[key] == undefined ||
          this.myData[key] == null ||
          key == "pets"
        )
      )
        this.filteredData[key] = this.myData[key];
    }

    console.log(this.myData.pets);

    if (this.myData.pets) {
      this.myData.pets.forEach((element) => {
        if (this.filteredData.pets)
          this.filteredData.pets =
            this.filteredData.pets + `${element.name} ${element.type}, `;
        else this.filteredData.pets = `${element.name} ${element.type}, `;
      });
    }

    this.myData = [this.filteredData];

    this.showData = true;
  },
};
</script>