<script>
import {toRefs} from 'vue'
import {mapGetters} from 'vuex'
import { FwbSpinner } from 'flowbite-vue'
import ServiceCard from "./ServiceCard.vue"
import NewServiceButton from "@atoms/NewServiceButton.vue"

export default {
  name: 'ServicesList',
  components: {FwbSpinner, ServiceCard, NewServiceButton},
  props: {
    serviceOfServices: {
      type: Object,
      default: () => {}
    },
  },
  setup (props) {
    const {serviceOfServices} = toRefs(props)
    serviceOfServices.value.fetchServices()
  },
  computed: {
    ...mapGetters('services', ["services", "routes", "servicesState", "newservice", 'isDeleteData']),
    maxHeight () {
      return document.documentElement.clientHeight - 400
    },
    
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<template>
  <div
    v-if="servicesState === 'active'"
    :class="`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 pr-1`"
    :style="{maxHeight: `${maxHeight}px`}"
  >
    <NewServiceButton :serviceOfServices="serviceOfServices" />
    <serviceCard
      v-for="service in services"
      :id="service.id"
      :key="service.name"
      :serviceOfServices="serviceOfServices"
      :service="service"
      :name="service.name"
      :port="`${service.port}`"
      :device_ip="service.device_ip"
      :proxy_ip="service.proxy_ip"
      :isOnline="service.is_online"
      :description="service.description"
    />
  </div>
  <div
    v-if="servicesState === 'loading'"
    class="flex w-full justify-center"
  >
    <fwb-spinner
      size="8"
      class="mr-2"
    />
    <span class="text-2xl text-slate-700">
      Загрузка сайтов...
    </span>
  </div>
</template>
