<script>
import {mapGetters} from 'vuex'
import Control from './Controll.vue'
import RoutesLoader from './RoutesLoader.vue'

export default {
  name: 'RoutesList',
  components: {RoutesLoader, Control},
  props: {
    name: {
      default: "",
      type: String
    },
    port: {
      default: "",
      type: String
    },

  },
  data() {
    return {
      open: false,
    }
  },
  computed: {
    ...mapGetters('proxy', ['routesState']),
  },
  watch: {
    routesState: function (newVal) {
      this.open = newVal === 'active' ? true : false
    }
  },
  methods: {
    toggle () {
      this.open = !this.open
      this.onToggle({isOpen: this.open})
    }
  }
}
</script>

<template>
  <div
    v-if="open"
    class="flex flex-col w-full"
  >
    <Control />
    <slot />
  </div>
  <RoutesLoader />
</template>
