<script>
// import {ref} from 'vue'
import {mapActions, mapGetters} from 'vuex'
import { FwbSpinner } from 'flowbite-vue'
import SiteCard from "./SiteCard.vue"
import NewSiteButton from "../../NewSiteButton.vue"

export default {
  name: 'SiteList',
  components: {FwbSpinner, SiteCard, NewSiteButton},
  data () {
    return {
      dynamicHeight: null
    }
  },
  computed: {
    ...mapGetters('proxy', ["sites", "routes", "sitesState", "newSite", 'isDeleteData']),
  },
  mounted () {
    this.$nextTick(function () {
      this.maxHeight()
    })
  },
  updated () {
    this.$nextTick(function () {
      this.maxHeight()
    })
  },
  methods: {
    ...mapActions('proxy', ["uploadSites"]),
    maxHeight () {
      setTimeout(() => {
        const containerHeight = this.$refs.sitesList?.offsetHeight
        const clientHeight = document.documentElement.clientHeight
        const delHeight = 400
        const currHeight = containerHeight + delHeight
        if ((currHeight) > clientHeight) {
          this.dynamicHeight = clientHeight - delHeight
        }
      }, 100)
    },
  }
}
</script>

<template>
  {{ 
  
   }}
  <div
    v-if="sitesState === 'active'"
    ref="sitesList"
    :class="`${dynamicHeight ? 'shadow-lg p-3' : ''} grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 gap-5 overflow-y-auto mb-14`"
    :style="{maxHeight: `${dynamicHeight}px`}"
  >
    <NewSiteButton />
    <SiteCard
      v-for="site in sites"
      :id="site.id"
      :key="site.name"
      :site="site"
      :name="site.name"
      :port="`${site.port}`"
      :device_ip="site.device_ip"
      :proxy_ip="site.proxy_ip"
      :status="site.status"
      :description="site.description"
    />
  </div>
  <div
    v-if="sitesState === 'loading'"
    class="flex w-full justify-center"
  >
    <fwb-spinner
      size="8"
      class="mr-2"
    />
    <span class="text-2xl text-slate-700">
      Загрузка сайтов...
    </span>
  </div>
</template>
