<template>
  <v-container id="stat" fill-height>
    <v-card class="mx-auto" tile elevation="5">
      <v-img height="200" width="750" src="../assets/2.png"></v-img>
      <v-card-title>
        <v-icon color="teal lighten-3" large left>mdi-apps</v-icon>
        <span>APP-VUE-HUB ({{ items.length }} projects<span v-if="!loading"> | {{ allCounts }} visits</span>)</span>
      </v-card-title>
      <v-progress-linear v-if="loading" indeterminate></v-progress-linear>
      <v-divider></v-divider>
      <v-list two-line id="scrolling-techniques-7" class="overflow-y-auto" max-height="450" max-width="750">
        <v-list-item-group>
          <v-list-item v-for="(item, i) in items" :key="item.index" :to="{ path: item.path }">
            <v-list-item-content>
              <v-list-item-title>{{ ++i }} - {{ item.name }}</v-list-item-title>
              <v-list-item-subtitle>URL:{{ item.path }}</v-list-item-subtitle>
            </v-list-item-content>

            <span id="myheaders" class="text--secondary overline"
              v-if="item.counters !== 'undefined visits |' && !loading">
              <span class="pa-md-2 mx-lg-auto "><v-chip small>{{ item.counters
                  }}</v-chip></span>
              <span class=" mx-lg-auto ">visits \ </span>
              <span class=" mx-lg-auto ">last </span>
              <span class=" mx-lg-auto "><v-chip small>{{ item.last_date }}</v-chip></span>
              <v-list-item-action>
                <v-btn icon @click.native.prevent="showInfo(item.name)">
                  <v-icon color="grey lighten-1">mdi-information</v-icon>
                </v-btn>
              </v-list-item-action>
            </span>
          </v-list-item>
        </v-list-item-group>
      </v-list>
      <v-divider></v-divider>
      <v-list subheader>
        <v-subheader class="overline">БОТП АСУТП ККЦ - Самофалов Д.А.</v-subheader>
      </v-list>
    </v-card>
  </v-container>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { _ } from "vue-underscore";
export default {
  data: () => ({
    allCounts: 0,
    items: [],
  }),
  computed: {
    ...mapGetters("stat", {
      loading: "loading",
      data: "data"
    })
  },
  methods: {
    ...mapActions("stat", {
      getData: "getData"
    }),
    showInfo(e) {
      this.$router.props = e;
      this.$router.push('/stat')
    },
  },
  mounted() {
    this.$router.options.routes.forEach(element => {
      if ((element.path !== "/") && (element.path !== "/stat")) {
        this.items.push(
          { name: element.name, path: element.path }
        )
      }
    });
    this.getData().then(() => {
      this.items = this.items.map((arr) => {
        return {
          ...arr,
          counters: _.defaults(_.findWhere(this.data.stat, {
            project_name: arr.name
          })).project_count,
          last_date: _.defaults(_.findWhere(this.data.stat, {
            project_name: arr.name,
          })).last_date
        };
      });
      this.data.stat.forEach(element => {
        if (element.project_name !== 'Stat') {
          this.allCounts = this.allCounts + element.project_count
        }
      });
    });
  }
};
</script>
<style>
.container {
  max-width: 100% !important;
}

#myheaders {
  font-size: 12px !important;
}

#stat {
  height: 100%;
  width: 100%;

  background: url(../assets/1.png) center !important;
}
</style>
