<template>
  <f7-page name="about" @page:beforein="initHome">
    <f7-navbar
      title="Live Scores"
      class="navbar color-theme-orange"
      back-link="Back"
    >
      <!-- <div slot="right" @click="lock()" v-if="moderator">Lock</div> -->
      <f7-nav-right>
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
          icon-ios="f7:search"
          icon-aurora="f7:search"
          icon-md="material:search"
          color="blue"
        ></f7-link>
      </f7-nav-right>
      <f7-searchbar
        class="searchbar-demo"
        expandable
        search-container=".search-list"
        search-in=".item-title"
        :disable-button="!$theme.aurora"
      ></f7-searchbar>
    </f7-navbar>
    <f7-list class="searchbar-not-found">
      <f7-list-item title="Nothing found"></f7-list-item>
    </f7-list>
    <f7-list class="search-list searchbar-found" media-list>
      <f7-list-item
        swipeout
        v-for="(score, index) in scores"
        :key="index"
        :title="score.league"
      >
        <span slot="title"><br />{{ score.teamhost | capitalize }}</span>
        <span slot="title"> v </span>
        <span slot="title">{{ score.teamvisitor | capitalize }}<br /></span>
        <span slot="subtitle" v-if="index % 2 == 0">
          <f7-badge color="green">{{ score.score }}</f7-badge></span
        >
        <span slot="subtitle" v-if="index % 2 == 1">
          <f7-badge color="red">{{ score.score }}</f7-badge></span
        >
        <span slot="text" v-if="score.matchtime != ''">
          {{ score.matchtime }}'
        </span>

        <span slot="footer">
          {{ score.matchstatus }}
        </span>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

<script>
import firebase from "firebase";
import moment from "moment";

export default {
  data() {
    return {
      moderator: true,
      appState: 1,
      scores: [],
    };
  },
  watch: {},

  computed: {
    contacts() {
      return this.$store.getters.contacts;
    },

    friends() {
      return this.$store.getters.friends;
    },
    friend_requests() {
      return this.$store.getters.friend_requests;
    },
  },

  methods: {
    async checkInternet() {
      // console.log("members");
      if (window.hasOwnProperty("cordova")) {
        let network_status = await this.$store.dispatch("checkConnection");
        if (network_status == "offline") {
          this.$store.commit(
            "setAlertMessage",
            "It seems you are offline. Kindly check internet connection to continue..."
          );
        }
      }
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
    addFrd(frd) {
      var request = {};
      request.sender = firebase.auth().currentUser.uid;
      request.recipient = frd.uid;
      console.log("request", request);
      this.$store.dispatch("sendRequest", request);
    },
    gotoChat(frd) {
      var frd_string = JSON.stringify(frd);
      this.$f7router.navigate("/chat/" + encodeURIComponent(frd_string));
    },
    initHome() {
      this.$store.commit("setShowTabs", true);
    },
  },

  mounted() {
    this.$f7ready((f7) => {
      const self = this;
      const app = self.$f7;
      app.request.get(
        "https://chatme24.com/sportsupdate/goalalert/pullgoals.php",
        function (data) {
          var obj = JSON.parse(data);
          //console.log(obj);
          self.scores = obj;
          //console.log(self.scores);
        }
      );
    });
  },
  created() {
    this.checkInternet();
  },
};
</script>

<style scoped>
.small-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
</style>