<script setup lang="ts">
import { ref } from 'vue'
import SelectScrapydServer from '@/components/SelectScrapydServer.vue'
import HomeDataInfo from './components/HomeDataInfo.vue'
import HomeSystemInfo from './components/HomeSystemInfo.vue'
import HomeConfig from './components/HomeConfig.vue'

const scrapydServerId = ref('')

const handleSelectScrapydServerInit = (options: any[]) => {
  if (options.length > 0) {
    scrapydServerId.value = options[0].value
  }
}

const resetData = (id: string) => {
  scrapydServerId.value = id
  localStorage.setItem('scrapyd_server_id', id)
}
</script>

<template>
  <div class="app-container home-container">
    <select-scrapyd-server
      v-model:value="scrapydServerId"
      @on-init="handleSelectScrapydServerInit"
      @change="resetData"
    />
    <div class="mt-md">
      <home-data-info
        :key="scrapydServerId"
        :scrapyd-server-id="scrapydServerId"
      />
      <home-system-info />
      <home-config />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  height: 100%;
  
  .mt-md {
    margin-top: 20px;
  }
}
</style>
